Tietoa taulukoihin

Sisällys

• Perusesimerkki taulukosta
• Määritteitä taulukoille
• Taulukoita kuvakokoelmille ja kuville
• "Taulukoilla taittaminen"

Katso myös lukua Vaativampia taulukoita.

Taulukoiden käyttö Web-dokumenteissa ei suinkaan aina ole tarpeellista. Luonnollista se on silloin, kun jokin aineisto on loogiselta rakenteeltaan kaksiulotteista.

Perusesimerkki taulukosta

Seuraavassa on yksinkertainen esimerkki taulukosta, joka esittää Suomen kuuden suurimman kaupungin asukasluvut vuoden 1998 lopussa:

<table border="1">
<tr><th>Helsinki</th> <td>546 317</td></tr>
<tr><th>Espoo</th> <td>204 962</td></tr>
<tr><th>Tampere</th> <td>191 254</td></tr>
<tr><th>Vantaa</th> <td>173 860</td></tr>
<tr><th>Turku</th> <td>170 931</td></tr>
<tr><th>Oulu</th> <td>115 493</td></tr>
</table>

Tietolähde: Kuntaliiton tilasto Kunnat suuruusjärjestyksessä asukasluvun mukaan 31.12.1998.

HTML-merkkauksessa rakenne koostuu table-elementistä, jonka sisällä on muutamia tr-elementtejä, joista kukin muodostaa taulukon yhden rivin (table row). Rivi puolestaan koostuu alkioista eli soluista, jotka voivat olla otsikkosoluja (th, table header cell) tai datasoluja (td, table data cell). Määrite border="1" aiheuttaa reunukset ("laatikot"), jotka yleensä tekevät taulukon rakenteen helpommin havaittavaksi.

Taulukko näyttää selaimellasi seuraavalta:

Tässä esimerkissä kaksiulotteisuus on vain sitä, että lukujen listan (yksiulotteinen rakenne) lisäksi meillä on sen kanssa rinnakkainen kaupunkien nimien lista. Laajempaa kaksiulotteisuutta saataisiin, jos ilmoitettaisiin lisäksi asukasluvut muina vuosina.

Yleisesti sanottuna taulukko on jono rivejä, joista kukin on puolestaan jono soluja (taulukon alkioita) siten, että riveillä on keskenään sama sisäinen rakenne. Tämä merkitsee, että rivien ensimmäiset solut jossakin mielessä vastaavat toisiaan, muodostaen taulukon ensimmäisen sarakkeen (column), toiset solut muodostavat toisen sarakkeen jne. Tavanomainen tapa esittää taulukko näkyvässä muodossa on vain tämän loogisen rakenteen esitystapa.

Määritteitä taulukoille

HTML:n taulukkokäsite on suhteellisen alkeellinen. Niinpä ei voida rakenteisella tavalla kertoa esimerkiksi sitä, että jokin sarake sisältää desimaalilukuja (jolloin tekstit pitäisi tasata desimaalipilkun tai -pisteen kohdalta) tai että solun sisältö on tekstiä (jolloin on hyvä jättää ainakin noin puolen kirjaimen levyiset reunukset joka suuntaan).

Niinpä taulukoille usein onkin aiheellista kirjoittaa ulkoasuun vaikuttavia määritteitä, vaikka niitä muutoin tulee välttää HTML:ssä. Näitä ovat seuraavat:

Edellä esitetty yksinkertainen esimerkkitaulukko näyttäisi seuraavalta, jos lisäämme table-tägiin määritteen cellpadding="6" sekä kuhunkin th-alkioon määritteen align="left":

Esimerkistä ilmenee, että cellpadding-määrite vaikuttaa joka suunnassa eli solun sisällön ylä- ja alapuolelle, vasemmalle ja oikealle. Joustavampia ulkoasuun vaikuttamisen keinoja tarjoavat tyylisäännöstöt.

Jos numeerista tietoa sisältävän sarakkeen luvut sisältävät eri määrän numeroita, saataisiin esitysmuoto paremmaksi käyttämällä kyseisille soluille määritettä align="right". Lisäksi saattaa auttaa, jos luvuille käytetään tasalevyistä fonttia, joka saadaan aikaan kirjoittamalla ne tt-elementtien sisään. Tämä on kuitenkin sen verran työlästä ja tylsää, että tyylisäännöstöjen käyttö on yleensä parempi ratkaisu, ellei sitten tuoteta tarvittavaa HTML-merkkausta jollain työkaluohjelmalla. Tästä ja muusta taulukoihin liittyvästä lisää kohdassa Vaativampia taulukoita.

Taulukoita kuvakokoelmille ja kuville

Taulukoita voidaan käyttää myös kuvakokoelmien esittämiseen. Etenkin silloin, kun kuvat ovat pienehköjä ja niihin halutaan liittää kuvatekstit, voidaan menetellä seuraavasti: kirjoitetaan taulukko, jossa

• ensimmäinen rivi sisältää kuvia (img-elementit)
• toinen rivi sisältää vastaavat kuvatekstit
• huolehditaan siitä, että kunkin rivin kuvien yhteenlaskettu leveys on mieluiten selvästi alle 500 kuvapistettä, jotta sivu mahtuisi kapeahkoonkin ikkunaan
• kirjoitetaan tarvittaessa lisää rivejä samaan tapaan, jos kuvia on enemmän.

Edellä mainittu Lintukuvia-sivu muodostaa esimerkin tästäkin.

Yksinkertaisempi tapaus on sellainen, jossa halutaan allekkain yksi kuva ja sen kuvateksti. Tätä varten ei ole sopivaa elementtiä, mutta käytännössä kohtuulliseen tulokseen päästään käyttämällä yksinkertaista taulukkoa seuraavaan tapaan:

<table border="0" align="center">
<tr><td>
  <a href="barbi.gif" title="Leväbarbin kuva isommassa koossa">
    <img alt="[Leväbarbin kuva]" src="barbi0.gif"
    width="300" height="151">
  </a>
</td></tr>
<tr><th>
  Leväbarbi <i lang="la">(Crossocheilus siamensis)</i>
</th></tr>
<tr><td align="center">
  <small>Piirros: <a href=
  "http://www.hut.fi/u/lsarakon/">Liisa Sarakontu</a>.
  </small>
</td></tr>
</table>

Kokonaisuus on hiukan mutkikkaan näköinen, mutta taulukkorakenne sinänsä on yksinkertainen: kolme riviä, kullakin yksi alkio, nimittäin kuva, kuvateksti ja pienellä oleva tieto kuvan tekijästä. Tämä voi näyttää esimerkiksi seuraavalta:

Leväbarbi (Crossocheilus siamensis)
Piirros: Liisa Sarakontu.

Kuvan ympärillä todennäköisesti näkyy reunus (kehikko), koska tämä on tyypillisten selainten tapa osoittaa, että kuva on linkki. Jos kuvagalleriasivulla selvästi sanotaan, että kaikki kuvat ovat linkkejä, voi harkita näiden reunusten poistoa (img-elementtiin border="0").

Valitettavasti ei ole mahdollista kirjoittaa rakennetta, jossa olisi kuvia ja niihin liittyviä kuvatekstejä siten, että selain näyttää niitä rinnakkain aina sen verran kuin selaimen ikkunaan vaakasuunnassa mahtuu. Edellä kuvattu menettely on siis lähinnä pakon sanelemaa "taittoa", joka aiheuttaa omat ongelmansa (esim. leveässä ikkunassa tilaa tuhlaantuu). Lähes aina "taitto" HTML:ssä aiheuttaa enemmän ongelmia kuin ratkaisee, mutta joitakin poikkeuksia siis on.

Jos kyse olisi pelkästään kuvista, voisimme menetellä niin, että kirjoitamme vain img-elementtejä peräkkäin. Silloin selain näyttäisi niitä rinnakkain sen verran kun mahtuu. Vastaava koskee sanoja (tai muita lyhyitä ilmaisuja) esimerkiksi valikoissa: jos kirjoitat sanoja peräkkäin välilyönneillä erotettuina, selain jakaa ilmaisun eri riveille. Jäljempänä tarkastellaan vielä yhtä temppua, "näennäistaulukkoa".

"Taulukoilla taittaminen"

Taulukoita voi käyttää monenlaisiin asioihin; asiaan palataan kohdassa Vaativampia taulukoita. Tässä esityksessä korostetaan kuitenkin sitä, että taulukoita ei pidä käyttää vain ulkoasun tyylittelyyn eikä matkien erilaisia tavallisia ratkaisuja.

Edes W3C:n pääsivu ei kelpaa esimerkiksi tässä suhteessa! Kokeilepa katsoa sitä esim. 400 pikselin levyisessä ikkunassa. On ahdettu liikaa asiaa yhdelle sivulle ja sitten yritetty vielä ahtaa se liian tiiviisti. Quis custodiet ipsos custodes?

Varsin yleisesti taulukoita käytetään "taittamiseen" eli sommitteluun (layout), esimerkiksi sanomalehden ladontaa muistuttavalla tavalla: erilaisia aineksia asemoidaan sivun määrättyihin kohtiin ilman, että tällä on mitään tekemistä aineiston loogisen rakenteen kanssa. Tämä yleisesti epäonnistuu rajoittaen sivujen toimivuutta ja osoittaa, ettei ymmärretä painojulkaisujen ja Webin eroja eikä yleisemmin Web-julkaisemisen luonnetta.

Käytännön tasolla "taittamisen" haitallisuuden näkee yleensä yksinkertaisesti katsomalla sivua erilevyisissä ikkunoissa. Tyypillisessä graafisessa selaimessa voit muuttaa ikkunan leveyttä hyvin helposti: vie hiirellä kursori ikkunan oikean reunaviivan päälle, jolloin kursori muuttuu erinäköiseksi; paina hiiren vasen nappi alas ja sitä alhaalla pitäen liikuta hiirtä vaakasuunnassa; kun päästät napin ylös, sivun leveys asettuu kursorin paikan mukaiseksi.

Esim. 300 pikseliä ei ole mitenkään äärimmäisyys mutta tyypillisesti romahduttaa "taitetun" sivun täysin. Tässä käytetyssä esimerkissä (kuva oikealla) sentään pelastaa jotain se, että vasemmalla on tekstilinkkejä, vaikka ne onkin onnistuttu tekemään lähes lukukelvottomiksi (yrittämällä asettaa fonttikoko niin pieneksi kuin mahdollista). Lukija saa kuitenkin ehkä niistä linkeistä edes jotain tuntumaa siihen, millaisella sivulla ollaan. Pahempaa jälkeä tulee esim. MTV3:n sivuilla, koska vasen osa on täytetty mainoksilla!

Silloin, kun halutaan tuottaa todella taitettua aineistoa, on parasta käyttää siihen soveltuvia kieliä ja välineitä kuten TeX, Adobe Acrobat, PageMaker ja PostScript. Jopa tavanomaiset tekstinkäsittelyohjelmat kuten MS Word ja WordPerfect sopivat paremmin taittamiseen kuin HTML. Tietenkin HTML-muotoinen aineisto on laajemmin ja laiteriippumattomammin luettavissa kuin edellä mainituilla välineillä tehty; ja tämä on osa sitä asiaa, että HTML-dokumentit eivät ole valmiiksi "taitettuja".

Lisää perusteluja sille, miksi "taulukoilla taittaminen" on huono ajatus, löytyy seuraavista jutuista:

• Tables kokoelmassa Dan's Web Tips
• Setting the Table - Page Layout Using Tables, Stephanos Piperogloun oppaassa Trials and Tabulations
• Introduction to tables virallisessa HTML-spesifikaatiossa; se selostaa erityisesti:

  Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.