12.4. Tamany de la taula i de les cel·les

A les taules es pot fixar la mida horitzontal de la taula. Per definir-la, farem servir l'estil "width: 80%;" (el paràmetre 80% configura la taula perquè ocupi el 80 % de la finestra del navegador, en horitzontal). Aquest estil s'ha de consignar a l'etiqueta <table>.

Igualment podem establir la mida horitzontal de les cel·les (que mai no hauria de superar la mida horitzontal de la taula). Per establir aquesta mida, igual que en el paràgraf anterior, es fa servir l'estil width i s'especifica amb un percentatge, però aquesta vegada no es relacionarà amb la mida de la finestra del navegador, sinó amb la mida de la taula. La suma de les mides de les cel·les ha de ser 100 %, el total de la taula. Aquest estil s'ha de consignar a l'etiqueta <td>.

<table style="border-collapse: collapse; width: 80%;">
<tbody>
<tr>
<td style="border: 1px solid black; width: 20%;">A</td>
<td style="border: 1px solid black; width: 30%;">B</td>
<td style="border: 1px solid black; width: 50%;">C</td>
</tr>
<tr>
<td style="border: 1px solid black;">D</td>
<td style="border: 1px solid black;">E</td>
<td style="border: 1px solid black;">F</td>
</tr>
<tr>
<td style="border: 1px solid black;">G</td>
<td style="border: 1px solid black;">H</td>
<td style="border: 1px solid black;">I</td>
</tr>
</tbody>
</table>

IMPORTANT: fixau-vos que només és necessari implementar les mides a la primera fila, ja que, automàticament, afecten totes les altres.