HTML Info

Webről, magyarul, mindenkinek

Táblázat, vagy nem táblázat?

8 megjegyzés

Rachel Andrew a Digital Weben írt a táblázatos oldalelrendezésről és a CSS-ről:

Mire kiadják, az Internet Explorer 8 számos CSS megjelenítési tulajdonságot fog támogatni, ideértve a táblázatokkal kapcsolatos értékeket is: table, table-row, és table-cell; a főbb böngészők között utolsóként a sorban. Ez az esemény a bonyolult CSS lapelrendezési technikák végét is jelzi, és az utolsó szög lesz a táblázatos lapkiosztás koporsójában. Végre, a táblázat-szerű lapelrendezés CSS-el történő előállítása gyorsan és könnyen végrehajtható lesz.

A táblázattal kapcsolatos megjelenítési tulajdonságok értékeinek használatával a weblapok elemei megjelenésükkor úgy tesznek, mintha táblázatok részei volnának. A következő néhány sorban azt szeretném bemutatni, milyen befolyással lesz mindez a CSS használatára a weblapok elrendezésénél.




CSS táblázatok használata

A CSS táblázatok megoldják azokat a problémákat, amikkel akkor találkozunk, ha abszolút pozicionálást, vagy lebegést (float) szeretnénk hsaználni egy többoszlopos elrendezéshez. Ha egy elem display tulajdonságának a table értéket adjuk, az elem és leszármazottai táblázatként fognak viselkedni. A CSS-táblázatra alapuló elrendezés fő előnye, hogy könnyen definiálhatjuk a cellák határait; hátteret, satöbbit definiálhatunk minden egyes “cellának” – megkerülve a nem táblázatos adat táblázatba erőszakolásának szemantikai problémáját.

Mielőtt belemerülnénk a részletekbe, és felderítenénk, hogyan működik, nézzünk egy gyors demonstrációt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
 <head>
  HTML head tartalom...
 </head>
 <body>
  <div id="wrapper">
   <div id="header"></div>
    <div id="main">
     <div id="nav">
      navigációs oszlop tartalma...
     </div>
    <div id="extras">
     kiemelt hírek oszlop tartalma...
    </div>
    <div id="content">
     fő tartalom...
    </div>
   </div>
  </div>
 </body>
</html>

A HTML forrás megfelel a kívánt tartalommegjelenítés sorrendjének. Először jön a navigációs oszlop, azt követi a kiemelt hírek oszlopa, végül a fő tartalom oszlopa.

Szükség lesz még a következő stíluslapra is:

#main {
display: table;
border-collapse: collapse;
}

#nav {
display: table-cell;
width: 180px;
background-color: #e7dbcd;
}

#extras {
display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}

#content {
display: table-cell;
width: 380px;
padding-left: 10px;
}

Az előbb létrehozott CSS tablázat-alapú elrendezés megfelelően jelenik meg Internet Explorer 8, Firefox, Safari, és Opera alatt is; a lentebbi kép az eredetiben nem említett Chrome képernyőképe – mint a mellékelt ábra mutatja, az is jól kezeli.

Háromoszlopos, egyenlő magasságú elrendezésünket anélkül értük el, hogy különösebb hackeket kellett volna bevetnünk – se háttérképek, se aggódás az abszolút pozicionálás miatt: forradalmi!

Hogy működik?

A display tulajdonság lehetővé teszi egy csomó táblázattal kapcsolatos érték megadását; használatukkal az elemek úgy jelennek meg, mintha táblázat elemek volnának. Az elérhető display értékek:

  • table – az elem table elemként fog viselkedni
  • table-row – az elem táblázat-sor (tr) elemként fog viselkedni
  • table-cell – az elem táblázat-cellaként (td) fog viselkedni
  • table-row-group – az elem táblázattörzs sorcsoportjaként (tbody) fog viselkedni
  • table-header-group – az elem táblázat-fejléc sorcsoportjaként (thead) fog viselkedni
  • table-footer-group – az elem táblázat-lábléc sorcsoportjaként (tfoot) fog viselkedni
  • table-caption – az elem táblázat-címke (caption) elemként fog viselkedni
  • table-column – az elem táblázat-oszlopként (col) fog viselkedni
  • table-column-group – az elem táblázattörzs oszlopcsoportjaként (colgroup) fog viselkedni

Akkor most a táblázatos elrendezés mégsem rossz ???

Az olvasó most kissé összezavarva érezheti magát – hát nem azt mondogatja mindenki már mióta, hogy ne használjunk táblázatokat elrendezésre?

A table elem a HTML-ben egy szemantikus szerkezet: rendezett adatokat tartalmaz. Ezért a táblázatokat csak adatok rendszerezett megjelenítésére szabad alkalmazni – például valutaárfolyamok adatainak felsorolására (pl. Ország-pénznem-árfolyam). Ha mindezt asztali számítógépen (vagy laptopon) tárolnánk, valószínűleg egy táblázatkezelőben tennénk.

A display tulajdonság table értéke viszont egyszerűen csak azt jelzi, hogyan kell valaminek kinéznie a böngészőben – nincs szemantikus jelentése. A table elem használata azt mondja a böngészőnek, hogy “Az itt megjelenő adatok rendszerezettek”. Ezzel szemben néhány egymásba ágyazott div elem – amelyek display tulajdonságának értéke table és table-cell – semmit nem mond a böngészőnek azon kívül, hogy felkéri egy bizonyos módon történő megjelenítésre, ha képes rá.

Persze, oda kell figyelni rá, hogy ne használjuk a display: table stílusszabályt, ha tényleg rendszerezett adatokat akarunk megjeleníteni!

Fenti egyszerű példánk az elrendezést olyanná teszi, mintha egy egysoros táblázat lenne, három cellával; nem szükséges nagy képzelőerő ahhoz, hogy felismerjük a technika lehetőségeit bonyolultabb rácsszerű elrendezések könnyű megvalósítására.

Névtelen table elemek

A CSS táblázatok boldogan élnek a táblázatos elrendezés általános szabályai szerint, amelyek egy különösen érdekes lehetőségre viágítanak rá: a hiányzó table elemeket a böngésző névtelenül létrehozza. A CSS 2.1 specifikációban olvashatjuk:

Document languages other than HTML may not contain all the ele­ments in the CSS 2.1 table model. In these cases, the “missing” elements must be assumed in order for the table model to work. Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a “table”/“inline-table” element, a “table-row” element, and a “table-cell” element.

Ebből az következik, hogy ha anélkül használjuk a display: table-cell; deklarációt, hogy az első tartalmazó cellához hozzárendelnénk a display: table-row; stílusszabályt, a a sor “beleértődik” – a böngésző úgy fog tenni, mintha valójában volna ott egy sor.

Nézzünk egy egyszerű példát, amiben felderítjük ezt a lehetőséget: lejjebb egy háromcellás rácsos elrendezést láthatunk. Megnézünk három különböző HTML jelölést, amelyek ugyanazt a vizuális eredményt adják.

Először a háromcellás elrendezés létrehozása:

<div class="container">
 <div class="row">
  <div class="cell">1. CELLA</div>
  <div class="cell">2. CELLA</div>
  <div class="cell">3. CELLA</div>
 </div>
</div>

Egy halom egymásba ágyazott div elem nem néz ki túl érdekesen, de építsük tovább. A CSS is nagyon egyszerű:

.container {
display: table;
}

.row {
display: table-row;
}

.cell {
display: table-cell;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 1em;
}

A fenti stíluslap rendeli hozzá a ‘container’ osztályú elemekhez a display: table szabályt, a ‘row’ osztályú elemekhez a display: table-row szabályt, és a ‘cell’ osztályú elemekhez a display: table-cell szabályt, valamint szegélyt ad hozzájuk, magasságot és szélességet határoz meg.

A használt HTML jelölés explicit módon létrehozza a három cellát körülvevő táblázat elemeket, felhasználva hozzájuk az általunk létrehozott CSS osztályokat. A jelölés azonban lehet rövidebb is, elvéve belőle a táblázatot definiáló div elemet:

 <div class="row">
  <div class="cell">1. CELLA</div>
  <div class="cell">2. CELLA</div>
  <div class="cell">3. CELLA</div>
 </div>

Bár ebből a jelölésből hiányzik a táblázatot definiáló elem, a böngésző névtelen dobozként llétrehozza. A kódoz azonban még tovább rövidíthetjük:

  <div class="cell">1. CELLA</div>
  <div class="cell">2. CELLA</div>
  <div class="cell">3. CELLA</div>

Ebből a kódból már hiányoznak a táblázatot és a sort definiáló elemek is; mindkettőt névtelen dobozként hozza létre a böngésző. Bár a jelölésből hiányoznak, a végeredmény ugyanaz.

Névtelen táblázat elemek létrehozásának szabályai

Ezeket a névtelen dobozokat nem varázslat hozza létre, és nem pótolnak minden HTML kódbeli hiányosságot. Hogy képesek legyünk minden előnyüket kihasználni, a legjobb, ha tisztába jövünk létrejöttükkel. Ha az elrendezés egy nem definiált (“beleértett”) elemre hivatkozik, a böngésző létrehoz egy névtelen dobozt, és CSS display tulajdonságát table, table-row, vagy table-cell értékre állítja be, a környezettől függően.

Ha van egy elemünk, display: table-cell; szabállyal, de szülő elemére (a tartalmazó elem) nincs beállítva a table-row, létrejön egy táblázat sorként viselkedő névtelen doboz, ami körülveszi a cellát és és minden utána következő szomszédos testvér elemet, amelyre be van állítva a table-cell stílus-szabály, mígcsak nem találkozik egy olyan elemmel, amely nem table-cell, így minden addigi cella ugyanahhoz a sorhoz tartozik. A következő kód jellemzi ezt az esetet:

  <div class="cell">1. CELLA</div>
  <div class="cell">2. CELLA</div>
  <div class="cell">3. CELLA</div>
  <div>NEM CELLA</div>

A három ‘cell’ osztályú div elemre be vn állítva a display: table-cell;, így szépen egymás mellett jelennek meg, mintha egy táblázat sorához tartoznának; az utolsó div elem nem tartozik a sorba, mert nincs rá beállítva a display: table-cell; szabály.

Ha egy elemre be van állítva a display: table-row;, de szülő eleme nem table (vagy table-row-group), egy display: table; beállítású névtelen doboz jön létre, magában foglalandó a sort és valamennyi utána következő display: table-row beállítású szomszédos testvérelemet. Szintúgy, ha egy display: table-row beállítású elemből hiányzik egy table-cell beállítású elem, létrejön benne egy table-cell beállítású névtelen doboz, hogy magába foglalja a sorban levő elemeket.

Nézzük a következő jelölést:

  <div class="cell">1. SOR</div>
  <div class="cell">2. SOR</div>
  <div>NEM SOR</div>

A két fenti ‘row’ osztályú div elem beállítása display: table-row; és egymás alatt fognak megjelenni, mintha egy táblázat sorai lennének. Az utolsó div elem nem fog az így létrejövő “táblázatba” tartozni.

Hasonlóképp, ha egy elem beállítása bármilyen más display érték, amely megfelel egy elemenek, amely természetesen létezik közvetlenül egy szülő táblázat elemben (table-row-group, table-header-group, table-footer-group, table-column, table-column-group, table-caption), de szülő elemére nincs beállítva a display: table; szabály, a megfelelő display értékekkel felruházott, táblázatként beállított névtelen doboz jön létre az elem – és valamennyi utána következő szomszédos testvérelem – tartalmazására .

Más hasznos táblázat tulajdonságok

Ha CSS táblázatokat használunk, mert az elemek megfelelnek a táblázatos elrendezés általános szabályainak, használhatjuk a többi táblázatokra vonatkozó CSS tulajdonságot is. Néhány kézenfekvő stílusbeállítási lehetőség:

table-layout
fixed értéke azt mondja a böngészőnek, hogy a táblázatot a cellaszélességekhez fix algoritmus szerint kell beállítani. Ez a megoldás fix szélességű elrendezéseknél hasznos, amilyet korábban mi is használtunk.
border-collapse
Pont, mint a HTML táblázatoknál, a border-collapse tulajdonságot használhatjuk annak beállításra, hogy a táblázat elrendezésben részt vevő elemek szegélye a cellák között eltűnjön (collapse), vagy látszódjon (separate).
border-spacing
Ha a border-collapse tulajdonsághoz a separate értéket használjuk, a border-spacing tulajdonsággal adhatjuk meg a cella elemek szegélyei közötti távolságot.

Teljes rács elkészítése

Egy azonos magasságú elemekből álló rács elkészítése mindig kihívás a hagyományos CSS elrendezési technikákat használva, viszont a CSS táblázat tkéletes e célra. Ha készíteni akarunk egy képekből és képfeliratokból álló képgalériát, a CSS táblázat a feladatot jelentősen leegyszerűsíti.

A galéria kódja:

<div class="grid">
  <div class="row">
    <div class="image">
      <img src="liliom.jpg" alt="Liliom" />
      <p>Egy liliiom a kertben</p>
    </div>
    <div class="image">
      <img src="fuchsia.jpg" alt="Fuchsia" />
      <p>Fuchsia ágyás a kertben</p>
    </div>
  </div>
  <div class="row">
    <div class="image">
      <img src="medvehagyma.jpg" alt="Medvehagyma" />
      <p>Medvehagyma</p>
    </div>
    <div class="image">
      <img src="vorosbegy.jpg" alt="Vörösbegy a kerítésen" />
      <p>
        Vörösbegy a kerítésen.
      </p>
    </div>
  </div>
</div>

A galéria minden kép-cellája egy img elemet és egy p elemet tartalmaz; ezek egy ‘image’ osztályú div elemben laknak. Minde sort egy ‘row’ osztályú div elem tartalmaz, és a teljes galéria egy ‘grid’ osztályú div elemben van.

Az elrendezéshez szükséges CSS egyszerű:

.grid {
display: table;
border-spacing: 4px;
}

.row {
display: table-row;
}

.image {
display: table-cell;
width: 240px;
background-color: #000;
border: 8px solid #000;
vertical-align: top;
text-align: center;
}

.image p {
color: #fff;
font-size: 85%;
text-align: left;
padding-top: 8px;
}
</code></pre>

A fenti stíluslap egyszerű, mint egy pofon, de érdemes megfigyelni, hogyan használtuk a border-spacing tulajdonságot a képcellák közötti hely beállításra. Egy rácsos elrendezés létrehozása nem lehet ennél egyszerűbb – és elkerültünk egy csomó fejfájást az egyforma magasságok miatt, vagy a lebegő elemek miatti törékeny elrendezés miatt.

[Galéria kódja]

Írta: htmlinfo

2008. 10 26 at 11:10 am

8 megjegyzés :: 'Táblázat, vagy nem táblázat?'

Feliratkozás a megjegyzésekre: RSS vagy Trackback küldése: 'Táblázat, vagy nem táblázat?'.

  1. Nagyon jó cikk, megelőztél a fordítással, én is belekezdtem…

    Természetesen a fenti technikák elterjedésének egy gátja van, a régi expolorer verziók jelenléte.

    H.S.Laszlo

    2008. 10 26 at 12:51

  2. A régi IE-k miatt, még évekig nem használható ez a technika sajnos. Addig marad a bénázás, meg a table-tr-td, mert akárhogy is nézem a jó öreg html formázásnál egyelőre nincs egyszerűbb és kompatibilisebb megoldás, akármilyen értelmetlen kampány is megy ellene…

    lali

    2008. 10 28 at 23:16

  3. Az “értelmetlen kampány” kifejezést gondold át még egyszer.
    A könyvespolcot könyvek tárolására találták ki. Ha az egyik polcán egy zsák krumplit találsz, a másikon egy ajtót zárral, a harmadikon egy ablaokt, a negyediken egy bazinagy vendégkönyvet, hogy igazodsz el?

    htmlinfo

    2008. 10 29 at 10:24

  4. ha egy táblázatos (akarom mondani grides) oldalt nem táblázattal hanem cellák egymásba ágazásával akarsz megcsinálni,
    ha három oszlopot egy magasságúra akarsz, de valami titok miatt nem használod azt a formázást ahol tudnak egymás magasságáról az oszlopok, hanem design mögé elkened a struktúrális problémát,
    ha … no nem folytatom. A no table a grid-design idején egy nagy baromság. :)

    lali

    2008. 10 29 at 12:53

  5. Üdv Mindenkinek

    Valaki leírná nekem ezeket a pici kódokat -től, – ig bezálólag (az elejétől a végéig egyben), h csak Ctrl-C / Ctrl-V után nekem is müködjön. Én IE8-at használok. Nem az a gond. A gond ott van, h nem tudom hova kell írni a CSS rész. Előre is köszönöm.

    Egyébként köszönöm az információt. Nem vagyok jártas a weblap szerkesztésben. Amolyan hobbiként kezdeném el. Még csak olvasgatok róla az Interneten.

    Eri

    2009. 04 17 at 20:51

  6. Ez a CTRL+C CTRL+V nem nagy ötlet :)
    A kérdésedre a válasz a CSS Ajánlás 1.1 pontjában van. Sok sikert.

    htmlinfo

    2009. 04 18 at 7:58

  7. Értékes infó. Sokat szenvedek a stílus lapokkal.:)

    Zoltán

    2009. 12 06 at 23:41

  8. T. htmlinfo!

    Azt hogyan oldanád meg, ha a tartalom hossza – adatbázisból jönne – hosszabb lenne, mint a CSS-ben beállított?

    Üdv

    Orcinus

    2011. 02 14 at 16:52

Megjegyzés hozzáfűzése