CSS: Taulukoiden muotoilu 2008-01-31 23:41

Taulukoiden muotoilemiseen on omia ominaisuuksia joita voi kohdistaa taulukon eri elementeille. Tavallisempien ominaisuuksien yhteydessä olennaiseksi muodostuu usein se, mitä table-elementin sisältämistä lukuisista elementeistä tulisi käyttää valitsimena.

Tables

Taulukot W3C:n CSS-spesifikaatiossa.

Väliotsikon sijainti caption-side: top | bottom | left | right

XHTML-asiakirjassa caption-elementtiin sijoitettava taulukon otsikko sijoitetaan oletuksena keskitettynä taulukon alkuun top. Se voidaan kuitenkin sijoittaa myös loppuun bottom, ja sen tasausta voidaan muuttaa.

caption {
	caption-side: bottom;
	text-align: left;
}

Vaakasuuntainen tasaus text-align

Myös th-elementeiksi merkityt otsikkosolut ovat oletuksena keskitettyjä. Niiden tasausta voidaan muuttaa kuten myös td-elementtien. Valitsimelle table voidaan määrittää molemmat samalla kertaa.

table {
	text-align: left;
}

Määritys ei kuitenkaan periydy taulukon sisältämille caption-elementeille.

Solujen pystysuuntainen tasaus vertical-align

Solujen sisältö voidaan tasata myös pystysuunnassa ominaisuudella vertical-align. Arvoja voivat olla mm. baseline, top, bottom ja middle.

Taulukon reunukset border, border-collapse, border-spacing

Itse reunus toteutetaan border-ominaisuudella, jonka voi määrittää erikseen elementeille table (reunus koko taulukon ympärille), caption (reunus taulukon otsikon ympärille), td ja th (taulukon solujen ympärille). Alla yksinkertainen esimerkki:

table, caption, td, th {
	border: 1px solid;
}

Ominaisuudella border-collapse voidaan määrittää solujen reunukset yhteen arvolla collapse tai erilleen arvolla separate.

table {
	border-collapse: collapse;
}

Ominaisuus border-spacing määrittää reunusten etäisyyttä toisistaan. Ominaisuudelle voidaan antaa kaksi arvoa, jolloin ensimmäinen määrittää kahden vierekkäisen oslun oikean ja vasemman reunuksen välistä etäisyyttä, ja jälkimmäinen ylä- ja alareunusten.

table {
	border-spacing: 1em .5em;
}

Taulukon marginaalit

Taulukon marginaaleja määritettäessä kannattaa huomioida että käytettäessä valitsimena table-elementtiä, caption-elementti ei kuulu table-elementin sisäpuolelle.