Päivitetty: 10.03.2003.

Table

CSS2 sisältää joukon uudistuksia, joiden on tarkoitus helpottaa taulukoiden määrittämistä. Tällä sivulla käydään läpi kaikki W3C:n taulukoiden määrittämiseen tarkoitetut ominaisuudet. Valitettavasti selainten CSS-tuki ei ole vielä niin hyvä, että olisi täysin 'turvallista' korvata HTML-taulukon muotoilu komennot kokonaan CSS:llä


Table

CSS ja taulukot

CSS2:n taulukon vaikutus mahdollisuudet voidaan karkeasti jakaa kolmeen ryhmään.

1. Display ominaisuudet

CSS2 mahdollistaa ns. anonyymitaulukoiden luomisen. Eli CSS2:n avulla voidaan määritellä halutut elementit tai luokat, jotka muodostavat tekstistä taulukon. Tämä toiminto on tarkoitettu pitkälti XML kehittäjille, mutta sitä voidaan hyödyntää myös HTML-kielessä.

2. HTML:n korvaaminen CSS:llä

Tämä sivu esittelee CSS ominaisuudet joiden on tarkoitus korvata perinteisen HTML:n taulukon muotoiluun käytettyjä attribuutteja CSS:n ominaisuuksilla.

3. Taulukon ulkoasu

Taulukon ulkoasua voidaan määritellä lähes rajattomasti eri CSS-ominaisuuksin avulla. Esimerkiksi taulukon reunukset, taustat, värit ja fontit voidaan määritellä CSS:n avulla, aivan kuten muutkin elementit.

Huomaa, että uuden XHTML määrityksen mukaan osa perinteisesti taulukon määrittämiseen käytetyistä attribuuteista ei ole enää käytössä. Esim. korkeuden määrittäminen tulisi tehdä vain CSS:n avulla.

<< Alkuun


Display ominaisuudet

HTML -kielessä on jo valmiina taulukon määrittämiseen tarvittavat elementit. Niinpä alla olevat display -ominaisuudet ovat lähinnä tarkoitettu XML -dokumenttien elementtien määrittämiseen.

table
Vastaa HTML:n <TABLE> -elementtiä. Elementti, joka saa arvon table määritellään lohkotason (Block) elementiksi.
inline-table
Vastaa HTML:n <TABLE> -elementtiä. Elementti, joka saa arvon inline-table määritellään rivinsisäiskeksi (inline) elementiksi.
table-row
Vastaa HTML:n <TR> -elementtiä.
table-row-group
Vastaa HTML:n <TBODY> -elementtejä
table-header-group
Vastaa HTML:n <THEAD> -elementtiä.
table-footer-group
Vastaa HTML:n <TFOOT> -elementtiä.
table-column
Vastaa HTML:n <COL> -elementtiä. Määrittää sarakkeiden arvoja. Voidaan käyttää yksistään tai ryhmitellä colgroup -elementillä.
table-column-group
Vastaa HTML:n <COLGROUP> -elementtiä. Eli se ryhmittää <COL> -elementtejä.
table-cell
Vastaa HTML:n <TH> ja <TD> -elementtejä. Eli se kuvaa taulukoiden solujen loogista rakennetta.
table-caption
Vastaa HTML:n CAPTION -elementtejä. Eli määrittää taulukolle otsikon tai selitetekstin.

...

<< Alkuun


caption-side

Määrittelee taulukon otsikon (caption) sijainnin.

Yhteensopivuus: CSS2
Sallitut arvot: top | bottom | left | right | inherit
Oletusarvo: top
Käyttö: 'table-caption' elements
Periytyvä: Ei
%-arvo: Ei
Media: Visual
top
Otsikko sijoitetaan taulukon yläpuolelle.
bottom
Otsikko sijoitetaan taulukon alapuolelle.
left
Otsikko sijoitetaan taulukon vasemmalle puolelle.
right
Otsikko sijoitetaan taulukon oikealle puolelle.

caption-side esimerkki

caption { caption-side: bottom; }

<< Alkuun


table-layout

Määrittelee skaalautuuko taulukon solu sisällön mukaan vai ei

Yhteensopivuus: CSS2
Sallitut arvot: auto | fixed | inherit
Oletusarvo: auto
Käyttö: 'table' ja 'inline-table' elements
Periytyvä: Ei
%-arvo: Ei
Media: Visual
auto
Taulukon solut venyvät sisällön mukaan.
fixed
Solujen sisältö ei vaikuta taulukon kokoon. Jos solun sisällön koko on suurempi kuin solu, sisältä leikataan pois. Tosin Opera ja Netcape näyttävät ylimenevän sisällän seuraavassa solussa.

table-layout esimerkki

td { table-layout: fixed; }

<< Alkuun


border-collapse

Määrittelee ovatko vierekkäiset reunat vierekkäin vain päällekkäin

Yhteensopivuus: CSS2
Sallitut arvot: collapse | separate | inherit
Oletusarvo: collapse
Käyttö: 'table' ja 'inline-table' elements
Periytyvä: Kyllä
%-arvo: Ei
Media: Visual
separate
Reunukset ovat erillään toisistaan. En tiedä on W3C:n ohjeissa bugi mutta ainakin testaamani selaimet (IE 6, NN 6.2, Opera 6.0 ja Mozilla 1.0) käyttävät oletusarvona 'separete'
collapse
Reunukset menevät osittain limittäin

border-collapse esimerkki

table { border-collapse: collapse; }

<< Alkuun


border-spacing

Taulukon reunojen välinen etäisyys toisistaam.

Yhteensopivuus: CSS2
Sallitut arvot: <pituus> <pituus>? | inherit
Oletusarvo: 0
Käyttö: 'table' ja 'inline-table' elements
Periytyvä: Kyllä
%-arvo: Ei
Media: Visual
pituus
Solujen ja rivijen vaaka- ja pystysuuntainen etäisyys toisistaan ja taulukon ulkoreunoista
pituus pituus
Ensimmäinen pituus määrittää leveyden ja toinen korkeuden

<< Alkuun


empty-cells

Määrittää näytetäänkö taulukossa oleva tyhjä solu vai ei.

Yhteensopivuus: CSS2
Sallitut arvot: show | hide | inherit
Oletusarvo: show
Käyttö: 'table-cell' elements
Periytyvä: Kyllä
%-arvo: Ei
Media: Visual
show
Solu ja sen reunukset näytetään vaikka se ei sisällä mitään. Tämä ei kuitenkaan toiminut millään testaamallani selaimella
hide
Solua ei näytetä, jos niissä ei ole sisältöä. Nykyiset selaimet käyttävät tätä myös oletusarvona. Huomaa, että monet editorit laittavat soluun oletuksena esim. &nbsp; -merkin jolloin solu ei ole tyhjä vaikka se siltä näyttääkin.

<< Alkuun


speak-header

Määrittelee puhesyntetisaattorien tavan lukea <TH> -otsikot

Yhteensopivuus: CSS2
Sallitut arvot: once | always | inherit
Oletusarvo: once
Käyttö: elements that have table header information
Periytyvä: Kyllä
%-arvo: Ei
Media: aural
once
Otsikko lausutaan yhden kerran, ennen soluja.
always
Otsikko lausutaan aina ennen asiaan kuluvaan solua.

<< Alkuun



© Petteri Perälä 2000 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!