[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 10. Miten CSS annetaan taulukkoelementeille > Taulukoiden peruskäsittelytapa (jakso 3/4)

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]