3.3 Taulukot

Taulukot (tables) ovat erittäin monikäyttöisiä, kun halutaan tehdä sivuista helpommin luettavia ja sijoittaa kuvat näppärästi tekstin sekaan. Tutkitaan aluksi, miten taulukko tehdään ja mistä elementeistä se koostuu.

Taulukko alkaa <table> -tunnisteella ja päättyy </table> -tunnisteeseen. Noiden väliin sijoitetaan rivejä (table row, tr), jotka pitävät sisällään soluja (cell).

Solu-elementtiin voidaan sijoittaa haluttu teksti tai tieto (data, TableData => td).

Esimerkki

Alla oleva esimerkkitaulukko koostuu kahdesta rivistä (tr-elementit), jossa jokaisessa on neljä solua (td-elementit). Toisin sanoen taulukossa on kaksi riviä ja neljästä saraketta (column).

<table border="1">
	<tr>
		<td>rivi 1, sarake 1</td>
		<td>rivi 1, sarake 2</td>
		<td>rivi 1, sarake 3</td>
		<td>rivi 1, sarake 4</td>
	</tr>
	<tr>
		<td>rivi 2, sarake 1</td>
		<td>rivi 2, sarake 2</td>
		<td>rivi 2, sarake 3</td>
		<td>rivi 2, sarake 4</td>
	</tr>
</table>

TH - Table Header

Halutessa voidaan taulukkoon lisätä eräänlainen otsikkorivi (Table Header, th). Normaalisti tämä tekee saman asian kuin td, mutta teksti tulee lihavoituna. Tätä kannattaa aina käyttää kaikille otsikoille eikä koettaa käyttää lihavointeja tai muita ulkoasuun liittyviä kikkailuja (jaksossa 4 selviää miksi).

Kaikkien rivien ei tarvitse olla täysiä vaan lopusta voi puuttua soluja, ja väliin voi halutessaan laittaa tyhjiä soluja, jotta voi "hypätä" jonkun sarakkeen yli.

<table border="1">
	<tr>
		<th>Etunimi</th>
		<th>Sukunimi</th>
		<th>Ammatti</th>
	</tr>
	<tr>
		<td>Tauno</td>
		<td>Testikäyttäjä</td>
		<td>muurari</td>
	</tr>
	<tr>
		<td>Jarkkis</td>
<!-- seuraavaksi tyhjä solu, jotta voidaan hypätä sukunimi yli -->
		<td></td>
		<td>lentoteknikko</td>
	</tr>
	<tr>
		<td>Satu</td>
		<td>Selaaja</td>
<!-- tässä olisi periaatteessa pitänyt olla yksi TD-tunniste mutta sen voi jättää pois-->
	</tr>
</table>

Jos haluat tyhjänkin solun ympärille raamit, pistä solun sisään välilyönti eli &nbsp;-elementti:

Esimerkki

<td>&nbsp;</td>

table-elementti

table-elementti voi sisältää seuraavia attribuutteja:

align="left|center|right"

taulukon tasaus ikkunaan nähden, ts. tuleeko taulukko ikkunan vasempaan reunaan, oikeaan reunaan vai keskitettynä. Ei vaikuta solun sisäisen tekstin tasaukseen.

width="n|p%"

taulukon leveys pikseleinä tai prosentteina (suhteessa ikkunan leveyteen)

border="n"

taulukon reunan paksuus (vaikuttaa myös solujen ympärillä olevaan reunukseen)

bordercolor="#RRGGBB"

taulukossa käytettävän reunuksen väri - ei suositella käytettävän sillä ulkoasu pitäisi määritellä muualla kuin HTML:ssä

cellspacing="n"

solujen ympärille varattu tila (solujen välinen etäisyys, kts. kuva alla)

cellpadding="n"

solun reunan ja sisällön etäisyys (kts. kuva alla)

bgcolor="#RRGGBB|name"

taulukon taustaväri - ei suositella enää käytettävän sillä HTML:ää ei pitäisi käyttää ulkoasun määrittämiseen (palataan tähän kurssin jaksossa 4).

background="URL"

taulukon taustakuva (vrt. body-elementin taustaväri tai taustakuva) - sama kuin edellä eli ei suositella enää käytettävän. Toimii samalla tavalla kuin body:ssä, eli kuva kopioituu automaattisesti sekä pysty- että vaakasuunnassa.

Esimerkki: cellspacing

<table cellspacing="0">     <table cellspacing="10">

Esimerkki: cellpadding

<table cellpadding="0">     <table cellpadding="10">

Esimerkki cellspacing ja cellpadding

cellspacing=20, cellpadding=10

tr-elementti

Seuraavaksi käymme läpi rivi-elementin (tr) attribuutit.

align="left|center|right"

Rivin solujen tasaus

valign="top|middle|bottom"

Rivin solujen tasaus pystysuunnassa (v=vertical)

bgcolor="#RRGGBB|name"

Rivin solujen taustaväri

td-elementti

Yksittäisellä solulla on enemmän attribuutteja kuin edellämainituilla rivillä ja taulukolla. Käydään ensin läpi niistä jo entuudestaan tutut:

align="left|center|right"

Solujen sisällön tasaus

valign="top|middle|bottom"

Solun sisällön tasaus pystysuunnassa (v=vertical)

bgcolor="#RRGGBB|name"

Solun taustaväri

background="URL"

Solun taustakuva

width="n|p%"

Solun ja samalla koko sarakkeen leveys pikseleinä tai prosentteina (suhteessa koko taulukon leveyteen). Huomaa, että vain yhdelle solulle samassa sarakkeessa tarvitsee määrittää leveys - sarakkeen loput solut saavat automaattisesti saman leveyden.

height="n|p%"

Solun (ja samalla koko rivin) korkeus pikseleissä tai prosentteina. Arvo "50%" tarkoittaa 50% käytettävissä olevasta korkeudesta.

rowspan="n"

Kahden tai useamman päällekkäisen solun yhdistäminen (kts. alla)

colspan="n"

Kahden tai useamman vierekkäisen solun yhdistäminen (kts. alla)

nowrap

Tämän attribuutin läsnäolo estää solun sisällä olevan tekstin rivittymisen useammalle kuin yhdelle riville. Kannattaa käyttää varovasti sillä saattaa väärin käytettynä aiheuttaa järkyttävän pitkiä sarakkeita.

Sarakkeen leveys

Yksittäisen sarakkeen leveyttä voidaan kontrolloida määrittelemällä solulle joku leveys. Se voidaan antaa suhteellisena (prosentteina) tai absoluuttisena (pikseleinä):

<table border="1">
	<tr>
		<td width="100">yksi</td>
		<td width="200">kaksi</td>
		<td width="300">kolme</td>
	</tr>
	<tr>
		<td>neljä</td>
		<td>viisi</td>
		<td>kuusi</td>
	</tr>
</table>

Kuten huomaat, riittää että leveyden määrittää yhden kerran - joka riville sitä ei tarvitse tehdä erikseen. Seuraavaksi suhteellinen leveys sekä mahdollisuus käyttää soluissa eri taustavärejä ja/tai -kuvia.

<table width="300" border="1">
	<tr>
		<td width="25%" bgcolor="#70F000">yksi</td>
		<td width="50%" bgcolor="#00a0ff">kaksi</td>
		<td width="25%" background="../pics_ext/alienrings.jpg">kolme</td>
	</tr>
	<tr>
		<td>neljä</td>
		<td>viisi</td>
		<td>kuusi</td>
	</tr>
</table>

Solujen yhdistäminen (merge)

Voit myös yhdistää kaksi solua (tai useampiakin) yhdeksi. Sen voi tehdä yhdistämällä kaksi rinnakkaista solua, toisin sanoen kaksi saraketta yhteen (colspan) tai kaksi riviä yhteen (rowspan):

<table width="300" border="1">
	<tr>
		<td bgcolor="#70F000" colspan="2">yksi + kaksi</td>
		<td bgcolor="#00a0ff">kolme</td>
		<td bgcolor="#70F000" rowspan="2">neljä</td>
	</tr>
	<tr>
		<td bgcolor="#00a0ff">yksi</td>
		<td bgcolor="#00a0ff">kaksi</td>
		<td bgcolor="#00a0ff">kolme</td>
	</tr>
	<tr>
		<td bgcolor="#70F000" colspan="4" align="center">yksi + kaksi + kolme + neljä</td>
	</tr>
</table>

Kuten varmaan muistat, HTML:ssä pystyy useimmiten sijoittamaan elementtejä ikään kuin sisäkkäin. Näin on myös taulukkojen kanssa: voit sijoittaa yhden (yksittäisen tai yhdistetyn) solun sisään kokonaan toisen taulukon:

<table border="1" bgcolor="#00ffff">
	<tr>
		<td>solu 1</td>
		<td>solu 2</td>
	</tr>
	<tr>
		<td>
			<table bgcolor="#ff7700">
				<tr>
					<td>solu A</td>
					<td>solu B</td>
				</tr>
				<tr>
					<td>solu C</td>
					<td>solu D</td>
				</tr>
			</table>
		</td>
		<td>
			solu 4
		</td>
	</tr>
</table>

Taulukot ovat hyvin monikäyttöisiä. Niiden avulla voit

• sijoittaa tekstin kahtaan palstaan
• sijoittaa kuvia ja tekstiä rinnakkain
• tehdä perinteisiä taulukoita otsikkoineen
• tehdä navigointimenun (valikkoja sivun ylä- tai alaosaan)
• tehdä navigointimenun sivun vasempaan reunaan
• määrittää sivulla näkyvän rivin pituuden eli sijoittaa kaiken tekstin taulukon yhden solun sisään, ja määrittää taulukon ja/tai sarakkeen maksimileveyden
• tehdä reunaviivat tekstin tai kuvan ympärille
• jakaa ison ja hitaasti latautuvan kuvan osiin ja ladata sen pikkuhiljaa osissa taulukkoon. Samalla voit tehdä eri kohtiin tuota kuvaa (taulukkoa) linkkejä ja painikkeita.

Koska taulukkojen käyttö ja hallinta on välttämätöntä näyttävien sivujen tekemiseksi, harjoitellaan sitä tässä ihan erikseen.