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.

Kolmerivinen ja kaksisarakkeinen taulukko, jonka yläpuolella on taulukon otsikko.

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>

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

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>
Kaksisarakkeisesta ja viisirivisestä taulukosta on yhdistetty kaikki toisen rivin solut ja kolme alinta vasemman laidan solua.

Kuva 17. Taulukon rivien ja sarakkeiden yhdistäminen.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/tyovaline/wwwsivu/index14.html
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2003-11-10 10:21:28
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto