Come inserire le tabelle

Aggiornamento 2020

In questa pagina vediamo come si inserisce una tabella in una pagina web.
Le tabelle non dovrebbero essere usate per strutturare il template del sito poichè il sito può non essere visto correttamente da altri dispositivi più piccoli come lo smartphone o il tablet.

Per mettere dei dati invece le tabelle vanno bene. Ecco il codice:


<table>
  <tr>
    <td>Nomi</td>
    <td>Età</td>
  </tr>
  <tr>
    <td>Elisa</td>
    <td>22</td>
  </tr>
  <tr>
    <td>James</td>
    <td>19</td>
  </tr>
</table>

Il <tr> definisce la riga di una tabella, il <td> definisce una cella all'interno di una riga.

Otteniamo:

Nomi Età

Elisa 22

James 19

Solo impostando con il CSS gli stili della tabella possiamo ottenere veramente la tabella rappresentata sopra. Basta aggiungere nel foglio di stile o nella pagina all'interno dei tag <HEAD> </HEAD> questo codice:


<style>
table  { 
    border-collapse:collapse
}
td, th { 
    border:1px solid #ddd;
    padding:5px;
}
</style>

Per specificare i bordi e lo spazio interno di una tabella bisogna usare il CSS in quanto gli altri attributi della tabella non sono più supportati nell'HTML5.

Costruire un sito in HTML

Come inserire le tabelle

Alcuni libri consigliati per imparare e approfondire i codici HTML