Web-julkaisemisen opas, luku 1 Jambalaya: Miten teen Web-sivun:

Tietoa taulukoihin

Sisällys

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:

Helsinki 546 317
Espoo 204 962
Tampere 191 254
Vantaa 173 860
Turku 170 931
Oulu 115 493

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:

määrite missä elementissä merkitys
border=n table kunkin solun sekä koko taulukon ympärille tulevan reunaviivan leveys kuvapisteinä eli pikseleinä (pixels)
cellpadding=n table kunkin solun sisällön ja solun reunaviivan väliin tulevan tyhjän tilan (padding) leveys pikseleinä; oletusarvo yleensä pienehkö luku, tekstiä sisältäville taulukoille voi esim. cellpadding="6" olla sopivampi
cellspacing=n table eri solujen väliin tulevan tyhjän tilan (spacing) leveys pikseleinä; oletusarvo yleensä pienehkö luku; cellspacing="0" saa vierekkäisten solujen reunaviivat yhtymään
align=tasaustapa tr, th tai td solun sisällön tasaus, "alignointi"; tasaustapa voi olla center (keskitys solun sisällä; tämä on oletusarvo otsikkosoluille, th), left (tasaus solun vasempaan reunaan; tämä on oletusarvo normaaleille soluille, td) tai right (tasaus solun oikeaan reunaan).

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":

Helsinki 546 317
Espoo 204 962
Tampere 191 254
Vantaa 173 860
Turku 170 931
Oulu 115 493

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

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äbarbin kuva]
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?

Esimerkiksi sivusta http://www.uiah.fi/ ei saa käytännössä mitään selvää, jos selaimen leveys on reilut 300 pikseliä. Sivun pääotsikostakaan ei näy kuin "Taide") 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: