[Alku]
Kaikki aihepiirit:
Luettelen alla aihealueittain tekemäni aihepiirit. Paluulinkkeinä tähän aihepiiriin on tämä valikko ja sivun yläreunassa oleva linkki Aihepiiriluettelo.
 
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 10. Miten CSS annetaan taulukkoelementeille > Taulukoiden reunusmallit ja tyhjät solut (jakso 2/4)

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]