![]() |
|
|
|
Päivitetty: 10.03.2003.
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ä
CSS2:n taulukon vaikutus mahdollisuudet voidaan karkeasti jakaa kolmeen ryhmään.
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ä.
Tämä sivu esittelee CSS ominaisuudet joiden on tarkoitus korvata perinteisen HTML:n taulukon muotoiluun käytettyjä attribuutteja CSS:n ominaisuuksilla.
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.
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.
...
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 |
caption { caption-side: bottom; }
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 |
td { table-layout: fixed; }
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 |
table { border-collapse: collapse; }
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 |
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 |
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 |