Taulukko-osa (engl. Table Module)

• Caption - Taulukon seloste
• Col - Taulukon sarake
• Colgroup - Taulukon sarakeryhmä
• Table - Taulukko
• Td - Taulukon solu
• Tfoot - Taulukon alatunniste
• Th - Taulukon otsikkosolu
  • Lisätietoja
• Thead - Taulukon ylätunniste
• Tr - Taulukon rivi

Caption - Taulukon seloste

<caption>

</caption>

Caption-elementti määrittelee taulukolle lyhyen selosteen. Hyvä seloste voi toimia samalla myös table-elementin summary-ominaisuuden korvikkeena, mutta monimutkaisille taulukoille pitää myös summary määritellä.

Col - Taulukon sarake

<col

[ span= Numero ]

[ width= Leveys ]

[ align= left | center | right | justify | char ]

[ char= Merkki

[ charoff= Paikka [

[ valign= top | middle | bottom | baseline ]

 />

col-elementillä voidaan ryhmitellä yhteen usean sarakkeen ominaisuuksia. col-elementillä ei ole rakenteellista merkitystä.

span-ominaisuus määrittelee kuinka monen sarakkeen alueelle col-elementin ominaisuudet vaikuttavat. Numeron on oltava yhtäsuuri tai suurempi kuin 1.

width-ominaisuus määrittelee oletusleveyden col-elementin vaikutusalueella oleville sarakkeille. Tämä määritys ohittaa mahdollisen colgroup-elementissä olevan width-määrityksen.

align-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

char-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

charoff-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

valign-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

<table>
<col span="2" width="10%" />
<tr>
<td>foo</td>
<td>foobarfoo</td>
</tr>
</table>

Colgroup - Taulukon sarakeryhmä

[ span= Numero ]

[ width= Leveys ]

[ align= left | center | right | justify | char ]

[ char= Merkki ]

[ charoff= Paikka ]

[ valign= top | middle | bottom | baseline ]

</colgroup>

colgroup-elementillä voidaan ryhmitellä yhteen useampia sarakkeita ja niiden ominaisuuksia.

span-ominaisuus määrittelee kuinka monen sarakkeen alueelle col-elementin ominaisuudet vaikuttavat. Numeron on oltava yhtäsuuri tai suurempi kuin 1.

width-ominaisuus määrittelee oletusleveyden col-elementin vaikutusalueella oleville sarakkeille.

align-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

char-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

charoff-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

valign-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

<table>

<tr>


<colgroup span="2">


<col width="10%" />


</colgroup>


<td>foo</td>


<td>foobarfoo</td>


</tr>


</table>

Table - Taulukko

<table

[ summary= Teksti ]

[ width= Leveys ]

[ border= Leveys ]

[ frame= void | above | below | hsides | lhs |

rhs | vsides | box | border ]

[ rules= none | groups | rows | cols | all ]

[ cellspacing= Pituus ]

[ cellpadding= Pituus ]

>

</table>

Table-elementti määrittelee taulukon. Taulukkoja ei pidä käyttää dokumentin ulkomuotoilemiseen vaan pelkästään taulukkomuotoisen tiedon esittämiseen.

summary-ominaisuus sisältää sanallisen kuvauksen taulukon tarkoituksesta ja mahdollisesti myös muodosta.

width-ominaisuus määrittelee taulukon leveyden absoluuttisesti pikseleinä tai prosentteina saatavilla olevasta tilasta. Leveyden määrittelyä pikseleinä tulee välttää, koska se voi aiheuttaa taulukon venymisen liian leveäksi pakottaen jotkut käyttäjät vierittämään ikkunaa vaakasuunnassa. Suositeltavinta olisi määritellä taulukon leveys CSS:llä eikä width-ominaisuuden avulla.

border-ominaisuus määrittelee taulukon ulkokehyksen leveyden pikseleissä. border-ominaisuuden käyttöä tulisi välttää ja suosia sen sijaan CSS:ää.

frame-ominaisuus määrittelee mitkä osat taulukon kehyksistä ovat näkyvissä. frame-ominaisuuden käyttöä tulisi välttää ja suosia sen sijaan CSS:ää. Oletusarvo on void paitsi jos border-ominaisuudella on positiivinen arvo jolloin oletus on border.

• void, ei reunuksia

• above, vain yläreunus

• below, vain alareunus

• hsides, vain vasen ja oikea reunus

• lhs, vain vasen reunus

• rhs, vain oikea reunus

• vsides, vain ylä- ja alareunus

• box tai border, kaikki reunukset

rules-ominaisuus määrittelee taulukon solujen väliset kehykset. rules-ominaisuuden käyttöä tulisi välttää ja suosia sen sijaan CSS:ää. Oletus on none jos koko taulukon reunukset ovat pois päältä. Muissa tapauksissa oletus on all.

• none, ei ollenkaan reunuksia

• groups, reunukset vain rivi- ja sarakeryhmien välillä

• rows, reunukset vain rivien välillä

• cols, reunukset vain sarakkeiden välillä

• all, reunukset kaikkialla

cellspacing-ominaisuus määrittelee pikseleissä tai prosentteina kuinka paljon tilaa jätetään taulukon solujen välille. cellspacing-ominaisuuden käyttöä tulisi välttää ja suosia sen sijaan CSS:ää.

cellpadding-ominaisuus määrittelee pikseleissä tai prosentteina kuinka paljon tilaa jätetään taulukon solun sisällön ja solun reunuksen välille. cellpadding-ominaisuuden käyttöä tulisi välttää ja suosia sen sijaan CSS:ää.

<table border="1" summary="Tekstikuvaus taulukon sisällöstä">

<caption>Taulukkoon liittyvä otsikko</caption>

<tr>

<th>Esimmäisen sarakkeen otsikko</th>

<th>Toisen sarakkeen otsikko</th><

/tr>

<tr>

<td>1. rivin 1. solu</td>

<td>1. rivin 2. solu</td>

</tr>

<tr>

<td>2. rivin 1. solu</td>

<td>2. rivin 2. solu</td>

</tr>

<tr>

<td>3. rivin 1. solu</td>

<td>3. rivin 2. solu</td>

</tr>

</table>

<table border="1" summary="tekstikuvaus taulukon tarkoituksesta ja sisällöstä" border="1">

<tr>

<th>Ensimmäisen sarakkeen otsikko</th> <th>Toisen sarakkeen otsikko</th> <th>Kolmannen sarakkeen otsikko</th>

</tr>

<tr>

<td>1. rivin 1. solu</td>

<td>1. rivin 2. solu</td>

<td>1. rivin 3. solu</td>

</tr>

<tr>

<td>2. rivin 1. solu</td>

<td>2. rivin 2. solu</td>

<td>2. rivin 3. solu</td>

</tr>

<tr>

<td>3. rivin 1. solu</td>

<td>3. rivin 2. solu</td>

<td>3. rivin 3. solu</td>

</tr>

<tr>

<td colspan="3">4. rivin 1. solu joka laajenee kolmen sarakkeen alueelle</td>

</tr>

<tr>

<td>5. rivin 1. solu</td>

<td rowspan="2">5. rivin 2. solu, joka laajenee kahdelle riville</td>

<td>5. rivin 3. solu</td>

</tr>

<tr>

<td>6. rivin 1. solu</td>

<td>6. rivin 3. solu</td>

</tr>

</table>

<tbody

[ align= left | center | right | justify | char ]

[ char= Merkki ]

[ charoff= Paikka ]

[ valign= top | middle | bottom | baseline ]

>

</tbody>

Tbody-elementti määrittelee joukon taulukon rivejä. Taulukossa pitää olla vähintään yksi tbody, jos taulukolle on määritelty thead ja/tai tfoot.

align-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

char-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


charoff-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


valign-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

Td - Taulukon solu

<td

[ rowspan = Numero ]

[ colspan = Numero ]

[ headers = ID-luettelo

[ abbr= Teksti ]

[ scope= row | col | rowgroup | colgroup ]

[ axis= Merkkijono ]

[ align= left | center | right | justify | char ]

[ char= Merkki ]

[ charoff= Paikka ]

[ valign= top | middle | bottom | baseline ]

>

</td>

Td-elementti määrittelee taulukon solun.

rowspan-ominaisuus määrittelee kuinka monen rivin alueelle kyseinen solu laajenee. 0 tarkoittaa, että solu laajenee kaikkien rivien suuruiseksi.

colspan-ominaisuus määrittelee kuinka monen sarakkeen alueelle kyseinen solu laajenee. 0 tarkoittaa, että solu laajenee kaikkien sarakkeiden suuruiseksi.


headers-ominaisuus sisältää niiden solujen ID:t, jotka toimivat tämän solun otsikkona.


abbr-ominaisuus sisältää lyhennetyn version solun sisällöstä.


scope-ominaisuus määrittelee ne solut joiden otsikkona kyseinen td toimii. Mahdollisia arvoja ovat:

• row, toimii otsikkona koko loppuriville

• col, toimii otsikkona koko loppusarakkeelle

• rowgroup, toimii otsikkona koko riviryhmän loppuosalle

• colgroup, toimii otsikkona koko sarakeryhmän loppuosalle

axis-ominaisuutta käytetään solujen luokitteluun.

align-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


char-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


charoff-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


valign-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

<table border="1" summary="tekstikuvaus taulukon tarkoituksesta ja sisällöstä" border="1">

<tr>

<td>1. rivin 1. solu</td>

<td>1. rivin 2. solu</td>

<td>1. rivin 3. solu</td>

</tr>

</table>

Tfoot - Taulukon alatunniste

<tfoot

[ align= left | center | right | justify | char ]

[ char= Merkki ]

[ charoff= Paikka ]

[ valign= top | middle | bottom | baseline ]

>

</tfoot>

Tfoot-elementti määrittelee taulukon riveistä ryhmän, jota voidaan käyttää esimerkiksi tulosteissa jokaiselle sivulle alatunnisteeseen tulevana informaationa. Taulukossa saa olla yksi tfoot.

align-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

char-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


charoff-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


valign-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

Th - Taulukon otsikkosolu

<th

[ rowspan = Numero ]

[ colspan = Numero ]

[ headers = ID-luettelo

[ abbr= Teksti ]

[ scope= row | col | rowgroup | colgroup ]

[ axis= Merkkijono ]

[ align= left | center | right | justify | char ]

[ char= Merkki ]

[ charoff= Paikka ]

[ valign= top | middle | bottom | baseline ]

>

</th>

Th-elementti määrittelee otsikkosolun.

rowspan-ominaisuus. Kts. Td - Taulukon soluTd - Taulukon solu

colspan-ominaisuus. Kts. Td - Taulukon soluTd - Taulukon solu


header-ominaisuus. Kts. Td - Taulukon soluTd - Taulukon solu


abbr-ominaisuus. Kts. Td - Taulukon soluTd - Taulukon solu


scope-ominaisuus. Kts. Td - Taulukon soluTd - Taulukon solu


axis-ominaisuus. Kts. Td - Taulukon soluTd - Taulukon solu


align-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


char-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


charoff-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


valign-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

<table border="1" summary="tekstikuvaus taulukon tarkoituksesta ja sisällöstä" border="1">

<tr>

<th>Ensimmäisen sarakkeen otsikko</th> <th>Toisen sarakkeen otsikko</th> <th>Kolmannen sarakkeen otsikko</th>

</tr>

<tr>

<td>1. rivin 1. solu</td><td>1. rivin 2. solu</td><td>1. rivin 3. solu</td>

</tr>

Lisätietoja

Categorizing cells <URL: http://www.w3.org/TR/REC-html40/struct/tables.html#multi-dimension>

Thead - Taulukon ylätunniste

<thead

[ align= left | center | right | justify | char ]

[ char= Merkki ]

[ charoff= Paikka ]

[ valign= top | middle | bottom | baseline ]

>

</thead>

Thead-elementti määrittelee taulukon otsikkoriveistä ryhmän, jota voidaan käyttää esimerkiksi tulosteissa jokaiselle sivulle ylätunnisteeseen tulevana informaationa. Taulukossa saa olla yksi thead.

align-ominaisuus määrittelee jokaisen thead-elementin sisällä olevan solun oletustasauksen vaakasuunnassa.

• left, tasaus vasempaan laitaan

• center, tasaus keskellä

• right, tasaus oikeaan laitaan

• justify, tasaus kumpaankin laitaan

• char, tasaus char-ominaisuudessa määritellyn merkin kohdalle.

char-ominaisuus määrittelee solun sisällön tasauksessa käytettävän merkin. Oletuksena maa-asetuksien mukainen desimaalierotin esimerkiksi Englannissa piste.

charoff-ominaisuus määrittelee pikseleinä tai prosentteina kohdan johon char-ominaisuudessa määritelty merkki tulee sijoittaa.


valign-ominaisuus määrittelee jokaisen thead-elementin sisällä olevan solun oletustasauksen pystysuunnassa. Oletusarvo on middle.

• top, tasaus solun yläreunaan

• middle, tasaus solun keskelle

• bottom, tasaus solun alareunaan

• baseline, kaikkien samalla rivillä olevien solujen ensimmäisen rivin on tultava samalle tasolle

Tr - Taulukon rivi

<tr

[ align= left | center | right | justify | char ]

[ char= Merkki ]

[ charoff= Paikka ]

[ valign= top | middle | bottom | baseline ]

>

</tr>

Tr-elementti määrittelee yhden taulukon rivin.

align-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

char-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


charoff-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste


valign-ominaisuus. Kts. Thead - Taulukon ylätunnisteThead - Taulukon ylätunniste

<table summary="esimerkkitaulukko">

<tr>

<td>Ensimmäinen solu</td>

<td>Toinen solu</td>

</tr>

</table>