Hai mai dovuto formattare contenuti sotto forma di tabelle?

Sì, è successo.

Le tabelle vengono utilizzate per rappresentare dati strutturati. È importante rispettare la semantica HTML usando i tag <table>, <thead>, <tbody>, <tr>, <th>, <td>.

Esempio di struttura di base di una tabella:

<table>
  <thead>
    <tr>
      <th>Intestazione 1</th>
      <th>Intestazione 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dati 1.1</td>
      <td>Dati 1.2</td>
    </tr>
    <tr>
      <td>Dati 2.1</td>
      <td>Dati 2.2</td>
    </tr>
  </tbody>
</table>

Per lo stile si usa CSS. È importante rendere le tabelle responsive, poiché possono occupare molto spazio. Approcci comuni includono:

• Usare overflow-x: auto su un contenitore per lo scorrimento orizzontale.
• Trasformare la tabella in una lista o in schede su schermi piccoli usando media queries e CSS Grid/Flexbox.
• Aggiungere attributi data-* alle celle per mostrare le intestazioni delle colonne sui dispositivi mobili.

Problemi che possono sorgere:

• Difficoltà ad adattare tabelle larghe a schermi piccoli.
• Necessità di garantire l’accessibilità per utenti con disabilità (ad esempio, usando gli attributi scope su <th>).
• Difficoltà nel creare layout non standard con celle unite (rowspan, colspan).

Durante lo sviluppo, ricorda che le tabelle non sono strumenti per il layout generale della pagina, ma per mostrare dati tabulari.