[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOpassivut > 10. Miten CSS annetaan taulukkoelementeille (introjakso)

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]