HTML5

Una tabella HTML può essere utilizzata per organizzare i dati in righe e colonne. Per default una tabella HTML5 non ha bordi visibili tra le celle, l'allineamento del testo dell'intestazione è al centro, mentre quello del corpo è a sinistra. Il risultato è piuttosto brutto:

La struttura di una tabella HTML include elementi racchiusi tra i tag <table> e </table>, come in questo esempio:

      <table>
        <caption>
          Titolo della tabella
        </caption>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
      </table>

All'interno di una tabella, ogni riga è definita dal tag <tr>, mentre le celle di intestazione e di dati sono definite rispettivamente dai tag <th> e <td>. Oltre a questi, esistono altri tag HTML che possono essere utilizzati per strutturare meglio le tabelle:

• <caption> definisce il titolo della tabella
• <colgroup> raggruppa una o più colonne per applicare stili comuni
• <col> definisce una colonna all'interno di un gruppo di colonne
• <thead> raggruppa il contenuto dell'intestazione della tabella
• <tbody> raggruppa il contenuto del corpo della tabella
• <tfoot> raggruppa il contenuto del piè di pagina della tabella

Modificatori CSS

Per migliorare l'aspetto di una tabella, è possibile utilizzare gli stili CSS. Ad esempio, il seguente codice CSS aggiunge bordi alle celle della tabella, allinea il testo a sinistra e aggiunge un po' di padding per migliorare la leggibilità: