Aloitetaan keskustelemalla taulukoista. Tarkastelemme erityisesti seuraavaa tekstin jäsentelyä:

Taulukot

HTML-taulukoita käytetään tietojen esittämiseen riveinä ja sarakkeina, mikä tarjoaa jäsennellyn tavan järjestää tietoa.

Taulukoiden luominen

<table>-tagia käytetään taulukon luomiseen HTML:ssä. Taulukot koostuvat riveistä (<tr>) ja soluista (<td>), jotka määrittävät taulukon rakenteen ja sisällön. Perusrakenne taulukolle on seuraava.
Esimerkki:

Yllä olevassa esimerkissä:

• <table>-tagia käytetään taulukon luomiseen;
• Jokainen <tr>-tagi edustaa taulukon riviä;
• Jokaisen rivin sisällä <td>-tagit edustavat soluja ja määrittävät kunkin solun sisällön.

Vaikka taulukoiden käsittely voitaisiin lopettaa tähän, niiden semantiikkaa voidaan parantaa, jotta hakukoneiden on helpompi ymmärtää niiden sisältöä.

Taulukon otsikot

<th>-elementti määrittää taulukon otsikot, jotka edustavat sarake- tai riviotsikoita. Sitä tulisi käyttää taulukon <thead>-osiossa.
Esimerkki:

Yllä olevassa esimerkissä:

• <thead>-osio sisältää taulukon otsikkosolut, jotka on määritetty <th>-elementillä;
• Jokainen <th>-elementti edustaa otsikkosolua.

Taulun runko

tbody-osio tulee sijoittaa thead-osion jälkeen ja sen tulee sisältää kaikki taulun tiedot otsikoita lukuun ottamatta. Kaikki tbody-osion sisällä olevat elementit pysyvät ennallaan.
Esimerkki:

Yhteenveto

Taulukot rakentuvat elementtien hierarkiasta:

1. Taulukko

<table>-elementti on pääelementti, joka määrittää koko taulukon. Se sisältää kaikki taulukon rivit ja sarakkeet.

<table></table>

2. Taulukon otsikko

<thead>-elementtiä käytetään taulukon otsikkorivien ryhmittelyyn. Se sisältää yhden tai useamman rivin (<tr>) otsikkosoluja (<th>), jotka määrittävät sarakeotsikot.

<table>
  <thead></thead>
</table>

3. Taulukon runko

<tbody>-elementtiä käytetään taulukon varsinaisten tietorivien ryhmittelyyn. Se sisältää yhden tai useamman rivin (<tr>) tietosoluja (<td>), jotka muodostavat taulukon pääsisällön.

<table>
  <thead></thead>
  <tbody></tbody>
</table>

4. Taulukkorivit

<tr>-elementti edustaa yhtä riviä taulukossa. Se sisältää yhden tai useamman taulukkosolun (<td> tai <th>), jotka määrittävät kunkin sarakkeen sisällön rivillä.

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

5. Taulukon solut

<td>-elementti edustaa tavallista tietosolua taulukon rungossa. <th>-elementti edustaa otsikkosolua taulukon otsikossa. Jokainen solu sisältää taulukon varsinaisen sisällön, kuten tekstiä, kuvia tai muita HTML-elementtejä.

<table>
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text 1</td>
      <td>Text 2</td>
    </tr>
    <tr>
      <td>Text 3</td>
      <td>Text 4</td>
    </tr>
  </tbody>
</table>

Videotutoriaali