Nyitó

Gyorstalpaló

Tervezés

HTML

CSS

Sablonok

Bevezetés

Szintaktika

Doboz modell

Pozicionálás

Szöveg formázása

Színek

Méretek

Táblázatok

Listák

Táblázatok - Táblázat elrendezés (table-layout) tulajdonság

A table-layout tulajdonság értéke szabja meg, hogy a böngészőnek milyen algoritmus szerint kell megjelenítenie a táblázatot. A lehetséges értékek:

  • auto: automatikus megjelenítési mód
  • fixed: rögzített oszlop szélességek
  • inherit: a tulajdonság értéke a szülő elemtől öröklődik

A tulajdonság értéke nem öröklődik automatikusan. Az alapérték: auto.

Automatikus megjelenítési mód

Ha a table-layout értéke auto, akkor a böngészők bonyolult algoritmus szerint jelenítik meg a táblázatokat. Ennek során figyelembe veszik:

  • a megadott szélesség értékeket
  • a cellákban lévő tartalmak helyigényét
  • a rendelkezésre álló felület nagyságát

A CSS szabvány nem ír elő kötelező érvényű algoritmust, a böngészők próbálják optimális módon elrendezni a táblázat tartalmát. Olyankor nincs probléma, amikor az oldal készítője megadja a táblázat oszlopainak szélességét, a cellák tartalma elfér ezekben az oszlopokban és az így megjelenített táblázat sem szélesebb a rendelkezésre álló megjelenítő felületnél. A böngésző a megadott oszlopszélességekkel megszerkeszti a táblázatot.

Két konfliktus adódhat. Előfordulhat, hogy a cella tartalma - például egy kép - szélesebb, mint a megadott oszlopszélesség. Ilyenkor a böngészők megnövelik az oszlop szélességét annyira, hogy a cellák tartalma megjeleníthető legyen.

A másik probléma az lehet, hogy a táblázat a megadott oszlop szélességekkel nem fér el a rendelkezésre álló megjelenítő felületen. Ilyenkor a böngészők keskenyebbre veszik az oszlopok szélességét. A szélességet legfeljebb addig csökkentik, ameddig azt a cellákba illesztett tartalmak lehetővé teszik. Ha a táblázat minimális szélessége is nagyobb, mint a megjelenítő felület mérete, akkor a teljes tartalom megtekintéséhez vízszintes görgetésre lesz szükség.

A táblázat elrendezésének automatikus kialakítása viszonylag bonyolult algoritmus futtatását igényli, ennek ellenére a weblap készítés során többnyire ezt alkalmazzuk. Így a legtöbb látogató számára közel optimális módon jelenik meg a tartalom, nagymértékben függetlenül attól, hogy milyen eszközzel csatlakozik a világhálóra. (Egy átlagos weboldal megjelenítése során a bonyolult algoritmus „lassúsága” nem okozhat problémát. A mai eszközök számítási kapacitása mellett egy oldal a másodperc törtrésze alatt megjeleníthető.)

Megjelenítés rögzített elrendezésben

Ha a table-layout tulajdonság értéke fixed és a táblázat szélessége is meg van adva, akkor a CSS szabvány előírása szerint a böngészőnek a következő gyors és egyszerű algoritmus szerint kell megszerkesztenie a táblázatot:

  • Ha egy oszlop szélessége (col vagy colgroup elemben) meg van adva, akkor az lesz az oszlop szélesség.
  • Ha egy oszlop szélessége nincs megadva az előző pont szerint, de az első sorban lévő cella szélessége definiálva van, akkor annak mérete lesz az oszlopszélesség.
  • A többi oszlop között egyenlő arányban kell elosztani a táblázat szélességéből még megmaradó részt.

Ha a táblázat szélessége nincs megadva, akkor a böngészők vagy a rögzített elrendezés algoritmusa szerint jelenítik meg a táblázatot, miután kiszámolják annak szélességét a rendelkezésre álló megjelenítő felület szélességéből, vagy pedig az automatikus megjelenítési módot alkalmazzák.

Rögzített elrendezés esetén az oszlopok szélessége nem függ a cellák tartalmától. Ha valamelyik cella tartalma nem fér el az adott szélességen belül, akkor a cellán kívüli rész láthatósága az overflow tulajdonság aktuális értékétől függ. (Az overflow tulajdonság alapértéke a visible. Ha nincs más megadva, akkor a cella tartalma rá fog lógni a szomszéd cellára.)

A rögzített elrendezésű táblázatot akkor célszerű használni, ha a táblázat több száz vagy ezer sorból áll. Ilyenkor érdemes lehet feláldozni az automatikus megjelenítési mód rugalmasságát a gyorsaság érdekében.


Keret összevonás (border-collapse) tulajdonság »


Tőzsde és technikai elemzés érthetően