CSS és a táblázat

Tartalom
Border-collapse - Keret modell
Border-spacing - Keret távolsága
Caption-side - Táblázatcím pozíciója
Empty-cells - Üres cellák kezelése
Table-layout - Táblázat struktúra

Border-collapse - Keret modell

Ez a tulajdonság a táblázaton alkalmazandó keretezési modellt határozza meg. Az inherit értéken kívül két értéke lehet: collapse (alapértelmezés) és separate.

Érték Leírás
collapse A cellákat egyetlen keret választja el egymástól.
separate Minden cellának különálló kerete van. A távolságák megadására a border-spacing tulajdonság használható, lásd lejjebb.

Tartolomjegyzék

Border-spacing - Keret távolsága

A border-spacing tulajdonság értéke az inherit-en felül egy vagy két hosszérték lehet, alapértelmezése nulla. A hosszértékek határozzák meg a szomszédos cella keretétől való távolságot.
A tulajdonság csak akkor használható, ha a border-collapse tulajdonság értéke separate, azaz minden cellának önálló, a többitől független kerete van.

Érték Leírás
length Hossz - Egy érték esetén mind a függőleges, mind a vízszintes szomszédoknál a megadott távolság alkalmazandó, míg két érték esetén az első a vízszintes, a második a függőleges távolságot jelenti. Az értékek nem lehetnek negatívak. A szomszédos keretek közötti hézagban a táblázat háttere látható.
inherit Használható az inherit érték is, ha a tulajdonság értékét az elem ősétől akarjuk örököltetni.

Tartolomjegyzék

Caption-side - Táblázatcím pozíciója

Ez a tulajdonság határozza meg, hogy a táblázat címe a táblázathoz képest hol helyezkedjen el.
Értékei a következők lehetnek:

ÉrtékLeírás
topA cím doboza a táblázat doboza fölött helyezkedik el, ez az alapértelmezés.
bottomA cím doboza a táblázat doboza alatt helyezkedik el.
leftA cím doboza a táblázat dobozától balra helyezkedik el.
rightA cím doboza a táblázat dobozától jobbra helyezkedik el.
inheritHasználható az inherit érték is, ha a tulajdonság értékét az elem ősétől akarjuk örököltetni.


A lenyíló listák segítségével kipróbálhatod a táblázatokra a CSS által nyújtott lehetőségeket. Ha bármelyiken változtatsz, akkor a jobb oldali ablakban egyből megjelenik az eredmény. A bal oldal alján pedig látható a stílus definició utasításai.

Kérem a keretmodellt:

Kérem a keret távolságot:
Vízszintes - Függőleges

Kérem a cím helyét:
  

<style type="text/css">
  table {
    border-collapse:
    border-spacing:
    caption-side:
  }
</style>
Táblázat címe
elem elem elem elemelem2elem elem elem
abc
e1e2e3
e1aa  e3

Tartolomjegyzék

Empty-cells - Üres cellák kezelése

Ez a tulajdonság határozza meg, hogy a különálló kerettel rendelkező cellák közül az üres cellák kerete megjelenjen-e. Ha akár csak egy nem törhető szóköz ("&nbsp;") is van a cellában, az már nem számít üresnek.
A tulajdonság csak abban az esetben használható, ha a border-collapse tulajdonság értéke separate.

Érték Leírás
show Látható - Ha e tulajdonság értéke show (alapértelmezés), akkor a cella körül megjelenik a keret.
hide Rejtett - Ha az értéke hide, akkor nem jelenik meg a cella körül a keret.
Ha egy egész sor valamennyi cellája üres, és e tulajdonság értéke hide, akkor a böngésző úgy fogja kezelni a sort, mintha annak display tulajdonsága a none értéket kapta volna.
inherit Használható az inherit érték is, ha a tulajdonság értékét az elem ősétől akarjuk örököltetni.


A lenyíló listák segítségével kipróbálhatod a táblázatokra a CSS által nyújtott lehetőségeket. Ha bármelyiken változtatsz, akkor a jobb oldali ablakban egyből megjelenik az eredmény. A bal oldal alján pedig látható a stílus definició utasításai.

Üres cellák kezelése

<style type="text/css">
  table {
    empty-cells: ;
  }
</style>

Az üres cellákra vonatkozó táblánál a második sor középső cellája teljesen üres, míg a harmadik sor utolsó cellába beírtam egy nem törhető szóközt ("&nbsp;"). A két állapot jól mutatja a különbséget.
Az alsó táblánál a második sor minden cellája üres, itt is jól látható a két variáció.


Tartolomjegyzék

Table-layout - Táblázat struktúra

A table-layout tulajdonság a táblázat megjelenítését szabályozza. Értékei a következők lehetnek:

Érték Leírás
auto Auto - (alapértelmezés): az "automatic layout" algoritmust használja a böngésző a táblázat megjelenítésére. Azt jelenti, hogy a böngésző a cellák tartalma alapján számolja ki a szükséges szélességeket, azaz a megjelenítéshez szükséges a teljes táblázat ismerete.
fixed Állandó: a "fixed layout" algoritmust használja a böngésző a táblázat megjelenítésére. Azt jelenti, hogy a táblázat szélessége és a cellák szélessége alapján történik a megjelenítés, függetlenül attól, hogy a cellák tartalma milyen szélességet igényelne (az első sor adatainak letöltése után a táblázat megjelenítése megkezdhető).
Mindkét algoritmus leírása a CSS-szabványban található meg.
inherit Használható az inherit érték is, ha a tulajdonság értékét az elem ősétől akarjuk örököltetni.


A lenyíló lista segítségével kipróbálhatod a táblázat struktúrára a CSS által nyújtott lehetőségeket. Ha változtatsz, akkor a jobb oldali ablakban egyből megjelenik az eredmény. A bal oldal alján pedig látható a stílus definició utasításai.

Táblázat struktúra

<style type="text/css">
  table {
    table-layout:
  }
</style>

Figyeljük meg, hogy az Állandó tábkázat struktúrát választva, bizony a bal oldali cella tartalma át lóg a következő cellába.

ugrás a lap tetejére