Kas teil on kunagi olnud vaja vormindada sisu…

Jah, ma olen selliste olukordadega kokku puutunud.

Tabelid kasutatakse struktureeritud andmete esitamiseks. Oluline on järgida HTML semantikat, kasutades <table>, <thead>, <tbody>, <tr>, <th>, <td> sätteid.

Põhistruktuuri näide:

<table>
  <thead>
    <tr>
      <th>Pealkiri 1</th>
      <th>Pealkiri 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Andmed 1.1</td>
      <td>Andmed 1.2</td>
    </tr>
    <tr>
      <td>Andmed 2.1</td>
      <td>Andmed 2.2</td>
    </tr>
  </tbody>
</table>

Stiili rakendamiseks kasutatakse CSS-i. Oluline on tagada, et tabelid oleksid reageerivad, kuna need võivad võtta palju ruumi. Levinud lähenemised:

Kasutada overflow-x: auto konteineris horisontaalse kerimise jaoks.
Muuta tabel väikeste ekraanide puhul loendiks või kaartideks, kasutades media queries ja CSS Grid/Flexbox.
Lisada data-* atribuute lahtritele, et mobiilseadmetes kuvatakse veerupäised.

Võimalikud probleemid:

Laiade tabelite kohandamine väikestele ekraanidele.
Juurdepääsetavuse tagamine kasutajatele piirangutega (näiteks scope atribuudi kasutamine <th>-le).
Mitte-standardsed paigutused, mis hõlmavad ühendatud lahtrid (rowspan, colspan).

Arendades pidage meeles, et tabelid ei ole üldise lehe paigutuse tööriistad, vaid tabelandmete kuvamise vahendid.

Kas teil on kunagi olnud vaja vormindada sisu tabelina?