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

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

Määrittelee taulukon otsikon (caption) sijainnin.

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

<< Alkuun

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

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

<< Alkuun

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

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

<< Alkuun

Taulukon reunojen välinen etäisyys toisistaam.

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

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

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

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

once

Otsikko lausutaan yhden kerran, ennen soluja.

always

Otsikko lausutaan aina ennen asiaan kuluvaan solua.

<< Alkuun