Kotimaisen Verkkosivuston Luominen Taulukoilla. HTML-temppuja Aloittelijoille

Artikkelissa tarkastelemme paljon käytettyä taulukkoa ja katsomme, miksi se on hyvän suunnittelun avain.

HTML on merkkauskieli, joka suunniteltiin tekstin ja kuvien esittämiseen karkeasti ottaen samalla tavalla käytettävän tietokoneen tyypistä riippumatta. Se suunniteltiin kuitenkin sellaisten hyvin pelkistettyjen dokumenttien esittämiseen, joissa näyttävä ulkoasu ja tyylikkyys on epäolennaista. Tästä syystä sillä ei voi sijoittaa kohteita ruudulle tai sivulle yhtä tarkasti kuin esimerkiksi tekstinkäsittely- tai julkaisuohjelmalla.

Kehittyneiden julkaisuominaisuuksien puute on ongelma, jonka kanssa www-suunnittelijat ovat kamppailleet jo vuosia. Koska www-sivut muistuttavat yhä harvemmin esseekirjoituksia ja yhä useammin aikakauslehtiä, HTML:n tarjoamia työkaluja pitää virittää ja venyttää suunnittelijan tarkoitusta palvelemaan.

Taulukot kuuluvat tärkeimpiin välineisiin, kun www-suunnittelijat haluavat luoda tiiviitä ja näyttäviä ulkoasuja.

Taulukot koostuvat – kuten tekstinkäsittelyohjelmissakin – riveistä ja sarakkeista, joihin voidaan sijoittaa tekstiä ja grafiikkaa. Niiden avulla voi luoda tekstisarakkeita tai asettaa grafiikkaa ja tekstiä vierekkäin niin, että ne täyttävät www-sivulla erilliset alueet toisistaan riippumatta. Kun selaat www:tä, monien lataamiesi sivujen sisältö on sijoitettu taulukoihin, vaikket sitä välttämättä heti huomaa. Taulukkoa, jonka reunat eivät näy, on usein vaikea tunnistaa taulukoksi – ruudulla näkyy vain siisti, hyvin aseteltu sivu.

Tässä artikkelissa katsomme, miten voit hallita taulukoilla www-sivusi asettelua. Tutkimme taulukonluontitageja, taulukoiden asettamista sisäkkäin, kuvien lisäämistä taulukoihin ja sitä, miten taulukoilla luodaan kehittyneitä layouteja.

Perustaulukko

Taulukko luodaan sijoittamalla dokumentin BODY- eli runko-osaan <TABLE>…</TABLE>-tagipari. Näiden tagien välissä luodaan rivi <TR>…</TR>-taulukkorivitagiparilla ja riville solu <TD>…</TD>-taulukkodatatageilla. Solun sisältö laitetaan TD-tagien väliin. Se voi olla tekstiä, kuva, linkki toiseen sivuun tai mikä tahansa näiden yhdistelmä.

Voit poistaa taulukon reunat lisäämällä TABLE-tagiin BORDER=0 -attribuutin, jolloin se ei näy sivulla. BORDER=1 -valinnalla saat kapean, yhden kuvapisteen levyisen reunan ja suuremmilla arvoilla leveämmän reunan.

Tämä koodi tuottaa kuvan 1 kolmirivisen, kaksisarakkeisen taulukon:

<TABLE BORDER=1> 
  <TR><TD><img src="1.gif"></TD> 
    <TD>This is the first item...</TD></TR> 
  <TR><TD><img src="2.gif"></TD> 
    <TD>This is the second item...</TD></TR> 
  <TR><TD><img src="3.gif"></TD> 
    <TD>This is the third item...</TD></TR> 
</TABLE>

Huomaa, että taulukon koodi on TABLE-tagien välissä. TD-tageilla on luotu kolme riviä, ja jokaisella rivillä on kaksi solua (saraketta), jotka on luotu kahdella TD-tagiparilla.

Huolehdi selkeydestä

Vaikka voit laittaa rivinvaihtoja koodin mihin tahansa kohtaan, huomaat, että yksinkertaisenkin taulukon luontiin tarvittava tagimäärä voi helposti karata käsistä. On hyvä tapa sisentää tagit ja – vähintäänkin – lisätä koodiin rivinvaihtoja johdonmukaisesti.

Muista, että jos kirjoitat koodisi tekstinkäsittelyohjelmalla tai yksinkertaisella tekstieditorilla, Enter-näppäimen painaminen vain katkaisee koodirivin eikä lisää koodiin <P>- tai <BR>-tagia.

Enter- ja sarkainnäppäimillä voit siis lisätä rivinvaihtoja ja sisentää koodia, jolloin sitä on helpompi lukea ja virheiden etsiminen helpottuu – mutta selaimessa sivun ulkonäkö ei muutu. Jos käytät graafista editoria kuten FrontPagea, voit tehdä saman asian vaihtamalla koodinäkymään ja säätämällä siitä koodin ulkoasua.

Taulukon leveyden säätely

Aina, kun selain kohtaa taulukon, se yrittää piirtää sen tyylikkäästi noudattamalla mutkikkaita sääntöjä, jotka on sisäänrakennettu selaimeen. Jos taulukossa on vain pieni määrä tekstiä, taulukko näkyy ruudulla yleensä melko pienenä.

Kun taulukossa on paljon tekstiä, se piirretään vastaavasti leveämmäksi, jotta teksti mahtuu siihen siistimmin. Kummassakin tapauksessa tulos voi olla erilainen kuin olisit toivonut. Voit kuitenkin vaikuttaa siihen jossain määrin asettamalla haluamasi leveyden WIDTH-attribuutilla.

Muista kuitenkin, ettet aina saa täsmälleen pyytämääsi kokoa, vaikka selain toteuttaakin toiveesi niin tarkasti kuin se pystyy.

WIDTH-attribuuttia käytettäessä taulukon leveys ilmoitetaan joko prosentteina tai kiinteänä kuvapistemääränä. Kun otetaan huomioon, kuinka erikokoisia ruutuja kävijöillä oletettavasti on – jotkut selaavat www:tä 640×480- ja toiset jopa 1600×1280- tai vielä suuremmalla resoluutiolla, taulukoissa kannattaa käyttää mieluummin kiinteää kuvapisteleveyttä kuin suhteellista leveyttä eli prosentteja.

Muussa tapauksessa huomaat, että 100 prosentin taulukko näyttää suuressa selainikkunassa aika kamalalta.

Muista kuitenkin, että jos 640×480-ruudulla esitetään yli 600 kuvapisteen levyinen taulukko, katselijan pitää vierittää ruutua vaakasuunnassa, jotta hän näkee koko taulukon; tätä pitää välttää, jos vain mahdollista.

Tämä tagi asettaa taulukon 400 kuvapisteen levyiseksi:

<TABLE BORDER=1 WIDTH=400>

Voit käyttää WIDTH-attribuuttia myös <TD>-tagin sisällä yhden solun leveyden määräämiseen. Myös tässä attribuutissa sallitaan joko prosenttiosuus suhteessa taulukon (ei selainikkunan) leveyteen tai kiinteä kuvapistemäärä.

Kuvan kaksi ylimmässä taulukossa ei ole asetettu leveyttä ja keskimmäisessä kokonaisleveys on asetettu 700 kuvapisteeseen. Kolmas taulukko on asetettu myös 700 kuvapisteen levyiseksi niin, että yksittäiset solut on asetettu vuorotellen 100 ja 600 kuvapisteen levyisiksi, jolloin ensimmäisessä sarakkeessa on tilaa vain sen verran, että kuvat mahtuvat siihen. Tässä on kuvan kaksi alareunan taulukon koodi:

<TABLE BORDER=1 width=700> 
  <TR><TD width=100><img src=”skiing.gif”></TD> 
    <TD width=600>This is the first item...</TD></TR> 
  <TR><TD width=100><img src=”fishing.gif”></TD> 
    <TD width=600>This is the second item...</TD></TR> 
  <TR><TD width=100><img src=”yacht.gif”></TD> 
    <TD width=600>This is the third item...</TD></TR> 
</TABLE>

Jos haluat näyttää taulukon koko ruudun levyisenä ruudun koosta riippumatta, aseta leveys 100 prosenttiin. Esimerkki:

<TABLE BORDER=1 WIDTH=100%>

Solujen yhdistäminen

Voit luoda monimutkaisia taulukoita yhdistämällä soluja vaakasuunnassa, millä saat vaikka yhden leveän solun taulukon otsikkoa varten, tai voit yhdistää soluja pystysuunnassa saadaksesi tilaa navigointipalkille tai suurelle kuvalle.

TD-tagin COLSPAN- ja ROWSPAN-attribuuteilla voi valita, kuinka monen sarakkeen tai rivin alueelle yhdistetty solu ulottuu. Tämä taulukkokoodi esimerkiksi luo kahden sarakkeen ja kahden rivin taulukon, jossa ylimmäinen rivi on yhdistetty yhdeksi, koko taulukon levyiseksi soluksi:

<TABLE border=1> 
  <TR><TD COLSPAN=2><Center>Fishing </TD></TR> 
  <TR><TD><img src=”fishing.gif”></TD> 
    <TD>This is text relating to fishing...</TD></TR> 
</TABLE>

Tämä koodi luo kahden sarakkeen ja kahden rivin taulukon, jonka oikeanpuoleinen sarake on koko taulukon korkuinen solu:

<TABLE> 
  <TR><TD ROWSPAN=2><img src=fisherman.jpg></TD> 
    <TD>Fishing</TD></TR> 
  <TR><TD>Text relating to fishing...</TD></TR> 
</TABLE>

Nämä taulukot esitetään kuvassa kolme – attribuuttia BORDER=1 on käytetty vain siksi, että näkisit ruudulla taulukoiden ääriviivat. Kuten näet, taulukoita käyttämällä saat sivuille mielenkiintoisia rakenteita.

Sisäkkäiset taulukot

Yksittäisen taulukon sijaan voit laittaa niitä myös sisäkkäin niin, että taulukon jokin solu sisältää toisen taulukon. Sisäkkäisistä taulukoista voi tulla helposti hyvin mutkikkaita, joten luodessasi niitä saattaa auttaa, jos muodostat taulukot erillään toisistaan.

Kun taulukot sitten toimivat niin kuin haluat, kopioi toinen taulukko ja lisää se paikalleen ensimmäisen taulukon sisään.

Kuvassa neljä on luotu kuvan kolme toinen taulukko uudelleen sisäkkäisenä taulukkona. Tässä on työn tekevä koodi:

<TABLE border=1> 
  <TR><TD><img src=fisherman.jpg></TD>
    <TD><TABLE border=1> <TR><TD>Fishing</TD></TR> 
          <TR><TD>Text relating to fishing</TD></TR> 
        </TABLE></TD></TR> 
</TABLE><P>

Kuten näet, jo tällainen hyvin yksinkertainen taulukko voi vaatia melko mutkikasta koodia. Jos haluat, voit lisätä koodiisi kommentteja selvittämään, mitä missäkin tapahtuu, jolloin koodia on jälkeenpäin helpompi korjata tai muuttaa.

Luo kommentti <!–…–> -tagilla ja sijoita kommenttiteksti itse tagin sisään. Voit lisätä kommentteihin niin paljon tai vähän tekstiä kuin haluat, koska selain jättää ne huomiotta sivua piirtäessään, eivätkä ne tule näkyviin.

Kuvassa 5 sisäkkäisten taulukoiden koodia on kommentoitu, mikä helpottaa sen lukemista ja ymmärtämistä.

Kehittyneen ulkoasun luonti

Taulukoilla voidaan luoda myös kehittyneitä ulkoasuja, joissa sivulla oleva teksti on sovitettu L:n muotoisen kuvan alle. Voit tehdä tämän viipaleisiin jaetulla kuvalla, jonka kokoat taulukolla – se on hyvin helppoa.

Kuvassa kuusi näet luomamme valmiin sivun. Huomaa, miten sivun otsikko menee limittäin kuvan kanssa. Tämä kokonaisuus on luotu grafiikkaohjelmassa yhtenä kuvana ja sitten jaettu suorakulmaisiin osiin.

Meidän kuvamme luotiin Paint Shop Prolla, mutta voit käyttää mitä tahansa grafiikkaohjelmaa; lisää vain grafiikka tai valokuva uuteen dokumenttiin ja aseta otsikkoteksti sen päälle.

Meidän käyttämämme kuvan ympärille luotiin mielenkiintoinen efekti pyyhkimällä kuvan reunat, jolloin siitä tuli pehmeämmän näköinen.

Teksti lisättiin tekstityökaluilla ja siihen asetettiin valkoinen varjo, jotta se erottuisi pohjalla olevasta kuvasta. Kun kuva on valmis, rajaa se crop-toiminnolla siistiksi suorakulmioksi, jottei sen ympärille jää ylimääräistä tyhjää tilaa. Silloin kuvakoko pysyy mahdollisimman pienenä ja latausajat eivät ole tarpeettoman pitkiä.

Viipaloi kuva taulukkoa varten leikkaamalla sen yläosasta suorakulmio, joka on koko kuvan levyinen ja sisältää otsikon ja osan valokuvasta. Anna sille nimeksi top.jpg ja kirjoita sen leveys ja korkeus muistiin. Poista sitten jäljellejääneen kuvan oikeasta reunasta kaikki tyhjä tila ja tallenna kuva nimellä left.jpg.

Kirjoita myös tämän kuvan leveys ja korkeus muistiin.

Voit luoda taulukon, joka kokoaa kuvasi sivulla jälleen yhteen. Tarvitset kahden sarakkeen levyisen ja kahden rivin korkuisen taulukon. Ylärivin sarakkeet sulautetaan yhdeksi sarakkeeksi COLSPAN-attribuutilla, jota käsittelimme aiemmin.

Sinun pitää lisätä vain attribuutit, joilla valitaan taulukon solujen koko niiden sisään sijoitettavien kuvien kokoa vastaavaksi. Se tehdään WIDTH- ja HEIGHT-attribuuteilla. Kokojen pitää olla tarkalleen oikein, koska kuvien väliin ei haluta tyhjää tilaa.

Lisäksi sinun pitää asettaa kaksi muuta taulukkoattribuuttia, joita emme ole vielä käsitelleet: cellpadding- ja cellspacing-attribuutit.

Ne säätelevät taulukon väljyyttä – CELLSPACING säätää taulukon solujen välistä tyhjää tilaa ja CELLPADDING solun datan ja solun seinän välistä tilaa. Asetamme molemmat attribuutit nollaksi, koska emme halua soluihin emmekä niiden väliin lainkaan tyhjää tilaa – se tuottaisi kuvan jaettujen osien väliin valkoisia viivoja.

Käytämme lisäksi TD-tageissa VALIGN=top -attribuuttia, jotta jokaisen solun sisältö näkyy varmasti solun yläreunassa. Ilman sitä asettelu voi mennä pieleen, jos taulukon oikean alakulman solussa on paljon tekstiä. Tässä on kuvassa kuusi esitetyn sivun koodi:

<html>
<head>
  <title>
    Recipes from my kitchen
  </title>
</head>
<body> 
  <table border=”0” width=”800” 
  cellpadding=”0” cellspacing=”0”>
    <tr>
      <td colspan=”2”> 
        <img border=”0” src=”Top.jpg” 
        width=”800” height=”212”>
      </td> 
    </tr>
    <tr> 
      <td valign=”top”> 
        <img border=”0” src=”left.jpg” 
        width=”533” height=”535”> 
      </td> 
      <td valign=”top”> 
        <p><font face=”Verdana” 
        color=”#2E2B55”> 
          Here are some of my favourite 
          recipes…</font></p> 
      </td> 
    </tr> 
  </table> 
</body> 
</html> 

Kun huomaat, kuinka helppoa tämän menetelmän käyttö on, löydät sille varmasti paljon käyttöä www-sivuillasi, kun haluat luoda upeita layouteja.