HTMLtaulukoita

HTMLtaulukoita ovat web-sivujen datataulukoiden esittämiseen tarkoitettuja rakenteita HTML:ssä. Niiden perusrakenteeseen kuuluu table-elementti sekä siihen liittyvät thead, tbody ja tfoot sekä rivit (tr) ja solut (th ja td). Taulukot esittävät tietoa riveittäin ja sarakkeittain, jolloin lukijat ja tekniset apuvälineet voivat lukea ja verrata dataa järkevällä tavalla.

Taulukon semantiikka perustuu otsikkosoluihin ja ryhmitykseen. Thead sisältää yleensä otsikkorivit, tbody varsinaisen datan ja tfoot mahdollisen yhteenveto- tai kustannustiedon. Th-solut muodostavat otsikot; niihin voidaan lisätä scope-attribuutti (scope="col" tai scope="row") helpottamaan saavutettavuutta. Taulukon caption-elementti antaa yleisen kuvauksen siitä, mitä taulukko esittää.

Käyttö ja saavutettavuus. HTML-taulukot tulisi käyttää ensisijaisesti dataesitykseen, ei sivun asetteluun. Saavutettavuutta parannetaan käyttämällä otsikkosoluja, captionia ja tarvittaessa aria-label- tai aria-describedby-attribuutteja. Varmista, että taulukon sisältö on loogisessa järjestyksessä ja että sitä voidaan käyttää näppäimistöllä.

Rakenne ja muotoilu. Colgroup ja col mahdollistavat sarakkeiden tyylin ja leveyden hallinnan. colspan- ja rowspan-attribuutit mahdollistavat solujen yhdistämisen. Taulukon ulkoas voidaan hallita CSS:llä nopeasti ja eriyttäväksi, jolloin HTML pysyy semanttisena.

Esimerkki. <table><thead><tr><th>Nimi</th><th>Ikä</th></tr></thead><tbody><tr><td>Matti</td><td>30</td></tr><tr><td>Liisa</td><td>25</td></tr></tbody></table>

HTML-taulukot ovat keskeinen keino jäsentää dataa, mutta niitä pitäisi käyttää vain siihen tarkoitukseen ja huomioida saavutettavuus sekä responsiivisuus.