7. A szöveg tördelése III.: A táblázatok
A korábbiakban megtanultuk, hogyan lehet HTML-ben a szöveget tördelni, illetve megismerkedtünk egy speciális tördelési móddal, a listával. A HTML-ben azonban rendelkezésünkre áll még egy nagyon hatékony eszköz, mégpedig a táblázat. Segítségével nagyon könnyúű az adatok rendszerezése, bemutatása.
A táblázat felépítése
A HTML-ben minden táblázat sorokból és oszlopokból áll. Ezek kezdetét és végét akkor is jelölnünk kell, ha csak egy sor vagy oszlop van. A sorokon és oszlopokon kívül magának a táblázatnak is meg kell jelölnünk a kezdetét és a végét. Három elemre van tehát szükségünk: a <table> jelöli a táblázat elejét, a <tr> az új sor kezdetét, a <td> az új cella (oszlop) elejét. A megfelelő záróelemek jelölik az adott egsység végét. A legegyszerűebb, egyszer egyes táblázatot tehát ezzel a forrássorral hozhatjuk létre:
<table><tr><td></td></tr></table>
Ebből azonban még semmit nem fogunk látni. Célszerű tehát valamit a táblázatba írni. Szabályosan csak a cellákba írhatunk, tehát a <td> és a </td> közé. Bár az ezeken kívül írt szövegek is megjelennek, mégsem szabályos az ilyen eljárás, hiszen kiszámíthatalan, hogy a különböző böngészők hogyan jelenítik meg. Különben is, azért hozzuk létre a táblázatokat, hogy a cellákba írjunk. Próbáljuk ki tehát a következőt:
<table><tr><td>Próbatáblázat.</td></tr></table>
Láthatjuk, hogy a szöveg megjelenik, de honnan tudjuk, hogy ez táblázat? Ahhoz, hogy ez egyértelmű legyen, legalább kétszer kettes táblázatra van szükség. Próbáljuk ki tehát:
<table><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>
Láthatjuk, hogy az egyes és a kettes kis távolságra jelenik meg egymástól, a hármas és a négyes pedig új sorban: a hármas az egyes, a négyes a kettes alatt.
A fejlécek
Ha a táblázatnak fejlécet szeretnénk adni, akkor a megfelelő cellákat a <td> helyett <th> elemmel kell megjelölni. Az előző táblázatunknak így adhatunk fejlécet (a forrást a jobb áttekinthetőség kedvvéért érdemes tördelni):
<table>
<tr>
<th>Páratlan</th>
<th>Páros</th>
</tr><tr>
<td>1</td>
<td>2</td>
</tr><tr>
<td>3</td>
<td>4</td>
</tr>
</table>
A fejléc félkövéren, középre igazítva jelenik meg. Természetesen ugyanezt a hatást érjük el, ha a cellán belül a <b> elemet használjuk. A fejléc-elemet nem csak a táblázat szélén, hanem azon belül is bárhol használhatjuk, bár szabályosabb, ha csak a fejlécet jelöljük vele, és a kiemelésekhez más elemeket használunk.
A táblázat igazításai
Ha a fenti példát kipróbáltuk, láthattuk, hogy a böngészők a táblázatot a bal oldalon jelenítik meg. Ha a táblázatot középre vagy jobbra szeretnénk igazítani, a <table> elemen belül használjuk a jól ismert align paramétert! Ha a cellán belül szeretnénk igazítani, akkor az align paramétert a <td> elemben használjuk! Vegyük azonban észre, hogy ha egy nagyobb táblázat minden elemét középre szeretnbénk igazítani, akkor minden cellában meg kell adni az igazítás paraméterét!
Bár a stíluslapokkal csak később foglalkozunk, már itt eláruljuk, hogy a cellán belüli igazításnak van egy egyszerűbb módja is. Ehhez a következő sort kell elhelyezni a fejben:
<style><!----td {text-align: center;}---></style>
Ennek hatására az összes cellában középre igazodik a szöveg. A td th-ra cserélésével a fejlécek igazítását végezhetjük el, és a center helyébe is írhatunk right-ot vagy justify-t. A stíluslapokról részletesebben később lesz szó.
A táblázat kerete
A korábbiakban láthattuk, hogy a táblázatban a böngésző valóban cellákba rendezi a szövegeket, de a cellák határait nem láttuk. Ahhoz, hogy a táblázatnak keretet adjunk, a <table> elemben el kell helyeznünk a border paramétert, és megadni, hány pixel vastag keretet szeretnénk, pl: <table border=3>. Ez egy három pixel szélességű kerettel rendelkező táblázatot hoz létre. Ha azonban a táblázatnak keretet adunk, még egy apróságra kell figyelnünk: az üres cellák „vakablakként” jelennek meg. Ezen nem változtat az sem, ha szóközt rakunk beléjük. Ha tehát azt szeretnénk, hogy az üres cella megjelenjen, egy nem törhető szóközt kell írnunk belé ( ).
A táblázat és a cellák szélessége
Mint a korábbiakban láthattuk, a böngészők a tábláztat, ill. az egyes cellák szélességét a cellákba írt szöveg hosszúsága alapján állítják be. A táblázat szélességét mi magunk is meghatározhatjuk a <table> elemben, width paraméterrel. A táblázat szélességének értékét pixelben vagy százalékban adhatjuk meg. Hasonlóképpen megadhatjuk az egyes cellák szélességét (csak pixelekben!), ha azonban a táblázat szélességénél nagyobb vagy kisebb értéket adunk meg, a böngésző önkényesen fogja értelmezni. Egymás alatt álló celláknak azonban csak azonos szélességet adhatunk, ellentmondó szélességmegadás esetén a böngésző csak az elsőt veszi figyelembe.
A cellák egyesítése
Gyakran előfordul, hogy egy táblázatban olyan cellákra van szükségünk, melyek több szomszédos cella szélességének felelnek meg. Ilyenkor az adott sorban kevesebb (de szélesebb) cella található. Ha azonban egyszerűen kevesebb cellát adunk meg HTML-ben, akkor a böngésző a „hiányzó” cellák helyén „tömör” cellá(ka)t fog megjeleníteni. Megadhatjuk aznonban, hogy egy cella legyen szélesebb. Erre szolgál a colspan paraméter, melyben azt adhatjuk meg, hogy hány cellányi széles legyen az adott cella. Például:
<table align=center>
<tr>
<th colspan=2>Számok</th>
</tr><tr>
<th>Páratlan</th>
<th>Páros</th>
</tr><tr>
<td>1</td>
<td>2</td>
</tr><tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Ebben az esetben az első sorban csak egy cella van, az viszont kétszer olyan széles, mint a többi sorban álló cellák. A cellákat nem csak soron, hanem oszlopon belül is lehet egyesíteni. Ilyenkor a rowspan paraméterben kell megadnunk, hogy hány cella magas legyen az adott cella. Ilyenkor a cella „bekebelezi” az alatta levő cellákat, éppen ezért azokat a következő sorokban már nem kell, sőt, nem is szabad megadni. (Ha mégis megadjuk őket, felborul az oszlopok elrendezése, és az egyesítet cella első sorában felesleges tömör cella fog megjelenni. Az ehhez hasonló formázási hibákra a különböző böngészők másképp reaágálnak: az ilyen formázási következetlenséégek a többé-kevésbé helyes megjelenéstől függetlenül mindegyik hibának számítanak, kerüljük őket!)
Táblázatok egymásba ágyazása
A HTML-ben semmi nem akadályozza meg, hogy akármelyik cellában elhelyezzünk egy újabb táblázatot, annak valamelyik cellájába egy másikat stb. (Korlátnak legfeljebb a képernyő mérete, ill. az oldal áttekinthetősége szab határt. Harmadik beágyazott tábélázatra csak igen ritkán lehet szükségünk, negyedikre gyakorlatilag soha.
Mire használhatjuk az egymásba ágyazott táblázatokat? Képzeljük el, hogy egy olyan oldalt szeretnénk készíteni, melyben a főszövegben valamit fejtegetünk, miközben az oldal szélén meg szeretnénk magyarázni a legfontosabb szakkifejezéseket. Ilyen esetben a legcélszerűbb, ha egy olyan táblázatot készítünk, mely teljes szélességében (de legalábbis megközelítően) kitölti a képernyőt, és két cellára osztjuk: egy keskenyre és egy szélesre. A keskeny cellába írhatjuk a szakkifejezéseket és magyarázatukat, míg a szélesbe magát a fejtegetést. Ha pedig a fejtegetésben bizonyos adatokat szertetnénk táblázatban bemutatni, ennek semmi akadálya: a cellán belül is elhelyezhetünk egy újabb táblázatot. Mindez lehetővé teszi, hogy régebbi teljes oldalainkat is egy cellába tegyük, és egy másikban kiegészítsük. Ha például van egy angol nyelvű oldal, amit lefordítotunk magyarra, a két oldalt egy-egy cellába helyezve egymás mellett látjuk a két szöveget. (Természetesen a méretek helyességére, az esztétikus elrendezésre külön figyelmet kell fordítani.)
Feladatok
1. Készítsünk el egy táblázatot, amelyben néhány termék nevét, adózás előtti és utáni árát soroljuk fel! Tekintsük meg a példamegoldást!
2. Gyakoroljuk a cellék egyesítését! Nézzük meg az ábrát, és készítsük el az alakzatot! Nehézségek esetén nyugodtan nézzünk bele a forrásba!
3. Ez a feladat már valamivel több gondolkodást kíván, de ne ijedjünk meg tőle! Készítsük el a magyar lát ige összes múlt idejű alakját! Ne feledkezzünk meg a tárgyas és a tárgyatlan ragozásról, a második személyű tárgyról és a feltételes módról sem! A nem létező alakok helyén a táblázatban tömör cella legyen! Segítségképpen akár előre is megnézhetjük a példamegoldást. Ha ezt a táblázatot szépen meg tudtuk szerkeszteni, akkor bátran belefoghatunk bármilyen táblázat megszerkesztésébe!