Costruire un sito in HTML

Guida Topmanga

Come inserire le tabelle



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.