Tartalomjegyzék

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 &nbsp; (non-breaking space).

<table>
  <tr>
    <td>első sor, első oszlop</td>
    <td>&nbsp;</td>
    <td>első sor, harmadik oszlop</td>
  </tr>
  <tr>
    <td>&nbsp;</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">&nbsp;</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">&nbsp;</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
  Internet Explorer Mozilla Firefox
6.0 7.0 1.5 2.0
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

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

Tartalomjegyzék Impresszum, szerzői jogok