Web-julkaisemisen opas, luku 2 Reseptit: Miten luon Web-sivujen kokonaisuuden, ja muuta vaativampaa:

Vaativampia taulukoita

Luvussa Tietoa taulukoihin kuvattiin HTML-taulukoiden käytön perusteet. Tässä luvussa käsitellään eräitä vaativampia erityisaiheita kuten taulukoiden ohjelmallista tuottamista sekä ulkoasun "virittelyä".

Sisällys

Taulukot ja luettelot

Usein asian voi esittää luettelona (luetelmana) tai taulukkona. Esimerkiksi kirjallisuusluettelon voisi esittää ul- tai ol-elementtinä, jossa kukin alkio sisältää tiedot yhdestä kirjasta (tai artikkelista tms.) tai sitten taulukkona. Jälkimmäisessä tapauksessa kukin taulukon rivi (tr-elementti) sisältäisi tiedot yhdestä kirjasta, ja sarakejako voisi olla esimerkiksi sellainen, että 1. sarake sisältää viittauksen numeron tai muun koodin, 2. sarake kirjoittajan nimen, 3. sarake teoksen nimen jne. Tällainen rakenne olisi huomattavan selkeä mutta jonkin verran työläs kirjoittaa, ja ennen kaikkea se poikkeaisi perinteestä; lisäksi ulkoasun saaminen hyväksi olisi vaativaa.

Periaatteellisesti voidaan sanoa, että jos luettelon kaikilla kohdilla on sama sisäinen rakenne, se olisi loogisempaa kirjoittaa taulukoksi. Edellä oleva esimerkki osoittaa, ettei se aina ole käytännössä tarkoituksenmukaista. Mutta otetaanpa tyypillinen esimerkki kuvitteellisesta budjettiehdotuksesta, jossa on seuraavanlainen lista

Hilavitkutinjärjestelmien kehittämiseen

Tämä olisi esitysmuodoltaan ehkä napakampi ja muutenkin parempi taulukkona, josta eri kohtien yhtenäinen rakenne (ja poikkeukset siitä!) tulevat paremmin esille:

Hilavitkutinjärjestelmien kehittämiseen
laitteeet 3 000 000 euroa tammikuussa
ohjelmistot 300 000 euroa joulukuussa
käyttökoulutus 3 000 euroa heinäkuussa
käsikirjat 1 000 euroa  

Esimerkkitaulukossa on lukuja sisältävän sarakkeen tasaus oikealle hoidettu hiukan näppärämmin kuin aiemmassa esimerkissä, nimittäin kirjoittamalla table-tägin perään seuraavat elementit:

<col>
<col class="numeric">
<col>

ja liittämällä tyylisäännöstöön sääntö

.numeric
  { font-family : Courier, monospace;
    text-align : right; }

Sääntö kehottaa selainta esittämään jokaisen sellaisen elementin, jossa on määrite class="numeric", Courier-fontilla tai jollakin muulla tasalevyisellä fontilla ja oikeaan reunaan tasattuna (siinä tilassa, jonka selain on varannut elementille, esim. taulukon alkiolle). Tällöin ei itse td-elementteihin tarvitse lisätä mitään ulkoasuun liittyviä asioita, vaan ne ovat yksinkertaisesti muotoa <td>sisältö</td>. Tämän tyylikkyyden hinta on sitten se, että toistaiseksi menetelmä toimii vain IE:ssä versiosta 4 alkaen. Esim. Netscapessa esitysasu on huonompi (mutta luettavissa).

Toisena teknisenä yksityiskohtana mainittakoon, että erinäisistä syistä tyhjä alkio on yleensä parasta esittää muodossa <td>&nbsp;</td>. Toisaalta tyhjiä alkioita kannattaa välttää. Yleensä löytyy jokin parempi tapa esittää taulukossa tiedon puuttuminen. Esimerkkitapaukseemme sopisi kysymysmerkki (?).

Taulukoiden tuottaminen

Vaikka HTML:n taulukkorakenne on melko yksinkertainen, on isohkon taulukon HTML-merkkauksen kirjoittaminen "käsin" melko työlästä. Niin varsinkin valmiiksi jossain taulukkomuodossa olevan aineiston muuntaminen HTML-muotoon kannattaa yleensä tehdä jollakin työkalulla, vaikkapa editorin makroilla tai pienellä Perl-ohjelmalla.

Esimerkiksi yksinkertainen Excel-taulukko voidaan muuntaa HTML-muotoon seuraavasti (olettaen, että meillä on taulukko aluksi erillisenä Excel-tiedostona):

  1. Avaa taulukon sisältävä tiedosto Excelissä.
  2. Tallenna se Excelin toiminnon "Save As..." kautta siten, että valitset tallennusmuodoksi (Save as type) "Text (tab delimited)(*.txt)". Tämä tarkoittaa muotoa, jossa taulukon sisältö on tekstitiedostona, kukin taulukon rivi yhtenä tekstirivinä, taulukon alkioiden välissä erottimina tabulointimerkit (tab).
  3. Käsittele tuloksena saatava tekstitiedosto ohjelmalla, joka vaihtaa rivinvaihtojen ja tabulointimerkkien tilalle sopivan HTML-taulukkomerkkauksen ja lisää alkuun ja loppuun HTML-taulukon aloituksen ja lopetuksen. Tämä voidaan tehdä vaikkapa seuraavalla Perl-ohjelmalla:
    print "<table border=\"1\">";
    while (<>) {
        s@^@<tr><td>@;
        s@$@<br></td></tr>@;
        s@\t@ </td><td>@g;
        print; }
    print "</table>";
    
  4. Tarkista, miltä HTML-taulukko näyttää selaimella katsottuna, ja lisää tarvittaessa HTML-määritteitä tai tyylisääntöjä ulkoasun parantamiseksi.

Edellä esitettyä Perl-ohjelmaa tai sen muunnelmia jäljempänä ei ole välttämätöntä ymmärtää. Voit yksinkertaisesti ladata ohjelman omaan koneeseesi ja ajaa sen sentapaisella komennolla kuin
perl mktab.pl <nimi.txt >nimi.html
(Olettaen toki, että koneessa on Perl-tulkki. Sellaisen saa perl.comin jakelusivuilta.) Mutta jonkinasteinen Perlin hallinta tietenkin tarvitaan, jos halutaan muokata tällaisia ohjelmia omiin tarpeisiin sopiviksi.

42 52 62
142 152 162

Esimerkkinä muunnamme erään triviaalin Excel-taulukon HTML-muotoon. Kun aluksi saatava tekstimuotoinen ("tab delimited") versio on käsitelty edellä mainitulla Perl-ohjelmalla, on saatu alustava HTML-muoto. Koska taulukon alkiot ovat kokonaislukuja, esitysmuoto on parempi, jos ne näkyvät solun oikeaan reunaan tasattuina. Tämä voitaisiin tehdä joko align-määritteillä tai tyylisäännöstöillä (tässä tapauksessa pelkkä td {text-align:right;} riittäisi) kuten aiemmin on selostettu. Jos haluttaisiin käyttää varmemmin toimivaa mutta kömpelömpää align-määritettä, niin helpointa olisi muokata Perl-ohjelmaa niin, että se suoraan kirjoittaa halutut määritteet. Lisäksi on ehkä luettavuudelle hyväksi lisätä taulukolle sellaiset määritteet, joilla poistetaan solujen välinen tyhjä tila mutta lisätään tyhjää tilaa solun sisällön ja reunan väliin. Eräs mahdollisuus toteuttaa tämä on käyttää HTML-taulukkomuodon tuottamiseen edellä olevan Perl-ohjelman asemesta seuraavaa muokattua ohjelmaa (jolla saatu tulos näkyy ohessa):

print "<table border=\"1\" cellspacing=\"0\" cellpadding=\"4\">";
while (<>) {
    s@^@<tr><td align=\"right\">@;
    s@$@<br></td></tr>@;
    s@\t@ </td><td align=\"right\">@g;
    print; }
print "</table>";

Kauniin numeerisen taulukon tekeminen

Pieni ongelmataulukko
1 888 55542,5
1 111 111424,589
420,51

Edellä mainittu ohjelma tuotti numeerisen taulukon, jossa data on solun sisällä oikeaan reunaan tasattuna. Tämä riittää yksinkertaisissa tapauksissa tuottamaan ihan kohtuullisen ulkoasun. Mutta varsinkin tieteessä ja tekniikassa esiintyy taulukoita, joissa on suuria moninumeroisia lukuja ja lisäksi desimaalipilkun tai -pisteen sisältäviä lukuja. Tällöin syntyy kaksi ongelmaa, vaikka luvut olisikin tasattu solujensa oikeaan reunaan:

Numeroiden leveydet saa varmimmin samoiksi käyttämällä tt-merkkausta, esim. <tt>42,5</tt>. Tosin siitä syntyy sitten se ongelma, että myös piste tai pilkku vie vaakasuunnassa saman tilan kuin muutkin merkit, jolloin esim. 42,5 näyttää vähän hassulta. Tähän taas auttaisi se, että piste tai pilkku jätetään kyseisen merkkauksen ulkopuolelle: <tt>42</tt>,<tt>5</tt>, jolloin 42,5 näyttää jo paremmalta. Tämä on tietenkin sen verran työlästä, että jokin apuväline (sentapainen kuin edellisessä kohdassa käsitelty) olisi kovasti tarpeen. Voi olla, että numeroiden leveyksiä ei kannata pitää ongelmana.

Tasaaminen desimaalipilkun tai -pisteen kohdalta onkin käytännössä tärkeämpi ongelma, ja hiukan hankalampi. Teoriassa voisimme käyttää HTML 4.0:n mukaista määritettä align="char" yhdessä char-määritteen kanssa, mutta toistaiseksi mikään selaan ei tiettävästi tue niitä.

Yksinkertaisin menetelmä on kirjoittaa kaikkiin saman sarakkeen lukuihin sama määrä numeroita desimaalipilkun tai -pisteen oikealle puolelle, siis esim. korvaten edellä olevassa taulukossa luvut 42,5 ja 0,51 luvuilla 42,500 ja 0,510. Mutta tätä ei ehkä haluta tehdä, koska numeroiden määrällä usein karkeasti myös ilmaistaan mittauksen tai arvion tarkkuus merkitsevinä numeroina. Tällöin voidaan täytemerkkinä käyttää 0:n asemesta no-break space -merkkiä. Numeerisen taulukon muokkaaminen tämän mukaiseksi on tylsää tehdä käsin, joten työkalua kaivataan.

Yksinkertaisuuden vuoksi oletamme, että meillä on taulukko ns. tab separated -muodossa kuten edellä, ja muokkaamme Perl-ohjelman seuraavanlaiseksi:

while (<>) {
    chomp;
    @tmp = split(/\t/);
    $sarakenro = 0;
    for $sarake (@tmp) {
	if($sarake =~ /[,.](\d+)/ &&
           length($1) > $des[$sarakenro]) {
           $des[$sarakenro] = length($1); } 
        $sarakenro++; }
    push @data, [ @tmp ]; }
print "<table border=\"1\" cellspacing=\"0\"",
      " cellpadding=\"4\">\n";
for $rivi ( @data ) {
    print "<tr>";
    $sarakenro = 0;
    for $alkio (@$rivi) {
	if($alkio =~ /[,.](\d+)/) {
           for($i=length($1);$i<=$des[$sarakenro];$i++) {
	       $alkio = $alkio . "&nbsp;"; }}
	$alkio =~ s? ?</tt>&nbsp;<tt>?g;
	$alkio =~ s?\.?</tt>.<tt>?;
	$alkio =~ s?,?</tt>,<tt>?;
        $sarakenro++;
	print "<td align=\"right\"><tt>$alkio</tt></td>"; }
    print "</tr>\n"; }
print "</table>\n";
1 888 55542,5   
1 111 111424,589 
420,51  

Ohjelma laskee, mikä on kussakin sarakkeessa desimaalien (siis desimaalipilkusta tai -pisteestä oikealle olevien numeroiden) enimmäismäärä, ja tulostaessaan lisää no-break space -merkkejä lukujen perään tasausmerkeiksi. Lisäksi se huolehtii siitä, että desimaalipilkku ja -piste sekä datassa alun perin olleet välilyönnit ovat tt-elementtien ulkopuolella eli normaalilla fontilla. Saatava tulos (ohessa) on HTML-merkkaukseltaan aika sotkuinen mutta ulkoasu on kohtuullisen hyvä. Yksi kehittämismahdollisuus olisi se, että desimaalipilkun tai -pisteen jälkeiset numerot olisivat pienikokoisempia, minkä saisi aikaan small-merkkauksella. Tämä vaatisi vain pienehköjä muutoksia; tosin tulos ehkä ei sikäli olisi hyvä, että lukijoiden mielestä pienennetty tasalevyinen fontti voisi olla liian pieni.


Muuan temppu: selainikkunan leveyteen mukautuva "näennäistaulukko"

HTML:ssä on periaatteessa menu-elementti, joka oli tarkoitettu sellaisten listojen esittämiseen, jossa on suuri määrä suhteellisen pieniä alkioita, esim. sanoja (jotka tyypillisesti ovat linkkejä jonnekin). Koska selaimet eivät käytännössä missään vaiheessa ruvenneet tukemaan sitä, joudumme miettimään muita keinoja kuten taulukoiden käyttöä "valikoiden" esittämiseen.

On myös mahdollista tehdä "näennäistaulukko", joka koostuu sanoista, jotka näyttävät muodostavan taulukon seuraavaan tapaan:

A           ABBR        ACRONYM     ADDRESS     APPLET      AREA        B           BASE        BASEFONT    BDO         BIG         BLOCKQUOTE  BODY        BR          BUTTON      CAPTION     CENTER      CITE        CODE        COL         COLGROUP    DD          DEL         DFN         DIR         DIV         DL          DT          EM          FIELDSET    FONT        FORM        FRAME       FRAMESET    H1          H2          H3          H4          H5          H6          HEAD        HR          HTML        I           IFRAME      IMG         INPUT       INS         ISINDEX     KBD         LABEL       LEGEND      LI          LINK        MAP         MENU        META        NOFRAMES    NOSCRIPT    OBJECT      OL          OPTGROUP    OPTION      P           PARAM       PRE         Q           S           SAMP        SCRIPT      SELECT      SMALL       SPAN        STRIKE      STRONG      STYLE       SUB         SUP         TABLE       TBODY       TD          TEXTAREA    TFOOT       TH          THEAD       TITLE       TR          TT          U           UL          VAR        

Edellä oleva rakenne mukautuu selaimen leveyteen: kun leveyttä muutetaan, "taulukon" jakautuminen riveihin muuttuu vastaavasti. Jippona on se, että kyseessä onkin kappale (p-elementti), jonka sisällä sanat ovat toisistaan välilyönneillä erotettuina. Taulukkomainen ulkoasu johtuu siitä, että sanat on tasattu samanpituisiksi käyttämällä lopussa täytemerkkinä no-break space -merkkiä (&nbsp;) ja sisällyttämällä ne tt-elementtiin, joka käytännössä aiheuttaa tasalevyisen fontin käytön (kaikki kirjaimet samanlevyisiä). Vaikka periaatteessa ei ole mitään takeita siitä, että selaimet kohtelevat no-break space -merkkiä tavalla, jota tässä ajetaan takaa, temppu toimii useimmissa selaimissa eikä tiettävästi aiheuta ongelmia silloin, kun ei toimi (ulkoasu ei vain ole niin siisti kuin halutaan). Antti Näyhä on huomauttanut, että siirtämällä no-break space -merkit a href -elementin ulkopuolelle saadaan aikaan tyylikkäämpi muunnelma aiheesta.

Edellä olevan "taulukon" kohdat ovat muuten linkkejä virallisen HTML 4.0 -spesifikaation kohtiin, joissa eri elementit on määritelty.

Lisätietoja ja -esimerkkejä taulukoista