Vorera de taula
A les taules podem utilitzar voreres que englobin tota la taula. Per fer-ho, podem fer servir l'estil "border: 1px solid black;" (vorera d'un píxel d'amplada i color negre sòlid), dins l'etiqueta <table>.
<table style="border: 1px solid black;">
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</tbody>
</table>
| Visualitzat en el navegador |
Vorera de cel·la
Podem posar voreres a les cel·les. Per fer-ho, utilitzarem el mateix estil d'abans: "border: 1px solid black;", però aquesta vegada aplicat a cada cel·la, és a dir, a cada etiqueta <td>.
<table>
<tbody>
<tr>
<td></td>
<td style="border: 1px solid black;">T</td>
<td style="border: 1px solid black;">T</td>
</tr>
<tr>
<td style="border: 1px solid black;">A</td>
<td style="border: 1px solid black;">B</td>
<td style="border: 1px solid black;">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>
</tbody>
</table>
| Visualitzat en el navegador |
IMPORTANT: ens hem de fixar en el que passa quan deixam una fila sense estil de vorera. En aquest cas, no l'hem posat perquè la cel·la no té cap contingut.
Col·lapsar (unir) les voreres de les cel·les
Com deveu haver vist, en HTML hi ha un marge entre cel·la i cel·la. El podem evitar utilitzant l'estil "border-collapse: collapse;" dins l'etiqueta <table>.
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td></td>
<td style="border: 1px solid black;">T</td>
<td style="border: 1px solid black;">T</td>
</tr>
<tr>
<td style="border: 1px solid black;">A</td>
<td style="border: 1px solid black;">B</td>
<td style="border: 1px solid black;">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>
</tbody>
</table>
| Visualitzat en el navegador |
Marges dins les cel·les
Podem especificar el marge que volem deixar entre les voreres i el text. Per fer-ho, farem servir l'estil "padding: 20px;". Aquest estil es pot fer servir amb una sèrie de paràmetres:
— "padding: 20px;", amb aquest estil establirem un marge amb el text de 20 píxels a dalt, a la dreta, a baix i a l'esquerra
— "padding: 20px 30px;", amb aquest estil establirem un marge amb el text de 20 píxels a dalt i a baix, i de 30 píxels a la dreta i a l'esquerra
— "padding: 20px 30px 20px 40px;", amb aquest estil establirem un marge amb el text de 20 píxels a dalt, 30 píxels a la dreta, 20 píxels a baix i 40 a l'esquerra
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td style="border: 1px solid black; padding: 20px;">A</td>
<td style="border: 1px solid black;">B</td>
<td style="border: 1px solid black;">C</td>
</tr>
<tr>
<td style="border: 1px solid black;">D</td>
<td style="border: 1px solid black; padding: 20px 30px;">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; padding: 20px 30px 20px 40px;">I</td>
</tr>
</tbody>
</table>
| Visualitzat en el navegador |
IMPORTANT: el fet d'aplicar marges dins les cel·les, a més d'afectar les cel·les a les quals els aplicam (cel·les amb el text de color blau), afecta la resta de les cel·les contigües (verticalment i horitzontalment). Si us hi fixau, la cel·la que conté la lletra A té un marge de 20 píxels a tots els costats; això afecta l'alçària de tota la fila (B i C) i l'amplada de tota columna (D i G).
Marges de la taula
També podem establir un marge entre la taula sencera i els altres elements de la pàgina en HTML. Per fer-ho, farem servir l'estil "margin: 40px 80px;" dins l'etiqueta <table>. Els seus paràmetres funcionen igual que a l'estil padding.
<p>Paràgraf 1</p>
<table style="border-collapse: collapse; margin: 40px 80px;">
<tbody>
<tr>
<td style="border: 1px solid black;">A</td>
<td style="border: 1px solid black;">B</td>
<td style="border: 1px solid black;">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>
<p>Paràgraf 2</p>
| Visualitzat en el navegador |
Paràgraf 1
Paràgraf 2