Táblázatok - A CSS táblázat modell

A CSS szabvány által definiált táblázat modell gyakorlatilag megegyezik a HTML táblázat modelljével. (Azért van a két szabványnak külön táblázat modellje, mert stíluslapokat nem csak HTML dokumentumhoz lehet csatolni, hanem más jelölő nyelvekhez is, például XML alkalmazásokhoz.)

A CSS szabvány alapján egy táblázat az alábbi elemekből épülhet fel:

• table: táblázat (egyenértékű HTML elem: table)
• inline-table: soron belüli táblázat (egyenértékű HTML elem: table)
• table-column-group: oszlop csoport (egyenértékű HTML elem: colgroup)
• table-column: oszlop (egyenértékű HTML elem: col)
• table-row-group: táblázat törzs / sor csoport (egyenértékű HTML elem: tbody)
• table-header-group: fejléc / sor csoport (egyenértékű HTML elem: thead)
• table-footer-group: lábléc / sor csoport (egyenértékű HTML elem: tfoot)
• table-row: sor (egyenértékű HTML elem: tr)
• table-cell: cella (egyenértékű HTML elemek: td, th)
• table-caption: táblázat cím (egyenértékű HTML elem: caption)

A táblázat elemei egymásra épülő rétegeket alkotnak az alábbi ábra szerint:

A gyakorlatban a rétegek sorrendjének a háttér meghatározásakor van jelentősége. Ha egy cellának van háttér színe vagy háttér képe, akkor az tölti ki a cella területét, mivel az a legfelső réteg. Ha a cella átlátszó, akkor annak területét a legfelső olyan rétegnek a háttere tölti ki, amelyiknek a háttere nem átlátszó. (A background-color tulajdonság alapértéke: transparent. Tehát ha egy elem hátterét nem állítod be stíluslapokkal, akkor az átlátszó lesz.) Ahol a táblázat minden rétegének a háttere átlátszó, ott a táblázat szülő elemének a háttere látszik.

Cím pozíció (caption-side) tulajdonság »