L’aspetto delle tabelle, per adattarsi alle esigenze di un sito web, può cambiare inserendo alcuni attributi.
Colspan e Rowspan
Questi due attributi si utilizzano per creare una cella che occupi più righe o più colonne.
Colspan
L’attributo colspan=”valore” viene usato per creare una cella che occupa più colonne. Creiamo per esempio una tabella con 2 righe e 3 colonne (<td>). In valore inseriamo quante colonne deve occupare.
<table border="1">
<tr>
<td> Cella 1 </td>
<td> Cella 2 </td>
<td> Cella 3 </td>
</tr>
<tr>
<td colspan="2"> Cella che occupa 2 colonne </td>
<td> Cella </td>
</tr>
</table>
Rowspan
L’attributo rowspan=”valore” viene usato per creare una cella che occupa più righe. Nella tabella dell’esempio di prima, possiamo creare una cella che occupi la prima e la seconda riga.
<table border="1">
<tr>
<td rowspan="2"> Cella che occupa 2 righe </td>
<td> Cella 1 </td>
<td> Cella 2 </td>
<td> Cella 3 </td>
</tr>
<tr>
<td> Cella 1 </td>
<td> Cella 2 </td>
<td> Cella 3 </td>
</tr>
</table>
Padding e spazio tra le celle
Per creare spazio all’interno delle celle, si utilizzano alcuni attributi.
Padding
Lo stile padding viene utilizzato per inserire spazio all’interno della cella, tra il contenuto e i bordi.
<table border="1">
<tr>
<td style="padding:5px"> Cella 1 </td>
<td> Cella 2 </td>
</tr>
</table>
L’attributo padding potrai trovarlo in modo più specifico nel corso CSS.
Border-spacing
Lo stile border-spacing viene utilizzato per inserire spazio tra i bordi della tabella e i bordi della cella.
<table border="1" style="border-spacing:20px">
<tr>
<td> Cella 1 </td>
<td> Cella 2 </td>
</tr>
</table>
| Prossima lezione |