Taulukot
Taulukot rakentuvat table-tagien väliin. Ne ovat hyvä tapa selkiyttää tekstiä tai esimerkiksi järjestellä sitä selkeästi.Esimerkkisivuilla alamme nyt tehdä Hopeanuolen sivuille hahmojen suosio-taulukkoa. Tee uusi tiedosto, suosio.html ja kirjoita seuraavanlainen koodi:
Table-tagiin voidaan liittää parametrit border, bordercolor, cellpadding, cellspacing, bgcolor ja background. Border määrittää taulukon kehyksen leveyden pikseleinä (tietokoneen kuvapisteinä), bordercolor sen värin, cellpadding ja cellspacing tekstin ja taulukon etäisyyksiä. Cellspacing solujen etäisyyttä toisistaan ja cellpadding taulukon etäisyyttä tiedoston reunasta. Soluiksi kutsutaan taulukon sisään tulevia laatikoita. Lisää koodiin esimerkin mukaan:
Seuraavaksi määrittelemme solut. Teemme taulukon, jossa ensimmäisessä solussa on aina hahmon nimi ja sen vieressä kommentti hahmon suosiosta. Ensin määritellään tr-koodi, jolla määrätään, montako solua tulee yhden tr-koodin väliin riviin. Colspan määrittää soluja vierekkäin ja rowspan allekkain. Lisää esimerkin mukainen koodi:
Nyt ryhdymme koodaamaan itse taulukkoa. Solut tulevat tagien tr ja /tr koodien väliin tageilla td ja /td. Huomaa, että tr="2"-tagin jälkeen tulee uusi TR-tagi:
TD-tagiin voidaan liittää nimikkeet bordercolor ja bgcolor, jotka tietenkin määrittelevät solun reunan ja taustan värit. Solujen reunus ei voi olla eri paksuinen, kuin alkuperäinen, mutta se voidaan tehdä näkymättömäksi laittamalla värimääritteeksi sama, kuin taustassa. Tässä esimerkissä teemme jokaiselle riville 2 solua, jotka molemmat tulevat samojen TR-tagien väliin, tee mallin mukaan:
Seuraavaksi määritämme soluja ja teemme lisää rivejä. Solut eivät noteeraa mahdollisesti aiemmin tekstiin liittyviä tiedostossa olevia komentoja, kuten center- tai font-käskyä, ne on tehtävä erikseen joka soluun. Niitä ei ole pakko päätellä, sillä ne päättyvät automaattisesti solun reunaan. Esimerkin mukaan:
Tiedoston pitäisi nyt näyttää tältä:
Jos ei näytä, tarkista koodin oikeinkirjoitus.
Voit halutessasi laittaa lisää hahmoja, esim:
Muutellaampa lopuksi vielä hieman sotujen etäisyyttä toisistaan siirtämällä cellspacing-parametrin numeroa table-koodissa:
(huomaatte myös, mikä merkitys on koodin oikein kirjoittamisella)
Lopputuloksen pitäisi näyttää tältä:
Lopuksi lisätään vielä sivun linkki valikko.html-tiedostoon:
