Gli attributi delle tabelle

L'aspetto delle tabelle può essere modificato utilizzando alcuni attributi, così da adattarle alle esigenze del sito web.

Colspan e Rowspan

Questi due attributi permettono di creare una cella che occupa più righe o più colonne.

Colspan

L'attributo colspan=”valore” viene utilizzato per creare una cella che occupa più colonne. Creiamo, per esempio, una tabella con 2 righe e 3 colonne (<td>). Al posto di valore inseriamo il numero di colonne che la cella 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 utilizzato per creare una cella che occupa più righe. Nella tabella dell'esempio precedente possiamo creare una cella che occupi sia la prima sia 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 o tra le celle stesse si utilizzano alcune proprietà CSS.

Padding

La proprietà CSS padding:valore viene utilizzata 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>

La proprietà padding verrà approfondita nel corso dedicato al CSS.

Border-spacing

La proprietà CSS border-spacing:valore viene utilizzata per inserire spazio tra i bordi delle celle della tabella.

<table border="1" style="border-spacing:20px">
  <tr>
    <td> Cella 1 </td>
    <td> Cella 2 </td>
  </tr>
</table>