Táblázatok

Figyelem! A táblázatokat arra használjuk, amire valók: adattáblák megjelenítésére! Nagyon sokan helytelenül az oldalfelépítés kialakítására is táblázatokat használnak. Kétségkívül erre is jók, de eredetileg nem erre találták ki őket, és egyik fejezetünkben azt is részletezzük, miért nem ajánlott táblázatokat használni az oldalfelépítés kialakítására.

A táblázatot a <table>...</table> címkék közé kell írni. A táblázat egy sora a <tr>...</tr>, ezen belül pedig a cellák a <td>...</td> címkék közé kerülnek.

<table>
  <tr>
    <td>első sor, első oszlop</td>
    <td>első sor, második oszlop</td>
    <td>első sor, harmadik oszlop</td>
  </tr>
  <tr>
    <td>második sor, első oszlop</td>
    <td>második sor, második oszlop</td>
    <td>második sor, harmadik oszlop</td>
  </tr>
  <tr>
    <td>harmadik sor, első oszlop</td>
    <td>harmadik sor, második oszlop</td>
    <td>harmadik sor, harmadik oszlop</td>
  </tr>
</table>

első sor, első oszlop	első sor, második oszlop	első sor, harmadik oszlop
második sor, első oszlop	második sor, második oszlop	második sor, harmadik oszlop
harmadik sor, első oszlop	harmadik sor, második oszlop	harmadik sor, harmadik oszlop

Ha egy cellát üresen akarunk hagyni, akkor a tartalma legyen (non-breaking space).

<table>
  <tr>
    <td>első sor, első oszlop</td>
    <td> </td>
    <td>első sor, harmadik oszlop</td>
  </tr>
  <tr>
    <td> </td>
    <td>második sor, második oszlop</td>
    <td>második sor, harmadik oszlop</td>
  </tr>
</table>

első sor, első oszlop		első sor, harmadik oszlop
	második sor, második oszlop	második sor, harmadik oszlop

Sor- és oszlopátnyúlások megadása

A táblázat egy cellája több oszlopot is átfoghat. Ezt mutatja be a következő példa:

<table>
  <tr>
    <td>első sor, első oszlop</td>
    <td>első sor, második oszlop</td>
    <td>első sor, harmadik oszlop</td>
  </tr>
  <tr>
    <td colspan="3">A második sor egyetlen cella lett, a colspan attribútum értékét 3-ra állítottam.</td>
  </tr>
  <tr>
    <td>harmadik sor, első oszlop</td>
    <td>harmadik sor, második oszlop</td>
    <td>harmadik sor, harmadik oszlop</td>
  </tr>
</table>

első sor, első oszlop	első sor, második oszlop	első sor, harmadik oszlop
A második sor egyetlen cella lett, a colspan attribútum értékét 3-ra állítottam.
harmadik sor, első oszlop	harmadik sor, második oszlop	harmadik sor, harmadik oszlop

Egy cella több sort is átfoghat:

<table>
  <tr>
    <td>első sor, első oszlop</td>
    <td rowspan="3">A második oszlop egyetlen cella lett, a rowspan attribútum értékét 3-ra állítottam.</td>
    <td>első sor, harmadik oszlop</td>
  </tr>
  <tr>
    <td>második sor, első oszlop</td>
    <td>második sor, harmadik oszlop</td>
  </tr>
  <tr>
    <td>harmadik sor, első oszlop</td>
    <td>harmadik sor, harmadik oszlop</td>
  </tr>
</table>

első sor, első oszlop	A második oszlop egyetlen cella lett, a rowspan attribútum értékét 3-ra állítottam.	első sor, harmadik oszlop
második sor, első oszlop		második sor, harmadik oszlop
harmadik sor, első oszlop		harmadik sor, harmadik oszlop

Táblázat fejléce és címe

Lehetőségünk van kiemelni a táblázat fejlécét (a táblázat legelső sorát, oszlopát, vagy mindkettőt) és címet rendelni a táblázathoz. A fejléc egy celláját ne a <td>...</td> címkék közé, hanem a <th>...</th> címkék közé írjuk, ekkor a böngésző alapból megvastagítja és középre rendezi a benne lévő szöveget.

A táblázat fejléce lehet egyrészt az oszlopok felett. Ekkor mindegyik th címkének adjuk meg a scope="col" attribútumot, ami azt jelenti, hogy az adott fejléc az alatta lévő oszlophoz tartozik.

Ha egy fejléc a mellette lévő sorhoz tartozik, akkor a scope="row" attribútumot kell beállítani.

A táblázat címét a <caption>...</caption> címkék közé írjuk, rögtön a kezdő <table> címke után!

<table>
  <caption>
  Férfi vízilabda összesített éremtáblázat, olimpiák
  </caption>
  <tr>
    <th scope="col">Ország</th>
    <th scope="col">Arany</th>
    <th scope="col">Ezüst </th>
    <th scope="col">Bronz</th>
  </tr>
  <tr>
    <td>1. Magyarország</td>
    <td>8</td>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>2. Nagy-Britannia</td>
    <td>4</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>3. Jugoszlávia</td>
    <td>3</td>
    <td>4</td>
    <td>1</td>
  </tr>
  <tr>
    <td>4. Olaszország</td>
    <td>3</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>5. Szovjetunió</td>
    <td>2</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Férfi vízilabda összesített éremtáblázat, olimpiák
Ország	Arany	Ezüst	Bronz
1. Magyarország	8	3	3
2. Nagy-Britannia	4	0	0
3. Jugoszlávia	3	4	1
4. Olaszország	3	1	2
5. Szovjetunió	2	2	3

Megadhatunk a sorokhoz és az oszlopokhoz is fejlécet. Ekkor a sorokhoz megadott fejlécekhez adjuk meg a scope="row" attribútumot, az oszlopokhoz megadott fejlécekhez pedig a scope="col" attribútumot.

<table>
  <caption>
  Böngészők elterjedtsége
  </caption>
  <tr>
    <th scope="col"> </th>
    <th scope="col">2006. január </th>
    <th scope="col">2007. január </th>
  </tr>
  <tr>
    <th scope="row">Internet Explorer </th>
    <td>85,31%</td>
    <td>79,75%</td>
  </tr>
  <tr>
    <th scope="row">Mozilla Firefox </th>
    <td>9,50%</td>
    <td>13,67%</td>
  </tr>
  <tr>
    <th scope="row">Safari</th>
    <td>3,00%</td>
    <td>4,70%</td>
  </tr>
</table>

Böngészők elterjedtsége
	2006. január	2007. január
Internet Explorer	85,31%	79,75%
Mozilla Firefox	9,50%	13,67%
Safari	3,00%	4,70%

A táblázat címét megadhatnánk külön a táblázattól, a caption címke használata nélkül. Ugyanígy a td címkével is jelölhetnénk a fejléceket. Azonban ez nem jó gyakorlat, ugyanis így nem lesz szemantikus a kódunk, és nem lesz akadálymentesített a kód. A címkéket használnunk kell, amikor címet és fejlécet adunk a táblázatnak.

Rövid leírás megadása a táblázathoz

A summary-vel, a table címke attribútumaként minden adattáblához adjuk meg a rövid szöveges leírását. Ez tartalmazza, hogy miről szól a táblázat, milyen adatok vannak benne és hogyan kell értelmezni. A summary értéke nem jelenik meg a grafikus böngészőkben, ez a képernyőfelolvasóknak szól.

<table summary="Ez a táblázat az athéni olimplia (2004) után aktuális éremtáblázatot mutatja a férfi vízilabda sportágban az olimpiákon. Magyarországnak 8 arany, 3 ezüst és 3 bronzérme van, ezzel vezeti a tabellát.">
  <caption>
  Férfi vízilabda összesített éremtáblázat, olimpiák
  </caption>
  <tr>
    <th scope="col">Ország</th>
    <th scope="col">Arany</th>
    <th scope="col">Ezüst </th>
    <th scope="col">Bronz</th>
  </tr>
  <tr>
    <td>1. Magyarország</td>
    <td>8</td>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>2. Nagy-Britannia</td>
    <td>4</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>3. Jugoszlávia</td>
    <td>3</td>
    <td>4</td>
    <td>1</td>
  </tr>
  <tr>
    <td>4. Olaszország</td>
    <td>3</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>5. Szovjetunió</td>
    <td>2</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Férfi vízilabda összesített éremtáblázat, olimpiák
Ország	Arany	Ezüst	Bronz
1. Magyarország	8	3	3
2. Nagy-Britannia	4	0	0
3. Jugoszlávia	3	4	1
4. Olaszország	3	1	2
5. Szovjetunió	2	2	3

Bonyolultabb táblázat akadálymentesítése

Ha olyan táblázatot készítünk, amelyben a fejlécek több sort, vagy oszlopot is átfognak, azaz egy fejléc több sorhoz, vagy oszlophoz is tartozhat, akkor nem használhatjuk a scope attribútumot. Ez az attribútum ugyanis csak azt mondja ki, hogy az adott fejléc a sorhoz, vagy az oszlophoz tartozik-e. Azonban olyan bonyolultabb táblázat esetén, mint amilyen a most következő példa, már azt is meg kell mondani minden cellára külön, hogy melyik fejlécek tartoznak hozzájuk.

Ennek az a módja, hogy először is minden th fejlécnek adunk egy egyedi id azonosítót. Ezután minden td cellában használva a headers attribútumot, annak értékében megadjuk az összes olyan th fejléc id azonosítójának a nevét szóközzel elválasztva, amelyikhez a cella tartozik. Például az 54,04% értéket tartalmazó cellához így adjuk meg az attribútumot: headers="ie ie6 jan". Ugyanis ez a cella tartozik az Internet Explorer, a 6.0 és a 2007. január fejlécekhez, amiknek ezeket az id azonosítókat adtuk.

Persze ha nincs több oszlopot vagy sort átfogó fejlécünk, akkor használjuk ehelyett a scope attribútumot a th címkékben!

<table summary="Ez a táblázat a böngészők elterjedtségét mutatja.">
  <caption>
  Böngészők elterjedtsége
  </caption>
  <tr>
    <td rowspan="2"> </td>
    <th colspan="2" id="ie">Internet Explorer</th>
    <th colspan="2" id="ff">Mozilla Firefox</th>
  </tr>
  <tr>
    <th id="ie6">6.0</th>
    <th id="ie7">7.0</th>
    <th id="ff1">1.5</th>
    <th id="ff2">2.0</th>
  </tr>
  <tr>
    <th id="jan">2007. január </th>
    <td headers="ie ie6 jan">54,04%</td>
    <td headers="ie ie7 jan">25,01%</td>
    <td headers="ff ff1 jan">6,23%</td>
    <td headers="ff ff2 jan">6,32%</td>
  </tr>
  <tr>
    <th id="szept">2006. szeptember </th>
    <td headers="ie ie6 szept">78,93%</td>
    <td headers="ie ie7 szept">2,12%</td>
    <td headers="ff ff1 szept">10,31%</td>
    <td headers="ff ff2 szept">0,13%</td>
  </tr>
</table>

Böngészők elterjedtsége
	6.0	7.0	1.5	2.0
	Internet Explorer		Mozilla Firefox
2007. január	54,04%	25,01%	6,23%	6,32%
2006. szeptember	78,93%	2,12%	10,31%	0,13%

Akadálymentesítés szempontjából fontos a th címke használata a táblázat fejlécéhez. Ha a táblázat nem bonyolult, akkor a th címkének a scope="col" vagy a scope="row" attribútumot kell megadni aszerint, hogy az adott th elem a táblázat egy oszlopához, vagy sorához tartozik.

Bonyolultabb táblázathoz a headers attribútumot kell használni a scope helyett.

Ha a táblázatnak van címe, azt a <caption>...</caption> címkék közé írjuk!

A table címke summary attribútumában foglaljuk össze röviden, mi célt szolgál a táblázat! Ha viszont a táblázat nem adattábla, hanem elrendezésre szolgál (ami nem ajánlott), akkor ne használjuk a summary attribútumot, se a th elemeket!

Táblázat formázása

Rácsvonalak hozzáadása a táblázathoz.
Ezt egyszerűen úgy tudjuk elérni, hogy a td és th elemekhez a kívánt vastagságú keretet állítunk be a border tulajdonsággal.

Kettős szegély megszünetetése.
Mivel az előbb minden td és th elemre keretet állítottunk be, ezért két egymás mellett lévő cella esetén dupla szegély látunk. Ezt a border-collapse: collapse meghatározással tudjuk eltüntetni.

Cellák közti margó megadása.
Ehhez a border-spacing tulajdonság használható. Border beállítása nélkül is működik. Az Internet Explorer nem ismeri ezt a tulajdonságot.
Belső margó megadása a cellákhoz.
Ezt a már jól ismert padding tulajdonsággal tehetjük meg úgy, hogy hozzárendeljük a td és th elemekhez.
Táblázat középre igazítása és szélességének megadása.
Ehhez a szabvány szerint a bal és jobb oldali margót egyaránt auto értékre kell állítanunk. A szélességet a width tulajdonsággal tudjuk beállítani, ha szükséges.
Táblázat címének (caption) formázása.
Itt megadhatjuk a caption-side tulajdonsággal, hogy fent, vagy lent jelenjen-e meg a cím. A text-align tulajdonsággal tudjuk jobbra vagy balra igazítani. Továbbá a cím szövegét tetszés szerint formázhatjuk. Alapértelmezetten a cím fent középen jelenik meg. Az Internet Explorer nem ismeri fel a caption-side tulajdonságot, ezért mindig fent jeleníti meg a címet.
Cellákban lévő szövegek igazítása.
Szöveget igazíthatunk függőlegesen és vízszintesen is az egyes cellákon belül.
Zebra táblák.
Hosszú táblázatoknál előnyös lehet, ha minden második sornak más a háttérszíne.
Oszlopok csoportosítása formázáshoz.
Mivel a táblázatokat soronként kell megadni a tr elem segítségével, ezért nehézkes csak egyes oszlopok formáznunk. Ezért vezették be a col és a colgroup elemeket. Ezeket az elemeket rögtön a caption elem után kell írni. Amilyen sorrendben megadtuk a col elemeket, olyan sorrendben fognak hivatkozni a táblázat oszlopaira, kezdve az elsőtől. Az oszlopokra azonban csak az alábbi CSS tulajdonságok érvényesek: width, border, background és visibility. Ha ezen kívül mást állítunk be az oszlopokra, akkor azt csak az Internet Explorer fogja figyelembe venni!
A col elem használata.
Itt összesen 4 oszlopunk van, és 4 col elemet adtunk meg a caption után. Ezért ez a 4 col elem a 4 oszlopra vonatkozik, mégpedig ugyanabban a sorrendben, ahogyan az oszlopokat definiáltuk. Mivel az id kijelölőt használtuk a col elemekre, ezért külön-külön tudjuk formázni az oszlopokat.

A colgroup elem használata.
A col elem egyesével jelöli ki az oszlopokat, a colgroup viszont egyszerre több oszlopot is kijelöl. Hogy pontosan mennyit, azt a span attribútumával tudjuk megadni. Most a 20 oszlopot felosztottuk 4×5 oszlopra, és külön formáztuk a 4 csoportot.

A col és a colgroup elem kombinálása.
Elöször egyesével jelöljük ki az oszlopokat a col elemmel, majd colgroup elemeket használunk.
Sorok csoportosítása a formázáshoz.
A sorok csoportosításához ismét új elemeket szükséges bevezetni. Ezek a thead, tfoot és tbody elemek. Ezeket pontosan ebben a sorrendben kell megadni, azaz a tfoot megelőzi a tbody elemet. Ez azért van így, hogy a böngésző előbb megjeleníthesse a tfoot elemet, és csak aztán a tbody elemet. A thead jelenti a táblázat fejlécét, amiben állhatnak th és td elemek is. A tfoot jelenti a táblázat láblécét, ez mindig legalul fog megjelenni, hiába írtuk a tbody elé! A tbody jelenti a táblázat testét. A thead és a tfoot elemkből maximum egyet meg kell adni, a tbody elemből viszont bármennyi lehet.

Ajánlott linkek

Miért butaság a táblázatos szerkezet? A probléma körülírása és a felkínált megoldás: http://www.hotdesign.com/seybold/hungarian/

Táblázatok vagy CSS? Weblabor fórumtéma: http://weblabor.hu/forumok/temak/16149

A HTML 4.01 specifikációja a táblázatokról: http://www.w3.org/TR/html401/struct/tables.html

Táblázatokhoz használható stílusok: http://www.w3.org/TR/CSS21/tables.html

A col és colgroup elemek böngészők általi támogatottsága: http://www.quirksmode.org/css/columns.html

A táblázatokra használható tulajdonságok böngészők általi támogatottsága: http://www.quirksmode.org/css/tables.html