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 |
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 |
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).
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