Cal tenir en compte, que com són atributs de <td> , primer cal definir l'etiqueta de taula <table> i després definir la fila.
És quan definim la cel.la amb <td> quan apliquem les etiquetes rowspan i colspan.
La sintaxi és la següent :
<td colspan="number"> i <td rowspan="number"> on number representa el número de cel.les o files que ajuntem, respectivament i ha de ser com a mínim un enter superior a 2.
Suposem que volem una cel.la que ocupi quatre files:
<td rowspan="4">Exemple</td>
O una cel.la que ocupi quatre columnes:
<td colspan="4">Exemple </td>
Per exemple:
En aquest cas, ajuntem les dues files de la última col.lumna
<html>
<body>
<table border="2">
<tr>
<th>Mes</th>
<th>Despeses</th>
<th>Total</th>
</tr>
<tr>
<td>Novembre</td>
<td>100</td>
<td rowspan="2">180</td>
</tr>
<tr>
<td>Desembre</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Ara expendirem la primera fila.
<html>
<body>
<table border="2">
<tr>
<th colspan="3">Resum</th>
</tr>
<tr>
<td>Novembre</td>
<td>100</td>
<td rowspan="2">180</td>
</tr>
<tr>
<td>Desembre</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Ara modificarem la taula, de manera que farem un sumatori al final, ajuntant les dues columnes finals en una
<html>
<body>
<table border="2">
<tr>
<th>Mes</th>
<th>Despeses</th>
</tr>
<tr>
<td>Novembre</td>
<td align=right>100</td>
</tr>
<tr>
<td>Desembre</td>
<td align=right>80</td>
</tr>
<tr>
<td align=right colspan="2">Suma total: 180</td>
</tr>
</table>
</body>
</html>
Finalment un altre exemple on usem colspan i rowspan
<html>
<head>
<title>COLSPAN i ROWSPAN</title>
</head>
<body>
<table border=2>
<tr>
<td colspan=2 rowspan=2>colspan=2, rowspan=2. Ocupa dues files i dues col.lumnea</td>
<td>cel.la </td>
<td rowspan="2">rowspan=2. Ocupa dues files i una col.lumnes</td>
</tr>
<tr>
<td>cel.la 2</td>
</tr>
<tr>
<td>cel.la 3</td>
<td>cel.la 4</td>
<td>cel.la 5</td>
<td>cel.la 6</td>
</tr>
<tr>
<td colspan=2>colspan=2. Ocupa una fila i dos col.lumnes</td>
<td>cel.la 7</td>
<td>cel.la 8</td>
</tr>
</table>
</body>
</html>
Cap comentari:
Publica un comentari a l'entrada