[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 10. Miten CSS annetaan taulukkoelementeille > HTML 4.01 taulukkoelementit (jakso 1/4)

HTML 4.01 taulukkoelementit

Taulukkoelementteihin voi soveltaa kaikkia aikaisemmin esille tulleita ominaisuuksia kuten erilaisia reunuksia, taustamääreitä ja tekstimääreitä - katso vaikka aiemmin esittämäni esimerkki[S][Pw]. Periaatteessa CSS-ominaisuudet voi sovittaa kaikille HTML 4.0 taulukkoelementeille (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH, TR ja TD). Suosittelen vain elementtien TABLE, TH ja TD määrittämistä, sillä yleisesti ottaen selaimet tukevat vain osittain HTML 4.0:n taulukkomallia.

Tosin mitä useampaa elementtiä käytetään, sen useampitasoisia taustoja voi luoda (seuraavan mallin[S][Pw] vasemmassa alalaidassa on pieni esimerkki myös tästä).

W3C: CSS2: 17 Tables, 17.5.1 Table layers and transparency[Pw].

Taulukon otsikossa (CAPTION) toimivat useimmat ominaisuudet. CSS2 tarjoaa mahdollisuuden myös vaihtaa sen sijaintipaikkaa caption-side ominaisuuden avulla ([M][S][Pw]).

Taulukoissa solut ovat taulukkorivien jälkeläisiä, mutta CSS2 tarjoaa mahdollisuuden vaikuttaa myös taulukkosarakkeiden sisältöön ns. sarakevalitsimien (column selectors) avulla. Ne liitetään elementtiin COL, joka tulee välittömästi elementin TABLE perään. Alla yksi esimerkki niiden käyttämisestä ([M][S][Pw] - oikealla alimpana oleva malli koskee sarakevalitsimien toimintaa):

*#col1 { border: 3px solid black;}
*#col2 { border: 3px solid red;}
*#col3 { border: 3px solid olive;}...
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">...

On myös rivivalitsimia (row selectors). Niihin voi liittää first-child-näennäisluokan. Seuraavassa on esimerkki, jonka mukaan taulukkorivit saavat eri värisiä reunuksia ja taustavärejä ([M][S][Pw]):

tr:first-child {background-color: white; border-top: solid black 3px;}
tr {background-color: aqua; color:black;border:yellow 3px solid;}
*#row1 {border: 3px green solid; background-color:aqua;}
*#row2 {border: 3px solid green; background-color:white;}
*#row3 {border: 3px solid blue; background-color:lime;}
*#row4 {border: 3px solid blue; background-color:yellow;}
*#row5 {border: 3px solid blue; background-color:green;}

Selainkohtaisia huomautuksia:

  1. Opera 3.x ja Netscape 4.x tukevat rajoitetusti perustaulukkoelementtejä (TABLE, TH ja TD). Esim. CSS-reunukset eivät toimi em. elementeille.

  2. Elementti CAPTION on toteutettu HTML 4.0 spesifikaation mukaisesti Operassa ja Netscapessa. MS IE toteuttaa sen ikään kuin erityisenä taulukkosoluna. Erilaiset toteutukset tekevät sen käytön ongelmalliseksi.

  3. Elementin CAPTION paikan muuttaminen toimii vain Opera 4.x+ ja Mozilla Gecko -selaimissa ([M][S][Pw]). Jos käytetään TFOOT elementtiä, Opera 4.x-6.x eivät toimi oikein ja lopputulos on sekava (korjattu Opera 7.x:ssä).

  1. Elementin COL tuki on sangen rajoittunutta. Aiemmin esittämäni mallisivu ([M][S][Pw]), jossa oikealla alimpana oleva malli koskee sarakevalitsimia toimii Operassa ja Mozilla Gecko -selaimissa, mutta ei MS IE:ssä.

  2. Testeissäni kävi ilmi, että padding ei toimi Operassa elementille COL, mutta MS IE 5.5+:ssa toimii.

  3. Elementti COLGROUP on heikoimmin tuettu. Testeissäni MS IE 5.x osaa keskittää mallidokumentin[S][Pw] tekstin ja Mozilla 1.1 osaa antaa sille reunusominaisuudet.

  4. Opera 4.x+ toteuttaa erään mallisivun[S][Pw] reunusvärit oikein. MS IE näyttää taustavärit oikein ensimmäistä riviä lukuun ottamatta.

  5. Vain Mozilla Gecko ja Opera 7.x+ -selaimet toteuttavat :first-child edellisessä listakohdassa mainitun mallisivun näennäisluokan. Täten nämä selaimet osaavat parhaiten taulukoihin liittyvät säännöt.

[Alku]