[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 10. Miten CSS annetaan taulukkoelementeille > 10. yhtenä isona sivuna
Normaalille sivulle

10. Miten CSS annetaan taulukkoelementeille

Aiheet

Tämä sivu on jaettu jaksoihin, jotka sisältävät seuraavia aiheita:

Sisältö yhtenä isona sivuna

Yleistä

Taulukoita käytetään usein dokumenttien perusstruktuurin luomiseen, mihin ne eivät ole alun perin tarkoitettu. CSS toimii ylipäätänsä paremmin, jos taulukoita ei käytetä perusstruktuurin luomiseen. CSS:n kanssa on paljon helpompi luoda toimivia kehyksiin perustuvia ratkaisuja, jotka toimivat sangen hyvin vanhemmillakin (kuten esim. Netscape 2.x ja MS IE 3.02) selaimilla.

Kelluvat elementit vai taulukot?

Mikäli et halua käyttää kehyksiä ja katsot, että vanhojen selainten osuus on sangen pieni, peruselementtinä kannattaa käyttää yleistä lohkoelementtiä DIV. Sille voi antaa helposti CSS-kuvauksen. Käsittelen taulukon korvaamista CSS-muotoilukeinoilla sivulla Muotoilut[S][Pw]. Selaimilla on joitakin perusongelmia CSS:n soveltamisessa taulukoihin.

Selainkohtaisia huomautuksia:

  1. Tekstin muotoilu on taulukoissa ongelmallista, sillä tekstin vaaka-asemointiin tarkoitetut CSS-ominaisuudet, kuten esim. text-align:justify vaikuttavat MS IE 4.0 Windows-selaimessa virheellisesti myös taulukon paikkaan. Määrittelyt table {text-align:justify;} ja table {text-align:left;} siirtävät taulukon sivun vasempaan reunaan, vaikka taulukko olisi keskitetty käyttäen elementtiä CENTER tai vastaavaa attribuuttia elementin TABLE sisällä. Jos määrität text-align lapsielementeille (esim. table.right td {text-align:right}), taulukon käyttäytyminen on kunnossa.

  2. Netscape 4.x ei osaa periä tekstiin liittyviä ominaisuuksia emoelementeiltä taulukoihin. Jopa MS IE 5.x:llä ja ainakin joillakin Opera 5x -selaimilla on osittain sama ongelma. Ongelmasta selviää siten, että määrittelee tekstin elementille TD. Koska Opera 3.6x ei tue elementtiä TD, taulukkomääreet on tarpeellista määritellä myös elementille TABLE, mikäli ne poikkeavat BODY elementin ominaisuuksista.

  1. Helpoimmalla pääset, kun toimit seuraavan esimerkin mukaisesti:

    body, table, th, td, p, ol, li, blockquote/* määrittelemällä nämä yhtenä ryhmänä selvitään Netscape 4.x ja MS IE 4.0/5.0 perintäongelmista; sinun täytyy ehkä lisätä myös joitakin muita elementtejä tähän ryhmään, sillä en ole käyttänyt asiakirjoissani läheskään kaikkia mahdollisia elementtejä */
    {font-size: small;
    font-family: Verdana, Arial, Helvetica; /* Opera perii sen muille elementeille; määrittele jotkin näistä uudelleen, mikäli tarvitset joillekin elementeille poikkeavia arvoja */}

    body {background: #dcd2d3 url(taustakuva.gif); /* vain body elementtiä koskevat määreet */
    text-align:justify;} /* text-align annetaan BODY-elementeille ja tarvittaessa eräille alielementeille */
[Alku]

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]

Taulukoiden reunusmallit ja tyhjät solut

CSS2 tarjoaa taulukkosolujen reunojen määrittelemiseen kaksi mallia, joissa annetut arvot periytyviä taulukon lapsielementeille. Seuraavassa kaksi esimerkkiä näistä ([M][S][Pw]):

table {border-collapse: separate; border-spacing: 15pt} /* reunukset eivät mene päällekkäin; border-spacing (vastaa HTML-attribuuttia cellspacing) */
table {border-collapse: collapse;} /* reunukset menevät päällekkäin; CSS2:ssa on tietyt säännöt konfliktien sattuessa, mitkä ominaisuudet valitaan eli näilläkin ominaisuuksilla on porrastettu valintajärjestys */
W3C: CSS2: 17 Tables, 17.6 Borders[Pw].

Taulukkosolut erottavassa reunusmallissa (border-collapse:separate) voi kontrolloida myös tyhjien solujen käyttäytymistä ominaisuudella empty-cells (mahdolliset erityisarvot ovat show (CSS2:n mukaan oletusarvo) ja hide). Jos käytetään border-collapse:separate, elementtiä TR ei huomioida, koska tämä malli toimii vain elementeille TABLE ja TD/ TH.

Elementti TR kuten moni muukin elementti toimii vain border-collapse:collapse mallin kanssa. CSS2-spesifikaation mukaan selainten, jotka toteuttavat reunusmallit, oletusarvona (initial value) tulisi olla border-collapse:collapse.

Selainkohtaisia huomautuksia:

  1. Erillisten reunojen malli toimii ainakin Opera 4.x+ ja Mozilla Gecko -selaimissa. Opera piilottaa oletusarvoisesti tyhjät solut. Mozilla Gecko -selaimissa tämä asia on DTD-riippuvainen[S].

  2. MS IE 5.x+ ei tue border-spacing ja empty-cells ominaisuuksia. Border-collapse:separate toimii vain vastakohtana border-collapse:collapse määrittelylle, mutta erottava reunusmalli ei ole kokonaisuudessaan tuettu. Soluvälit täytyy määritellä cellspacing HTML-attribuutilla.

  3. Yhdistävä reunusmalli toimii ainakin MS IE 5.x+, Opera 4.x+ ja erään s-postin mukaan Mozilla 0.9.9+ -selaimissa. Netscape-selaimista sitä tukevat ensimmäisenä Netscape 7.0. Uusimmat Mozilla Gecko -selaimet eivät aina näytä kaikkia reunuksia ainakaan taulukoissa, joissa solun jokaiselle sivulla ei ole määritelty reunuksia. Myös Operalla ja MS IE:llä on toisinaan samoja ongelmia. Opera 4.x-6.x on ongelmana myös se, että taulukkosolujen välit tulisi keskittää ([M][S][Pw]). MS IE ja Opera 7.x toteuttavat yhdistävän reunusmallin monimutkaisissa tapauksissa siisteimmin.

  4. Mozilla Gecko -selaimet käyttävät oletusarvonaan border-collapse:separate; border-spacing:2px. Se on sama lähtöarvo kuin yleisesti ottaen kaikilla selaimilla, kun CSS:ää ei ole käytetty. Se vastaa samaa kuin oletusarvo cellspacing="2". Mikään selain ei käytä oletusarvona border-collapse:collapse koska selaimet, jotka eivät ymmärrä mitään CSS2:n taulukoiden reunusmalleista käyttäytyvät samoin kuin taulukot, joilla on border-collapse:separate.

  1. CSS-reunukset eivät toimi taulukoissa Opera 3.6x ja Netscape 4.x -selaimilla.

  2. MS IE 4.0 Windows ei tue reunusmalleja, mutta reunusten ominaisuudet voi muuten määritellä CSS:llä.

  3. Elementin TABLE attribuuttia border käsitellään ikään kuin joukkona esimääriteltyjä CSS-ominaisuuksia. Tämä on reunusten käsittelyn yleisperiaatteen[S] johdonmukaista toteuttamista. Esim. <TABLE border="10"> -määritystä vastaa seuraavaa CSS:

    table {border-collapse:separate} /* ei välttämätön, koska selaimet käyttävät tätä oletuksena */
    table {border:10px solid; border-color: #bbb #7e7e7e #7e7e7e #bbb} /* HTML:llä määriteltyjen reunusten väri vaihtelee selainkohtaisesti. Tämä vastaa MS IE -selaimissa HTML-attribuutin värejä. Kokeilemalla voi löytää vastineen HTML:llä määritellyn reunuksen värille muissa selaimissa. Ks. enemmän reunustyyleistä sivulta 8[S] */
    th, td {border:1px solid; border-color: #7e7e7e #bbb #bbb #7e7e7e}     /* Elementin TABLE attribuutti border määrittää soluille aina yhden pikselin levyisen reunuksen ja vain ulkoreunalla voi olla paksu reunus */

  1. Mikäli haluat yhden pikselin tai reunuksettomat taulukkosolut, jotkut selaimet vaativat border="0" ja cellspacing="0" attribuutit. Yritä laatia reunukset systemaattisesti ja siten ettei vanhemmillakaan CSS:ää tukevilla selaimilla tule kaksinkertaisia reunuksia.

    th, td {border: solid black;} /* yhteiset ominaisuudet */
    td.left,th.left {border-width: 1px 1px 0px 1px;} /* vasemmanpuoleisimmat solut */
    td.right, th.right {border-width: 1px 1px 0px 0px;} /* muut */
    .leftLast {border-width: 1px 1px 1px 1px;} /* viimeinen solu vasemmalla */
    .rightLast{border-width: 1px 1px 1px 0px;} /* muut viimeisen rivin solut */
    ...
    <table cellspacing="0"...>
    <tr>
    <td class="left">...</td><td class="right">...</td>...
    ...
    <td class="leftLast">...</td>...<td class="rightLast"></td>
    </tr>
    </table>

    Tällä tavoin saat paremman ulkoasun Netscape 4.x -selaimille ja yhtäläisen reunusten esitystavan MS IE 4.x+ Windows -selaimille. Uusimmat selaimet (esim. Opera 6.x+) eivät tarvitse yhtään HTML-attribuuttia taulukon esitysasun määrittelemiseen, mutta vielä toistaiseksi ei ole mielekästä toteuttaa taulukoiden laatimista niiden ehdoilla.

[Alku]

Taulukoiden peruskäsittelytapa

Raunusmallien lisäksi CSS2 antaa mahdollisuuden muuttaa table-layout:fixed sitä, millä perusperiaatteella selain käsittelee taulukoita. (Oletusarvona on auto. Mikäli käytät ryhmitettyjä sääntöjä, voit kumota muutoksen joltakin tietyltä taulukolta tekemällä lisäsäännön. Ominaisuus ei automaattisesti periydy lapsitaulukoille.)

Selain ei etukäteen lue koko taulukkoa, mutta se tarvitsee välttämättä taulukon kokonaisleveysarvon, jonka se voi saada joko elementin TABLE avulla or sitten yksittäisten taulukkosolujen kautta. Taataksesi ongelmattoman toiminnan, sinun voi tarvita joissakin tilanteissa määritellä leveys sekä taulukolle että elementeille TH ja TD. Selain laskee niin pian kuin mahdollista taulukkosarakkeiden lukumäärän ja määrittelee sitten sarakeleveyden. Sarakkeiden leveys ei riipu lainkaan solujen sisällöstä vaan yksinomaan annetuista leveysarvoista sekä mahdollisista reunoista ja soluväleistä. Alla on yksinkertainen määrittelyesimerkki:

table.someClass {width:600px; table-layout:fixed;}
table.someClass th, table.someClass td {width:150px} /* mikäli taulukolle annettu arvo on pienempi kuin soluleveyksien kautta saatu kokonaisarvo, taulukon leveyttä kasvatetaan */

Tämä menetelmä vähentää modeemiyhteyksillä merkittävästi sitä aikaa, jolloin selain ei näytä tietokoneen näyttöruudulla yhtään mitään. Sivun kokonaislatausaika ei juuri muutu, mutta sivujen selaajan ei tarvitse odotella sitä, että selain lukee ensin koko taulukon ja vasta sen jälkeen näyttää sen. Selain pyrkii näyttämään mahdollisimman pian ensimmäisen ikkuna-alan. Menetelmä on hyvin käyttökelpoinen paljon tekstiä sisältävissä isoissa taulukoissa (esimerkkitaulukko[S]).

Jos haluat leveän taulukkosolun muiden solujen yläpuolelle, määrittele ennen pitkää riviä piilorivi:

.piiloA {width:200px; font-size:0px; line-height:0}
.piiloB {width:250px; font-size:0px; line-height:0}
.piiloC {width:100px; font-size:0px; line-height:0}
...
<table>
<tr>
<td class="piiloA"> </td>
<td class="piiloB"> </td>
<td class="piiloC"> </td>
</tr>
<tr>
<td colspan="3">Pitkä rivi</td>
</tr>
...
</table>

Nopealla taulukonlaskentamenetelmällä on eräitä haittapuolia. Jos taulukon lopussa on enemmän taulukkosarakkeita ja siten myös soluja kuin taulukon alussa, näitä ylimääräisiä soluja ei huomioida. Jos taulukossa on leveitä kuvia, ne eivät välttämättä mahdu taulukkosoluun.

Nopean taulukonkasaamismenetelmän käyttäminen on perustavalaatuinen suunnittelukysymys. Jokaisen projektin alussa pitää miettiä, käytetäänkö sitä vai ei. Jotta sivut latautuisivat nopeasti, on syytä välttää sisäkkäisiä taulukoita.

Nopean taulukkoluontimallin toimivuus kannattaa kuitenkin testata mahdollisimman monessa selaimessa. Periaatteessa mitä tarkemmat ohjeet selain saa, sitä paremmin systeemi toimii. Niiden sijasta tulisi käyttää DIV-elementtejä. Tämän mallin vaihtoehtona on rakentaa sivujen perusrakenne vain DIV-elementtien varaan. Käsittelen tätä mallia seuraavalla sivulla.

Selainkohtaisia huomautuksia:

  1. Table-layout:fixed toimii hyvin MS IE 5.5+, Opera 4.x+ ja Mozilla Gecko -selaimissa. Yleistoimivuus on paras Opera 4.x+ -selaimissa, sillä ne antavat mahdollisuuden rullata vain osittain luettua taulukkoa. MS IE 5.5+:ssa selaimen täytyy ensin kokonaan lukea taulukko ennen kuin sitä voi rullata.

  2. Operassa 4.x:ssä on pieni bugi. Vaikka periaatteessa on tarpeetonta määritellä ensimmäisten solujen (elementit TH or TD) leveys, Opera tarvitsee niille toisinaan width ominaisuuden, vaikka taulukon kokonaisleveys on annettu.

  3. Opera 4.x-6.x -selaimet leikkaavat ylimääräisen solun pois, jos jatkoriveillä on enemmän sarakkeita kuin mitä on ensimmäisellä taulukkorivillä. MS IE tekee niin pitkissä taulukoissa. Opera 7.x ja Mozilla Gecko -selaimet näyttävät aina kaikki taulukkosolut.

  1. MS IE leikkaa liian leveät kuvat. Opera 4.x+ ja Mozilla Gecko -selaimet näyttää kuvan loppuosat viereisissä soluissa. Tosin määrittelemällä overflow:hidden, Opera ja Mozilla käyttäytyvät samoin kuin MS IE.

  2. MS IE 5.5:ssä, Mozilla Gecko ja Opera 7.x+ -selaimissa tilannetta voi auttaa laittamalla jonkun kuvan ympärille elementti DIV ja sille esim. overflow:auto; width:150px. Jos kuvan leveys on tätä suurempi, kuvaa voidaan rullata. Haittana on se, että esillä on aina vähintään yksi vierityspalkki.

  3. Mozilla Gecko -selaimet vaativat matalille taulukkoriveille line-height ominaisuuden (Operalle riittäisi pieni fonttikoko).

[Alku]

Sisällön dimensioihin liittyviä ongelmia

CSS2 on jättänyt avoimeksi, miten ominaisuus height tulisi tulkita taulukoissa, joten selaimet voivat tulkita sen haluamallaan tavalla. Mielestäni se merkitsee taulukoissakin sisällön korkeutta (se on myös Opera Softwaren tulkinta).

Periaatteessa omainaisuus width tarkoittaa myös taulukoissa sisällön leveyttä (content width; width-ominaisuus on leveys, joka tulee varata konkreettiselle sisällölle, esim. tietyn levyiselle kuvalle). Koska elementillä TABLE ei ole välitöntä asiasisältöä (varsinaisen asiasisällön välissä on vähintään elementti TR), normaalisti vain mahdolliset reunukset kasvattavat taulukon muodostaman lohkolaatikon kokonaisleveyttä.

Ongelmia tuottaa kuitenkin se tosiasia, että elementin TABLE HTML-attribuutin width arvon laskemisessa ei noudateta samaa laskentakaavaa kuin CSS-ominaisuuden width laskennassa. HTML 4.01 spesifikaatiossa sanotaan attribuutista width seuraavaa:

This attribute specifies the desired width of the entire table...

Tuon pohjalta siihen lasketaan reunukset eikä kyse ole sisältöleveydestä kuten CSS:ssä.

Suorittaessaan taulukoiden dimensioiden laskentaa selainten on otettava huomioon seuraavat seikat:

  1. Koska sekä HTML:n border-attribuutti että CSS:n border-omaisuudet vaikuttavat taulukon sisältö- ja kokonaisleveyteen, selaimen joka ymmärtää CSS:ää, tulee huomioda molemmat reunusten määrittelytavat sekä kaikki mahdolliset täytteet, jotta width attribuutti tai ominaisuus voitaisiin laskea oikein. Tämän asian ei pitäisi olla ongelma moderneille selaimille, sillä niiden tulisi pystyä käsittelemään border-attribuuttia ikään kuin joukkona esimääriteltyjä CSS-ominaisuuksia.
  2. Selaimen tulee huomioida HTML:n ja CSS:n erilaiset leveyden laskentakaavat ja pyrkiä toteuttamaan laskentakaavat sen mukaan kuin spesifikaatiot edellyttävät.
  3. Koska CSS pitää pystyä määrittelemään muualta käsin, CSS-omainaisuuksille ja CSS:n mukaiselle laskentakaavoille pitää olla etusija. Jos sekä width-attribuutti että width-ominaisuus on määritelty, seurataan width-ominaisuuden antamia arvoja ja laskentatapaa.
Selainkohtaisia huomautuksia:

  1. Opera 5.1x - ja MS IE Windows -selaimet tulkitsevat reunuksellisten taulukkoelementtien leveyden lähes aina eri lailla - jopa HTML-attribuutteja käytettäessä:

    • border="2" width="600" tai border="2" style="width:600px" tai style="border:2px solid black; width:600px;" = 604 pikseliä Operalla.
    • border="2" width="600" tai border="2" style="width:600px" tai style="border:2px solid black; width:600px;" = 600 pikseliä MS IE Windowsilla.

    Esimerkkitapauksessa Opera toimii väärin HTML:n ja MS IE CSS:n suhteen.

  2. Mozilla Gecko - sekä MS IE 6.0 Windows -selaimet seuraavat ns. standard-compliant -moodissa[S] elementin TABLE suhteen MS IE 5.x Windowsia, kun ne yleensä toimivat width-ominaisuuden suhteen samoin kuin Opera.

  3. Myös MS IE 5.0 Mac käytös on DTD-riippuvainen[S]. Toimintamuodolla on suurempi merkitys taulukkoelementtien leveysarvojen tulkintaan kuin MS IE 6.0 Windowsissa.

  1. Tein Mozilla Gecko -selainten toteutuseroja käsittelevän sivuparin, jossa on käytetty kahta eri DTD:tä (HTML 4.0 Transitional[S] ja HTML 4.01 Strict[S]). Mozilla Gecko -selainten käyttäytymisen DTD-riippuvuus vaikuttaa siinä hieman yhden taulukon leveyteen, mutta enemmän siihen, miten taustaväri näytetään. Sivupari antaa seuraavat tulokset (linkit viittaavat kuvakaappauksiin):

    • Ei DTD-ilmoitusta, HTML 4.0 Transitional[S]: cellspacing luo Mozilla 0.9:ssä BODY-elementin värisiä alueita. Vrt. Opera 5.12[S]. Huomautus. TABLE C leveys on HTML 4.01 spesifikaation pohjalta eri, mitä Opera näyttää. TABLE G on täysin oikein, sillä jos taulukko ei mahdu DIV-elementin laatikkoon, sen tulee mennä sen ylitse eikä DIV-elementin tule kasvaa taulukon leveyteen (vain elementin TABLE kohdalla sisällön leveyden tulee kasvattaa elementille annettua kokonaisleveyttä).
    • HTML 4.01 Transitional, HTML 4.0/ 4.01 Strict[S] + uudemmat spesifikaatiot: background-color tulee Mozilla 0.9:ssä koko taulukkoon aivan kuten Operalla ja MS IE:llä. Taulukoiden leveys toimii saman kaltaisesti kuin IE 6.0:sta otetussa editoidussa kuvakaappauksessa[S].
    • Netscape 4.x ei tue width-ominaisuutta taulukolle. Mikäli cellspacing attribuutin arvo on suurempi kuin 0 (oletusarvo on 2), sille saa siistin lopputuloksen vain määrittelemällä taulukon ulkopuolelle DIV or CENTER elementti, jonka reunuksella on sama väri kuin taulukon emoelementin taustalla sekä itse lohkolla on sama taustaväri kuin taulukolla. Tästä tilannetta demonstroi mallidokumentissa TABLE F.

Tein HTML 4.01 Strict dokumenttityyppiä käyttävän testisarjan[S]. Sain siihen liittyen s-postia selainten Mac-versioiden toteutuksesta. Tein taulukon, jossa [OK!] tarkoittaa oikeata toteutusta ja [EI OK!] tarkoittaa virheellistä toteutusta silloin, kun toteutuksia arvioidaan HTML 4.01 ja CSS2 spesifikaatioiden pohjalta:

Testit Windows Mac
MicrosoftNetscapeOpera MicrosoftNetscapeOpera
5.56.06.25.12, 6.x7.0 Beta15.06.05.0 Beta 4
Test 0a[S][OK!] [OK!] [OK!] [OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 0b[S][OK!] [OK!] [OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 0c[S] [OK!] [OK!] [OK!] [OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 0d[S] [OK!] [OK!] [OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 1[S] [EI OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 1
Fixed[S]		 [EI OK!] [OK!] [EI OK!] [OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 2[S] [EI OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 3[S] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 4[S] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 4
Fixed[S]		[OK!] [OK!] [OK!] [OK!] [OK!] [OK!] [OK!] [OK!]
Oikein5/106/105/106/106/106/105/ 106/10
 

Selainkohtaisia huomautuksia:

  1. MS IE 6.0 Windows-version toteutus tulisi olla DTD-riippuvainen ja annetulla DTD:llä sen tulisi esittää Test 1-4 samalla lailla kuin Mac-versio.

  2. MS IE:n Mac-versiossa annetut [OK!] / [EI OK!] kääntyvät viimeistä testiä lukuun ottamatta päinvastaisiksi, mikäli DTD poistetaan. Jos Mac-versio toteuttaisi Test 0-0d DTD-riippumattomasti, se toimisi sangen johdonmukaisesti.

  3. Käymieni keskustelujen pohjalta eräs Mozilla org. työntekijä sanoi, että Mozilla Gecko -selainten tulisi toimia annetulla DTD:llä sillä tavoin kuin olen esittänyt. Tulevissa Mozilla Gecko -selaimissa saattaa olla erilainen käytös. Periaatteessa uuden Mozillan pitäisi käyttäytyä määrittämälläni DTD:llä Test 1-4 suhteen samalla tavalla kuin MS IE 5.0 Mac.

  1. Opera 5.0:n Mac-versio toimii johdonmukaisemmin kuin 5.x-6.x Windows-versiot. Se toimii samalla lailla kuin MS IE 5.0:n Mac-versio kun käytetään testissä mainittua DTD:tä. Jos HTML width-attribuutti toimisi HTML 4.01 spesifikaation mukaisesti, selaimen käytöksessä ei olisi moitittavaa. Operan käytös ei ole DTD-riippuvainen. Mielestäni Operan Mac-versio ja Opera 7.x Windows ovat testin johdonmukaisimmin toimivia selaimia.

  2. Operan 5.x-6.x Windows-versiot toimivat kaikista epäjohdonmukaisimmin, sillä selainten käytös on riippuvainen annetusta width-attribuutin/ ominaisuuden arvosta. Opera käyttää outoa "width-kytkintä", joka on riippuvainen siitä, mikä on todellisen ja laskennallisen sisällön välinen suhde, kun noudatetaan width-attribuutin mukaista laskentakaavaa. HTML:n laskentakaava on päällä silloin, kun todellinen sisältö on suurempi kuin laskennallinen sisältö. CSS:n laskentakaava kytkeytyy tilanteessa, jossa todellinen sisältö on yhtä suuri tai pienempi kuin laskennallinen sisältö. Lopputulos on joko HTML 4.01 tai CSS2 spesifikaation mukaisesti.

  3. CSS3 antaa järkevämmän tavan muuttaa leveyden laskentakaavaa kuin "DTD-kytkimen", jota käsittelen spesifikaation ongelmissa[S].

  4. Kun määritellään leveys taulukkosoluille, saadaan helpommin sama lopputulos eri selaimilla (Test 4 Fixed[S]).

Periaatteessa dokumenttien perusrakenteita olisi helpompi luoda ilman taulukoita. Käsittelen vaihtoehtoisia sivurakennustapoja seuraavalla sivulla. Taulukoita tarvitaan kuitenkin aina sellaisen datan kanssa, jonka esittäminen vaatii taulukoita. Siksi mahdolliset ongelmatilanteet on syytä tuntea.

Sivujen tekijä voi määritellä CSS:n siten, että syntyy konfliktitilanteita, jotka selaimet selvittävät eri lailla. Sivujen tekijä on voinut vahingossa aiheuttaa konfliktitilanteen koko taulukkoleveyden ja yksittäisten solujen muodostaman kokonaisleveyden välille.

Hän on voinut myös määritellä ominaisuuksia, jotka eivät sovellu tietyille taulukkoelementeille, esim. table {padding:...} ja tr {margin:...; padding:...}.

Selaimissa on myös erinäisiä pikku virheitä, jotka aiheuttavat ongelmia. Muutamia tällaisia ongelmamahdollisuuksia on vielä syytä vielä luetella.

Selainkohtaisia huomautuksia:

  1. Opera 5.x+ ja MS IE ratkaisevat joissakin tilanteissa taulukon kokonaisleveyden ja yksittäisten solujen leveysristiriidan eri tavalla. Opera laskee taulukon kokonaisleveyden aina soluille määriteltyjen width ominaisuuksien perusteella, mutta MS IE normaalitapauksissa (table-layout:auto) elementille TABLE annetun width ominaisuuden mukaan. Esim. seuraava määrittely saattaa luoda vakavan ongelman:

    td {width:200px; border:2px solid black}
    table {width:400px; border:1px solid black}

    Eräissä internetiin tehdyissä taulukoissa oli kolme taulukkopalstaa. Opera esitti taulukon vähän yli 600 pikseliä leveänä ja MS IE noin 400 pikselin levyisenä. Mielestäni Opera toimii oikein, sillä taulukon tulee kasvaa soluille määriteltyjen leveyksien mukaisesti. Ominaisuudet width ja height luovat sisältölaatikon (content box) eli eräänlaisen kuvitteellisen lohkon tai pikemminkin varauslaatikon. Vaikka taulukolla olisi erityisen suuri prioriteetti (esim table#special {width:400px}) solujen kokonaisleveyttä ei tulisi pienentää. CSS2 spesifikaation antaa toki selaimille oikeuden näyttää taulukon sisältö parhaaksi katsomallaan tavalla kun normaali taululukonmuodostusalgoritmi on käytössä, mutta mielestäni MS IE ottaa "ylimääräisiä vapauksia". MS IE toimii kuitenkin kiinteällä taulukkoalgoritmilla (table-layout:fixed) yleensä samoin kuin Opera.

  1. Jos sivujen tekijä asettaa kiinteätä taulukkosommittelua käyttävän TABLE elementin width ominaisuuden arvon suuremmaksi kuin mitä saadaan laskemalla yhteen ensimmäisen taulukkorivin kokonaisleveyteen vaikuttavien ominaisuuksien yhteissumma, MS IE 6.0 Windows laskee parhaiten sekä koko taulukon että yksittäisten taulukkosolujen leveydet. Opera 6.04 ja Mozilla 1.1a virheistä saa käsityksen testisivulla[S], jota tulee verrata MS IE 6.0 Windows -selaimen käytökseen. Koska taulukoiden luomisessa on selainten välillä tulkintaeroja, leveysarvojen määrittelyssä kannattaa olla hyvin huolellinen ja välttää konflikteja niin paljon kuin mahdollista.

  2. Selaimet hyväksyvät vaihtelevassa määrin table {padding:...} jne. oudot määrittelyt, mutta osa tulkinnoista on todella outoja ja ne aiheuttavat ongelmia taulukoiden reunusmalleille. Kun määritellään ryhmiä, olisi oltava huolellinen ja varottava määrittelemästä edellä mainittuja sääntöjä (tämä koskee myös thead, tfoot, tbody {margin:...; padding:...}).

  1. Taulukkosolujen leveyksien laskennassa on muistettava yleiset dimensioiden määrittelyn ongelmat joita olen käsitelly sivulla 8[S]). Jotta dimensio-ongelmat vähenisivät, kannattaa noudattaa neuvoa[S], jonka olen antanut käsitellessäni yleisesti lohkojen dimensioihin liittyviä ongelmia.

  2. Havaitsin, että se ei aina toimi Opera-selaimissa (koskee ainakin versioon 6.01 asti) taulukkosoluissa. Olen siksi käyttänyt joissakin tilanteissa täytekuvia ja niille linkitettyjä leveysarvoja (Netscape 4.x -selaimet käyttäytyvät oudosti eräistä kuville annetuista CSS-ominaisuuksista). Asettamalla leveyden mille tahansa solujen sisällä olevalle elementille ajaisi saman asian.

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004