5 Taulukot 51. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab 4

Transkriptio

1 51 Taulukon avulla voidaan esittää tietoa helposti ymmärrettävässä muodossa. Taulukko koostuu riveistä (vaakasuoraan) ja sarakkeista (pystysuoraan). Taulukko koostuu soluista. Yleensä taulukossa on otsikkosoluja, jotka voidaan esittää tavallisesta solusta eroavalla fontilla (alla olevassa taulukossa otsikkosolut on lihavoitu). Taulukko voi olla yksi- tai kaksiulotteinen. Tietysti se voi olla useampiulotteinenkin (kuten ohjelmointikielissä), mutta esim. kolmiulotteinen taulukko vaatisi kolmiulotteisuutta tukevan ohjelman. HTML:ssä taulukko voi siis olla yksi tai kaksiulotteinen. Alla oleva esimerkkitaulukko on kaksiulotteinen. Esimerkki yksiulotteisesta taulukosta voisi olla pelkkä alla olevan taulukon vasemman puoleisin sarake, jossa luetellaan eri yritykset. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab mk Esimerkki taulukosta. Yksinkertaisia taulukoita voi esittää luvussa esitellyn PRE-elementin avulla. Yllä oleva taulukko näyttäisi silloin seuraavanlaiselta: Taulukko PRE-elementin avulla kuvattuna. On kuitenkin helppo ymmärtää, että PRE-elementti on hyvin rajoittunut tapa esittää taulukoita. PRE-elementtiä monipuolisempia ominaisuuksia tarjoaa TABLEelementti, joka mahdollistaa mm. otsikkosolut, solujen jaon ja solukohtaisen asettelun.

2 52 HTML-kielessä TABLE-elementtiä käytetään muuhunkin kuin perinteisten taulukoiden esityksiin. Sillä voidaan esim. asetella sivulle kuvia, linkkejä, tekstiä jne. 5.1 TABLE TABLE-elementti muodostuu alku- ja lopputagista. TR-elementillä (selitetty myöhemmin tarkemmin) muodostetaan uusi rivi, TH-elementillä uusi otsikkosolu ja TD-elementillä tavallinen solu. Jotta TABLE-elementin käyttöä olisi helpompi opetella, otetaan heti alkuun yksinkertainen esimerkki elementin käytöstä. <TABLE border=1> <TR><TH></TH><TH>Sarakeotsikko1</TH> </TR> <TR><TH>Riviotsikko</TH><TD>Tekstiä</TD> </TR> </TABLE> TABLE-elementillä luotu yksinkertainen taulukko. TABLE-elementille on määritelty seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

3 53 Osa seuraavista attribuuteista on TABLE-elementin omia ja osa yhteisiä toisten elementtien kanssa. Nämä attribuutit ovat kuitenkin tärkeitä, joten niiden merkitys ja käyttö on selvitetty tässä yhteydessä: align = Määrittää taulukon asettelun dokumentissa. Mahdollisia arvoja ovat left, center ja right. Tämän attribuutin käyttö ei ole enää kovin suositeltavaa. Taulukoiden asettelu tulisi hoitaa tyylilomakkeiden avulla. border = Määrittää taulukkoa kiertävän reunan paksuuden. Arvo ilmaistaan pikseleissä. Oletuksena arvo on nolla eli taulukon ympärillä ei ole reunuksia. Border-attribuutilla saa melko mukavia efektejä aikaiseksi, kuten seuraava kuva osoittaa. Border-attribuutti määrittää taulukkoa kiertävän reunan paksuuden (border=10). cellspacing = Määrittää solujen välisen etäisyyden toisistaan. Attribuutilla on helppo vähentää taulukosta ahtauden tunnetta. Alla olevassa esimerkissä attribuutin arvoksi on laitettu 10. <TABLE border=1 cellspacing=10> <TR><TH></TH><TH>Sarakeotsikko1</TH> </TR> <TR><TH>Riviotsikko</TH><TD>Tekstiä</TD> </TR></TABLE>

4 54 Cellspacing-attribuutilla määritetään taulukon solujen välinen etäisyys toisistaan. cellpadding = Määrittää solujen tekstin ja solujen reunan välisen etäisyyden. Attribuutti kirjoitetaan HTML-koodiin, kuten cellspacingattribuuttikin, joten esimerkkikoodi ei ole tarpeen. Seuraavassa kuvassa olevan taulukon cellpadding-attribuutin arvo on 10. Cellpadding-attribuutilla määritetään solujen tekstin ja reunan välinen etäisyys toisistaan. frame = Määrittää, mitkä osat taulukon reunasta ovat näkyviä. Mahdollisia arvoja ovat void Ei reunoja. (Huom. jos border-attribuutti on määritetty, soluilla näkyvät reunat.) above Ainoastaan yläreunat näkyvät. below Ainoastaan alareunat näkyvät. hsides Ainoastaan ylä- ja alareunat näkyvät vsides Ainoastaan oikea- ja vasenreuna näkyvät.

5 55 lhs Ainoastaan oikeat reunat näkyvät. rhs Ainoastaan vasemmat reunat näkyvät. box Kaikki neljä reunaa näkyvät. border Kaikki neljä reunaa näkyvät. Jos frame-attribuutin kanssa käyttää border-attribuuttia (edellisissä esimerkeissä se on määritetty), eivät frame-attribuutin vaikutukset näy selvästi eivätkä niin kuin ne on tarkoitettu. Frames-attribuutilla voi määrittää, mitkä taulukon reunoista näkyvät. Tässä attribuutin arvona on lhs. rules = Määrittää, mitkä taulukon viivoitukset näkyvät. Mahdollisia arvoja ovat none Ei viivoituksia. groups Ryhmät erotetaan toisistaan viivoituksella. rows Viivoitukset tulevat rivien väliin. cols Viivoitukset tulevat sarakkeiden väliin. all Kaikkien rivien ja sarakkeiden väliin tulee viivoitukset. Rules-attribuutilla määritetään taulukossa näkyvät viivoitukset. Tässä attribuutin arvoksi on asetettu cols.

6 56 summary = width = Tällä attribuutin arvoksi kirjoitetaan yhteenveto taulukosta. Attribuutti on tehty sitä varten, että ihmiset, jotka eivät käytä visuaalisia selaimia, voisivat paremmin ymmärtää, mistä taulukko kertoo. Tällaisia selaimia ovat esim. sokeille tehdyt selaimet, jotka lukevat sivun sisällön tai muuttavat sen pistekirjoitukseksi. Määrittää taulukon leveyden. Arvo voidaan antaa joko pikseleinä tai prosenttina selaimen käyttämästä tilasta. 5.2 CAPTION CAPTION-elementti sisältää tekstinä taulukon otsikon. Elementti vaatii alku- ja lopputagin ja sen voi sijoittaa ainoastaan heti TABLE-elementin jälkeen. Elementin tulisi kuvata luontevasti taulukon sisältöä. Oletuksena otsikko sijoitetaan taulukon yläpuolelle, mutta align-attribuutilla otsikon sijoitusta voi muuttaa. Uusimman HTML-määritelmän mukaan align-attribuutin käyttöä tulisi välttää ja käyttää sen sijaan tyylilomakkeita. Tyylilomakkeiden käyttö on suositeltavaa aina. Tällöin HTML-dokumentti saadaan mahdollisimman lähelle puhdasta rakenteista dokumenttia, koska itse dokumenttiin ei ole kirjoitettu muotoiluun liittyvä tietoa. align = Määrittää otsikon sijainnin taulukkoon nähden. Mahdollisia arvoja ovat: top Otsikko on taulukon yläpuolella. bottom Otsikko on taulukon alapuolella. left Otsikko on taulukon vasemmalla puolella. right Otsikko on taulukon oikealla puolella. Align-attribuutin lisäksi CAPTION-elementillä on seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Kuten aiemmin on jo mainittu, kaikki yleiset attribuutit ja niiden käyttö on selitetty omassa luvussaan (luvussa 14). Tämä siksi, että yleisyytensä vuoksi ei ole mitään järkeä kertoa niiden merkitystä jokaisen elementin kohdalla. Seuraava esimerkki havainnollistaa CAPTION-elementin käytön.

7 57 <TABLE rules=rows> <CAPTION>Otsikko</CAPTION> <TR><TH></TH><TH>Sarakeotsikko1</TH> </TR> <TR><TH>Riviotsikko</TH><TD>Tekstiä</TD> </TR> </TABLE> CAPTION-elementillä voidaan määrittää taulukon otsikko. 5.3 Riviryhmät: THEAD, TFOOT, TBODY THEAD-, TFOOT- ja TBODY-elementtien avulla voidaan taulukoille määritellä ylä- ja alaotsikot (header ja footer). Tästä on hyötyä esim. tulostettaessa pitkiä taulukkoja, jolloin selainohjelma voi tulostaa jokaiselle sivulle ylä- ja alaotsikon. Elementtien avulla on siis mahdollista ryhmitellä taulukon rivejä Elementit eivät vaadi lopputagia, mutta selkeyden vuoksi on viisasta kirjoittaa se. Elementeille on määritelty seuraavat yleiset attribuutit. id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup align, char, charoff, valign

8 58 Elementit täytyy sijoittaa TABLE-elementin sisälle tietyssä järjestyksessä: ensin THEAD, sitten TFOOT ja lopuksi yksi tai useampi TBODY. THEAD- ja TFOOT-elementit ovat toisistaan riippumattomia eli toinen voi aivan hyvin puuttua. TBODYelementeillä voidaan erotella riviryhmiä, jokainen oman TBODY-elementin sisään. Yhtä riviryhmää varten TBODY-elementtiä ei tarvitse määritellä. Eri selaimet käsittelevät THEAD-, TFOOT- ja TBODY-elementit eri tavalla ja tämä on syytä ottaa huomioon sivuja tehtäessä. Esimerkiksi seuraava esimerkki toimii Microsoftin Internet Explorer 4.0:ssa kun taas Opera 3.5 ei osaa käsitellä elementtejä. Opera näyttää myös taulukon erinäköisenä kuin Explorer. <TABLE rules=rows> <CAPTION>Otsikko</CAPTION> <THEAD><TR><TD><B>Tämä teksti on header</b></td></tr> </THEAD> <TFOOT><TR><TD><B>Tämä teksti on footer</b></td></tr> </TFOOT> <TBODY> <TR><TD>Ensimmäisen osan eka rivi</td></tr> <TR><TD>Ensimmäisen osan toka rivi</td></tr> </TBODY> <TBODY> <TR><TD>Toisen osan eka rivi</td></tr> <TR><TD>Toisen osan toka rivi</td></tr> </TBODY> </TABLE> Internet Explorerissa osaa käsitellä THEAD-, TFOOT- ja TBODY-elementtejä.

9 59 Opera 3.5 ei osaa käsitellä THEAD-, TFOOT- ja TBODY-elementtejä. 5.4 Sarakeryhmät: COLGROUP ja COL Edellisessä luvussa esiteltyjen elementtien avulla pystyi muodostamaan taulukon riveistä ryhmiä. COLGROUP- ja COL-elementtien avulla taas puolestaan voidaan muodostaa sarakkeista ryhmiä. COLGROUP-elementillä lopputagi ei ole pakollinen ja COL-elementillä se on kielletty. Luonnollisesti molemmat tarvitsevat alkutagin. Jälleen kerran on syytä kokeilemalla selvittää, kuinka eri selaimet näyttävät tehdyt sivut. Esim. Opera 3.5 ei osaa näyttää sarakkeita COLGROUP-elementin align-attribuutin määrittämällä tavalla, mutta osaa kyllä näyttää sarakkeiden pituudet oikein. Määritettäessä sarakeryhmää täytyy tietää, montako saraketta ryhmään haluaa. Ryhmien määrityksessä on kaksi keinoa, joko COLGROUP-elementin spanattribuutti tai sitten COL-elementti. COL-elementti on eräällä tavalla COLGROUPelementin alaelementti, koska se sijoitetaan COLGROUP-elementin sisään. Käydäänpä läpi COLGROUP-elementin attribuutit ennen esimerkkejä. COLGROUPelementille on määritetty seuraavat yleiset attribuutit: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup align, char, charoff, valign

10 60 Lisäksi elementille on määritetty seuraavat omat attribuutit: span = width = Kertoo kuinka monta saraketta määriteltävään sarakeryhmään kuuluu. Arvo on nollaa suurempi kokonaisluku. Jos spanattribuuttia ei ole määritelty, kuuluu sarakeryhmään oletusarvoisesti yksi sarake. Jos COLGROUP-elementin sisään on määritetty yksikin COL-elementti, jättää selain tämän attribuutin huomiotta. Määrittää sararyhmän sarakkeiden pituuden. Luku voidaan antaa pikseleinä, prosenteina (käytettävästä tilasta), suhteellisena arvona sekä kirjoittamalla attribuutin arvoksi 0*, joka tarkoittaa sitä, että sarakkeiden pituus määräytyy pisimmän sarakkeen sisällön mukaan. Ja sitten esimerkkien pariin. Seuraava esimerkki kuvaa, kuinka määritellään kaksi sarakeryhmää. Esimerkissä käytetään span-attribuuttia ryhmien määrityksessä. Kuten edellä mainittiin, jos span-attribuuttia ei ole määritetty, on sarakeryhmän leveys yksi. Koska esimerkissä span-attribuutin arvoksi on asetettu yksi, voisi attribuutin jättää aivan hyvin pois. Se onkin esimerkissä ainoastaan osoittamassa attribuutin käyttöä. <TABLE border="1"> <CAPTION>Talonrakennusohje</CAPTION> <COLGROUP span=1 width="200" align="left"></colgroup> <COLGROUP span=1 width="100" align="center"></colgroup> <TR><TD>Toimenpide</TD><TD>Hinta</TD></TR> <TR><TD>Osta tontti</td><td>90000 mk</td></tr> <TR><TD>Tilaa talopaketti</td><td>114000</td></tr> <TR><TD>Pystytä talo</td><td>100000</td></tr> <TR><TD>Osta huonekaluja</td><td>25000</td></tr> </TABLE>

11 61 COLGROUP-elementillä määriteltyjä sarakeryhmiä. Span-attribuutti on kätevä, jos sarakeryhmään kuuluu useita sarakkeita, joilla on samat muotoiluasetukset esim: <COLGROUP span= 20 width="200" align="center"></colgroup> Jos jokaisen (tai usean) taulukon sarakkeen täytyy näyttää erilaiselta, kannattaa käyttää COL-elementtiä. COL-elementillä on samat yleiset ja omat ominaisuudet kuin COLGROUP-elementilläkin. COL-elementin span-attribuutti toimii periaatteessa samalla tavalla, kuin COLGROUP-elementin span-attribuutti. Koko COL-elementin idea on se, että toisistaan eroavat sarakeryhmät voidaan määritellä kätevästi saman COLGROUP-elementin sisään. Selvyyden vuoksi edellä oleva esimerkki toteutettuna COL-elementillä. <TABLE border="1"> <CAPTION>Talonrakennusohje</CAPTION> <COLGROUP> <COL width="200" align="left"> <COL width="100" align="center"> </COLGROUP> <TR><TD>Toimenpide</TD><TD>Hinta</TD></TR> <TR><TD>Osta tontti</td><td>90000 mk</td></tr> <TR><TD>Tilaa talopaketti</td><td>114000</td></tr> <TR><TD>Pystytä talo</td><td>100000</td></tr> <TR><TD>Osta huonekaluja</td><td>25000</td></tr> </TABLE>

12 TR, TH, TD TR- TH- ja TD-elementit ovat tulleetkin jo tutuksi aikaisemmista esimerkeistä. Niiden avulla määritellään taulukon rivejä (TR), otsikkosoluja (TH) sekä tavallisia soluja (TD). TR-elementillä ei ole mitään yllättäviä ominaisuuksia, toisin kuin THja TD-elementeillä, joten käydään TR-elementin perustiedot läpi ennen TH- ja TDelementteihin siirtymistä. TR-elementin lopputagi ei ole pakollinen, joskin se toisten mielestä helpottaa koodin ymmärtämistä. TR:lle on määritelty määritetty samat yleiset attribuutit kuin melkein kaikille elementeille eli: id, class lang title style onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup align, char, charoff, valign TH- ja TD-elementeillä on myös edellä luetellut attribuutit sekä lisäksi vielä yksi: bgcolor, jolla voi asettaa solun taustavärin TH-elementin avulla määritellään taulukoon otsikkosoluja. Selain voi korostaa otsikkosoluja esim. lihavoimalla niiden tekstin. TH- ja TD-elementeillä on seuraavat omat attribuutit: headers = scope = Kertoo, minkä nimisestä solusta löytyy kyseisen solun otsikko. Attribuutin arvo on välilyönneillä eroteltuja solun nimiä (yksi tai useampi). Otsikkosolut täytyy nimetä id-attribuutin avulla. Tätä attribuuttia käytetään, jotta sokeille tehdyt selaimet voisivat esim. lukea oikean otsikon ennen solun sisältöä. Tämä attribuutti toimii päinvastoin, kuin headers-attribuutti. Tämän attribuutin avulla voidaan määritellä, mille soluille otsikkosolu toimii otsikkona. Attribuutin arvo voi olla yksi seuraavista: row Otsikkosolu toimii otsikkona lopulle riville. col Otsikkosolu toimii otsikkona lopulle sarakkeelle. rowgroup Otsikkosolu toimii otsikkona lopulle riviryhmälle. colgroup Otsikkosolu toimii otsikkona lopulle sarakeryhmälle.

13 63 abbr = axis = rowspan = Tämän attribuutin avulla voi kertoa solun sisällön lyhennettynä. Esim. puhesyntetisaattorilla varustettu selain voisi lukea solun lyhenteen ennen solun varsinaista sisältöä. Tämän attribuutin avulla solu voidaan asettaa kuulumaan johonkin käsitteelliseen luokkaan eli kategoriaan, joiden avulla voidaan muodostaa n-ulotteisen avaruuden akselit. Yksi solu voi kuulua useaan kategoriaan, tällöin kategorioiden nimet erotetaan toisistaan pilkulla. Näkörajoitteisten selaimet (miksei tietysti muutkin selaimet) voivat käyttää näitä kategorioita hyväkseen niin, että selaimelta voi kysyä esimerkiksi tietyn tai tiettyjen kategorioiden solujen sisältöä. Tämän attribuutin avulla voi jakaa taulukon soluja eri riveille. Seuraava esimerkki havainnollistaa attribuutin käyttöä: <TABLE border="1"> <CAPTION>Huuhaa-taulu</CAPTION> <TR><TD rowspan="2">jaettu</td><td>jakamaton</td></tr> <TR><TD>Kuten myös</td></tr> </TABLE> Rowspan-attribuutilla voi jakaa taulukon soluja eri riveille. colspan = Tämän attribuutin avulla voi jakaa taulukon soluja eri sarakeille. Seuraava esimerkki havainnollistaa attribuutin käyttöä: <TABLE border="1">

14 64 <CAPTION>Huuhaa-taulu</CAPTION> <TR><TD colspan="2">jaettu</td></tr> <TR><TD>Jakamaton</TD><TD>Kuten myös</td></tr> </TABLE> Rowspan-attribuutilla voi jakaa taulukon soluja eri sarakkeille. nowrap = width = height = Estää tekstin jakamisen usealle riville solun sisällä. Tämän attribuutin käyttö ei ole suositeltavaa, sillä huolimattomasti käytettynä yhdessä solussa oleva pitkä teksti voi muuttaa koko taulukon ulkoasun sekavaksi tekemällä koko kyseisestä sarakkeesta pitkän. Jos attribuuttia kuitenkin haluaa käyttää, sitä käytetään kirjoittamalla pelkkä attribuutti elementin sisään, sillä attribuutti on niin sanottu boolean-attribuutti. Tämän attribuutin avulla voi asettaa solun toivotun pituuden. Attribuutin käyttö ei ole suositeltavaa, vaan solujen pituudet tulisi asettaa COLGROUP-elementin avulla. Tämän attribuutin avulla voi asettaa solun toivotun pituuden. Vaikka useissa kirjan esimerkeissä TH- ja TD-elementeillä on käytetty lopputagia, se ei ole pakollinen. Lopputagin käyttö on hyvin käyttäjäkohtainen asia, toiset tykkäävät, että koodi on luettavampaa lopputagien kanssa ja toisten mielestä se on selvempää ilman niitä.

15 5.6 Taulukoiden käyttö 65 Taulukoita käytetään paljon, luonnollisesti taulukoiden esittämiseen, mutta myös toisten elementtien sijoitteluun HTML-dokumentissa. Taulukot tarjoavat näppärän keinon asetella kuvia ja tekstiä vierekkäin, palstoittaa tekstiä, esittää useita kuvia rinnakkain, jne. Tässä luvussa käydään läpi näitä keinoja sekä esitellään muutamia esimerkkejä taulukoiden käytöstä Asettelu HTML-kielessä ei ole palstoittamista varten olevaa elementtiä, joten palstoitus tehdään usein TABLE-elementillä. Kuten edellä on käynyt ilmi, sarakkeiden eli palstojen määrä ei ole rajoitettu. Sarakkeita voi olla kuinka paljon tahansa. Kuten aina, myös tässä tapauksessa on syytä muistaa sivujen katsojaa: kukaan ei jaksa lukea epäselvää tai huonosti tehtyä sivua. Internetin käyttäjät suhtautuvat nykypäivänä melko kriittisesti www-sivuihin eivätkä esim. jaksa odottaa kauaa sivun latautumista. Suurin osa internet-yhteyksistä on vielä modeemiyhteyksiä, joten suuren taulukon täyttäminen isoilla kuvilla ei ole kovinkaan järkevä idea Taulukon käyttö asettelussa Seuraava hieman laajempi esimerkki havainnollistaa taulukon käyttöä pienimuotoisen julkaisun teossa. Esimerkin uutiset ovat täysin fiktiivisiä. <TABLE cellpadding="5" border="1"> <CAPTION>Paikallisuutisia</CAPTION> <COLGROUP> <COL width="300" align="left" valign="top"> <COL width="300" align="left" valign="top"> </COLGROUP> <TR> <TD rowspan="2"> Tänään perjantaina aurinko nousee Kuopiossa klo. 4.13, muttei se kuitenkaan näy koko päivänä, koska etelästä tullut matalapaine toi mukanaan kuuden viikon sadekuurot. Hyvää kesälomaa.<br> <IMG src="kartta.bmp"> <TD> Vapaana juoksevat koirat ja lapset tekevät ulkona liikkumisen vaaralliseksi,lähes mahdottomaksi. Asiaa ajamaan on perustettu Calmarin Unioni ry, johon voi ottaa yhteyttä

16 66 puhelimella. </TR> <TR> <TD> Suomen LekaUlkona ry on jakanut stipendit seuraaville innokkaille kätensä tuulettajille: Pekka Ripa, Kimmo Näsä, Ansa Vaappu ja Kaisa Rapa. Stipendi on ajelu autolla, josta ei voi sulkea ikkunoita. </TR> </TABLE> Esimerkki taulukon käytöstä. Soluille on saatu väljyyttä cellpadding-attribuutin avulla. Toinen vaihtoehto olisi ollut cellspacing-attribuutin käyttö, mutta se olisi tehnyt tyhjän tilan solujen väliin eikä sisälle. Sarakkeiden koko ja asettelu on määritelty sarakeryhmien avulla. Sarakkeen leveydeksi asetettiin 300, vaakatasaukseksi (align) left sekä pystytasaukseksi (valign) top. Tällöin teksti alkaa solun vasemmasta yläreunasta.

17 67 Taulukon ensimmäisessä sarakkeessa on yhdistetty kaksi ensimmäistä riviä. Näin saatiin oikealla oleva hukkatila toisen uutisen käyttöön. Ilman rivinjakoa olisi Calmarin Unioni uutisen alle jäänyt iso tyhjä tila. Tilanne on aivan samanlainen, kuin rowspan-esimerkissä aiemmin. Koska toisen rivin ensimmäinen solu on jo käytössä, ei toiselle riville määritellä kuin yksi solu. Jos toisellekin riville määriteltäisiin kaksi solua, tulisi taulukosta kolmesarakkeinen taulukko. Kuvaelementistä ei kannata välittää tässä vaiheessa, sillä siitä kerrotaan enemmän luvussa Taulukko, joka sisältää linkkejä Taulukkojen avulla on hyvä organisoida linkkejä. Jos linkki-elementit (niistä enemmän seuraavassa luvussa) laittaa suoraan HTML-dokumenttiin, saattaa sivusta tulla helposti pitkä ja käyttäjän kannalta hankala hahmottaa. Taulukon tai taulukoiden avulla linkit saa helposti järjestettyä loogisiin ryhmiin eli kategorioihin, joita on helppo lukea ja myös helppo ylläpitää. Seuraavassa esimerkissä on havainnollistettu taulukon käyttöä linkkikokoelmana. Pankkien linkit ovat fiktiivisiä, kun taas hakukoneiden linkit ovat oikeita. Itse linkkielementtiin ei kannata kiinnittää enempää huomiota tässä vaiheessa, sillä siitä kerrotaan enemmän luvussa 6. <TABLE border="1"> <CAPTION>Linkkejä</CAPTION> <TR><TD>Pankkeja</TD><TD>Hakukoneita</TD></TR> <TR> <TD><A href=" <A href=" <A href=" </TD> <TD> <A href=" <A href=" <A href=" </TD></TR> </TABLE>

18 68 Esimerkin taulukossa on kaksi riviä ja kaksi saraketta. Ylempi rivi toimii otsikkona alemmassa rivissä oleville linkeille. Tämä ei ole tietystikään ainut eikä ehkä paraskaan tapa, mutta ylläpidon kannalta se ainakin on selkeä. Toinen tapa ratkaista ongelma olisi nimittäin laittaa jokainen linkki omaan soluunsa. Koodista tulisi kuitenkin erittäin sekavaa, eikä yhden linkin lisääminen kokoelmaan olisi enää kovin helppoa. Taulukko, joka sisältää linkkejä.