Tiedot taulukkoon

Taulukolla voimme helposti esittää taulukkomuodossa olevia tietoja. Taulukolla ei kannata "taittaa" HTML-sivua, koska se aiheuttaa esteitä joillekin sivujen lukijoille. Esimerkiksi useimmat ääni- ja tekstiselaimia käyttävät eivät näe sivun graafista ulkoasua, joten taulukkotaitettu sisältö voi olla vaikeasti hahmotettavissa. Myöskään taulukkomuotoisia tietoja ei kannata laittaa muiden elementtien sisään.

Esimerkissä on tehty kolmerivinen ja kaksisarakkeinen taulukko. Taulukon yläpuolella on määritelty koko taulukkoon liittyvä otsikko. Taulukon ensimmäisellä rivillä on taulukon sarakeotsikot, joiden alapuolisilla riveillä ovat taulukon sisällöt. Esimerkin alapuolelta löytyy tarkemmat selitykset esimerkin eri kohtiin. Oletuksena joissakin selaimissa taulukoihin ei lisätä ollenkaan reunoja. Esimerkkiin on lisätty reunat CSS:n avulla esimerkin saamiseksi havainnollisemmaksi. Muut taulukon osat ovat muotoilemattomia.

Kuva 16. Taulukon käyttöesimerkki.

<table summary="Kaksisarakkeinen ja kolmerivinen esimerkkitaulukko">
<caption>Koko taulukon otsikko</caption>
<tr>
  <th>Eka sarakkeen otsikko</th>    <th> Toka sarakkeen otsikko</th>
</tr>
<tr>
  <td>Eka sarakkeen ylin rivi</td>  <td>Toka sarakkeen ylin rivi</td>
</tr>
<tr>
  <td>Eka sarakkeen alin rivi</td>	<td>Toka sarakkeen alin rivi</td>
</tr>
</table>

• table-elementillä määrittelemme taulukon alku- ja loppukohdan. Kaikki taulukon sisään tulevat asiat, kuten otsikot, otsikkorivit, rivit ja solut merkitsemme table-elementin sisälle.
• summary-attribuutti (table-aloituselementin sisällä) sisältää sanallisen kuvauksen taulukon sisällöstä ja mahdollisesti myös muodosta. Tekstin on erityisen hyödyllinen esimerkiksi ääniselaimen käyttäjille. Tekstin perusteella he voivat tehdä päätöksen taulukon ohittamisesta tai saavat taulukon ymmärtämistä helpottavia vihjeitä.
• caption-elementillä määrittelemme koko taulukkoon liittyvän otsikon. Jos liitämme taulukkoon otsikon, niin caption-elementin on sijaittava heti aloittavan table-elementin jälkeen.
• tr-elementtillä määrittelemme taulukon rivin. Esimerkin määrittelyistä kannattaa huomata, että taulukon sarakkeet (itseasiassa solut) määritellään jokaisen rivin sisään. Myös otsikkosolut tulevat tavallisen taulukkorivin (tr-elementti) sisään.
• th-elementillä määrittelemme taulukkon otsikkosolut. Taulukon otsikkosolut sijaitsevat yleensä taulukon yläosassa tai taulukon vasemmassa reunassa. Otsikkosolujen sisälle (aloitus- ja lopetuselementin väliin) tulevat rivien tai sarakkeiden otsikkotekstit. Oletuksena selaimet muotoilevat otsikkosolut hieman tavallisista soluista eroavasti.
• td-elementillä määritelemme taulukon yksittäiset solut. Taulukon varsinainen sisältö kirjoitetaan td-elementtien sisään.

Voimme tarvittaessa myös yhdistää taulukon sarakkeita ja rivejä. Yhdistäminen onnistuu colspan ja rowspan-attribuuttien avulla.

• rowspan-attribuutilla määrittelemme kuinka monen rivin alueelle kyseinen solu laajenee. 0 tarkoittaa, että solu laajenee kaikkien rivien suuruiseksi.
• colspan-attribuutilla määrittelemme kuinka monen sarakkeen alueelle kyseinen solu laajenee. 0 tarkoittaa, että solu laajenee kaikkien sarakkeiden suuruiseksi.

Seuraavassa esimerkkissä taulukon vasemman puoleisen sarakkeen kaksi viimeistä riviä on yhdistetty yhdeksi soluksi. Tällöin kahdelle alimmaiselle riville (tr-elementti) ei ole määritelty kuin yhdet td-elementit, jotka toimivat oikean puoleisen sarakkeen soluina. Vastaavasti taulukon otsikkorivin jälkeen on ensimmäisen rivin kaksi sarakketta yhdistetty yhdeksi soluksi. Tällöin kyseiselle riville ei ole määritelty kuin yksi td-elementti.

<table summary="Taulukon koosteteksti">
<caption>Koko taulukon otsikko</caption>
<tr>
  <th>Eka sarakkeen otsikko</th>  <th> Toka sarakkeen otsikko</th>
</tr>
<tr>
  <td colspan="2">Kahden sarakkeen ja yhden rivin solu</td>
</tr>
<tr>
  <td rowspan="3">Yhden sarakkeen ja kolme rivin solu</td>
  <td>Toka sarakkeen toinen</td>
</tr>
<tr>
  <td>Toka sarakkeen kolmas</td>
</tr>
<tr>
  <td>Toka sarakkeen </td>
</tr>
</table>

Kuva 17. Taulukon rivien ja sarakkeiden yhdistäminen.