Táblázatok viszonylag bonyolult szerkezetek, amelyek sorokból és oszlopokból állnak. A táblázat külső váza mindig a table elemet alkotja.
<table> … </table>
Ennek az elemnek a keretein belül történik a tábla valódi meghatározása. Egyébként ajánlott egy keretet hozzárendelni az HTML-ben történő táblázat elkészítése közben. Így könnyebben nyomon követhető, hogy a sorok és oszlopok pontosan hol futnak. Ehhez az indító <table> elemben az border="1" attribútum-érték párost kell hozzárendelni. (Figyelem: Az border attribútumot nem ajánlott használni HTML-ben. Ehelyett a megfelelő CSS tulajdonságokra kell támaszkodni. Erről azonban később lesz szó).
<table border="1"> … </table>
Folytatjuk a táblázat sorainak meghatározásával. Ezt az tr elem segítségével lehet megtenni.
<table border="1"> <tr></tr> </table>
Ez azonban még nem vezet a kívánt kimenethez. A következő lépésben a oszlopokat kell definiálni. Ezt újra a td elem segítségével tehetjük meg.
<table border="1">
<tr>
<td></td>
</tr>
</table>Most már definiálhatjátok az első táblázattartalmat. Ezt a <td> és </td> között kell meghatározni.
<table border="1">
<tr>
<td>Tartalom 1</td>
</tr>
</table>
Most már érdemes megnézni az eredményt a böngészőben.
Ez még korántsem túl látványos, hiszen jelenleg a tábla csak egy cellából áll. Most hozzáadhattok még egy oszlopot. Ezt újra egy td elem segítségével tehetitek meg. Ügyeljetek arra, hogy ezt a tr elemen belül határozzátok meg.
<table border="1">
<tr>
<td>Tartalom 1</td>
<td>Tartalom 2</td>
</tr>
</table>
Itt ismét egy pillantás az eredményre.
További sorok hozzáadásához egyszerűen hozzá kell adni egy további tr elemet, amelyben az újabb td elemeket lehet meghatározni.
Itt ismét egy példa:
<table border="1">
<tr>
<td>Tartalom 1</td>
<td>Tartalom 2</td>
</tr>
<tr>
<td>Tartalom 3</td>
<td>Tartalom 4</td>
</tr>
</table>
Egy pillantás az eredményre a böngészőben:
Ezen módszerrel tehát bonyolultabb táblázatokat is létrehozhattok.
Fejrész, Törzs és Lábrész megadása
A táblázatok logikai részekre oszthatók. Ezek egy fejrészt, egy vagy több adatrészt és egy lábrészt foglalhatnak magukban. A következő példa mutatja, hogyan is nézhet ki ez:
<table border="1">
<thead>
<tr>
<th>Indulás</th>
<th>Érkezés</th>
<th>Peron</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Berlin</td>
<td>Stralsund</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Berlin</td>
<td>Hamburg</td>
<td>1</td>
</tr>
<tr>
<td>München</td>
<td>Berlin</td>
<td>3</td>
</tr>
</tbody>
</table>A böngészőben ez látszódik:
Az így meghatározott részeknek nyilvánvalóan nincs vizuális hatása. Felmerül egy kérdés: Miért kell tehát erőfeszítést tenni ezeknek a részeknek a meghatározására? Két jó oka van ennek:
• CSS segítségével a részek különböző formátumban jeleníthetők meg igény szerint.
• A böngészők képesek hosszú táblázatok nyomtatásakor az összes oldalon megismételni a táblázat fej- és lábrészét.
A táblázat fejezetét <thead> nyitja meg. Ezt követik a táblázathoz tartozó fejrégió sorai. Ne felejtsétek el lezárni a fejrégiót </thead> elemmel.
Ha a táblázatnak lábrésze is kell, az feltétlenül meg kell előznie a törzsrész meghatározását. A lábrészt a <tfoot> eleme nyitja, melyet a lábrégiónak tartozó egy vagy több sor követhet. Zárjátok le a lábrészt a </tfoot> elemmel.
A törzsrész lényegi részét a tbody elem határozza meg. Ez a tbody többször is előfordulhat. A törzsrész mindig a </tbody> elem zárja le.
Miért lenne például egy táblázatban több tbody elem? Erre jó példa lehet a Bundesliga táblázata. Egy ilyen táblázatban általában több részleg van.
• Bajnok
• Bajnokok Ligája résztvevők
• Bajnokok Ligája-selejtezős
• Európa Liga résztvevők
• Szürke középmezőny
• Kiesés ellen védekező hely
• Kiesők
Minden ilyen részleget egy külön tbody elembe lehetne csomagolni, majd ezeket CSS segítségével különböző módon formázni.
Oszlopok előre meghatározása
Hogyan jelenik meg a táblázat a böngészőkben, természetesen elsősorban attól függ, hogy hány sor és oszlop van jelen. A tábla megjelenítése folyamata azonban nem olyan egyszerű a böngészők számára. Valójában a böngészőnek mindig teljesen be kell olvasnia a teljes táblázatot, mielőtt megjeleníthetné azt. Különösen hosszú táblázatok esetén ez természetesen bizonyos időt igénybe vehet. Ezt a problémát el lehet kerülni a böngészőnek közvetlenül közölve, hogy valójában hány oszlopból áll a táblázat.
<table>
<colgroup span="2"></colgroup>
<tr>
<th>ISBN</th>
<th>Cím</th>
<th>Ár</th>
</tr>
<tr>
<td>23223423434</td>
<td>Majdnem mindent magába foglaló rövid történet</td>
<td>29,95 euró</td>
</tr>
</table>
Az colgroup csoport _hárítja el a növekmény-megjelöléseket. Megjegyzés, hogy a colgroup számára a korábbi HTML verziókban elérhető attribútumok többsége már nem engedélyezett az HTML5-ben. Ezek közül most már csak a span attribútumot engedélyezik. A span az elemek számát várja értékként, amelyek a táblázatban szerepelnek.
A colgroup elem közvetlenül az indító <table> mögött helyezkedik el. Az oszlopokat magukat az egyes col elemek határozzák meg.
A colgroup használatakor alapvetően két lehetőség van:
• A span attribútum használatával
• A span attribútum nélkül
Ha nem használunk span attribútumot, akkor minden oszlop esetében, amelyre az oszlopcsoporthoz tartozó oszlopok kiterjednek, külön-külön definiálnunk kell egy-egy col elemet a colgroup elemen belül. Vegyük figyelembe, hogy a col önálló elem.
<table>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<th>ISBN</th>
<th>Cím</th>
<th>Ár</th>
</tr>
<tr>
<td>23223423434</td>
<td>Majdnem mindent magába foglaló rövid történet</td>
<td>29,95 euró</td>
</tr>
</table>
Egyébként van egy vegyes forma is.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> …
Ez mindig praktikus, amikor egy oszlopot külön kell előre meghatározni, de a többit egy csoportba szeretnénk vonni.
