Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Kun taulukon solulle (td) määrittää CSS:llä reunuksen, useimmat selaimet näyttävät vierekkäisten solujen reunukset ikävästi vierekkäin, jolloin reunukset näyttävät kaksi kertaa tarkoitettua paksummilta. Border-collapsella reunukset saa kätevästi päällekkäin, jolloin ne näyttävät oikean levyisiltä.
| collapse | Reunukset menevät päällekkäin. |
|---|---|
| separate | Reunukset eivät mene päällekkäin. |
| inherit | Arvo periytyy ylemmiltä elementeiltä. |
Esimerkiksi:
border-collapse:collapse;
Border-collapse määritellään koko taulukolle (table), ei pelkälle solulle (td):
table { border-collapse:collapse; }
Tämä muotoilu ei toimi IE 6:lla ja IE 7:llä, mutta kylläkin FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Border-spacingin avulla voidaan määritellä solujen väliin jäävä tila. Määrityksessä käytetään CSS:n etusivulla esiteltyjä mittayksiköitä. Arvona voi olla myös inherit, jolloin muotoilu periytyy ylemmiltä elementeiltä.
Esimerkiksi:
border-spacing:10px;
Muotoilulle voi antaa myös kaksi arvoa, jolloin ensimmäinen ilmaisee välistyksen vaakasuunnassa ja toinen pystysuunnassa:
border-spacing:5px 15px;
Tämä muotoilu ei toimi IE 6:lla ja IE 7:llä, mutta kylläkin FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Caption-siden avulla voidaan määrittää taulukon otsikon paikka.
| top | Otsikko on taulukon yläpuolella (oletus). |
|---|---|
| bottom | Otsikko on taulukon alapuolella. |
| inherit | Muotoilu periytyy ylemmiltä elementeiltä. |
Esimerkiksi:
caption-side:inherit;
Muotoilu on kohdistettava suoraan caption-tagille, ei esimerkiksi table-tagille:
caption { muotoilut }
Tämä muotoilu ei toimi IE 6:lla ja IE 7:llä, mutta kylläkin FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Empty-cellsin avulla voidaan määrittää, näytetäänkö taulukon tyhjiksi jätetyt solut. Muotoilu tulee määrittää table-elementille, jolloin se koskee kaikkia kyseisen taulukon tyhjiä soluja.
| hide | Solut piilotetaan. |
|---|---|
| show | Solut näytetään (oletus). |
| inherit | Muotoilu periytyy ylemmiltä elementeiltä. |
Esimerkiksi:
empty-cells:show;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Jos taulukolle on määritetty jokin leveys, liian pitkä sana jossakin taulukon solussa voi venyttää taulukkoa aiottua leveämmäksi. Table-layoutin avulla voidaan määrittää, annetaanko solujen venyä vai ei. Muotoilu määritetään table-elementille, jolloin se vaikuttaa kaikkiin taulukon soluihin.
| auto | Solut venyvät, jos niissä on liian pitkiä sanoja (oletus). |
|---|---|
| fixed | Solut eivät veny, vaan ylimääräinen teksti vuotaa niistä yli. |
| inherit | Muotoilu periytyy ylemmiltä elementeiltä. |
Esimerkiksi:
table-layout:fixed;