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ä".
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
- laitteisiin 3 000 000 euroa, ostetaan tammikuussa
- ohjelmistoihin 300 000 euroa, hankitaan joulukuussa
- käyttökoulutukseen 3 000 euroa, järjestetään heinäkuussa
- käsikirjoihin 1 000 euroa
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> </td>
.
Toisaalta tyhjiä alkioita kannattaa välttää. Yleensä
löytyy jokin parempi
tapa esittää taulukossa tiedon puuttuminen.
Esimerkkitapaukseemme sopisi kysymysmerkki (?).
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):
print "<table border=\"1\">";
while (<>) {
s@^@<tr><td>@;
s@$@<br></td></tr>@;
s@\t@ </td><td>@g;
print; }
print "</table>";
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>";
1 888 555 | 42,5 |
1 111 111 | 424,589 |
42 | 0,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 . " "; }}
$alkio =~ s? ?</tt> <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 555 | 42,5 |
1 111 111 | 424,589 |
42 | 0,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.
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ä
(
)
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.