Weboldalkészítő suli #15 – Rendezhető csíkos táblák

A HTML-táblákat körülbelül úgy kell elképzelni, mint egy táblázatkezelő program egy munkalapját, azaz sorokba és oszlopokba rendezett elemi cellák csoportját.

A tábla funkcionálisan elkülönülő részeit érdemes a megfelelő címkékkel megjelölni

Magát a táblát, vagyis a „munkalapot” egy ‹table›‹/table› páros nyitja meg és zárja le. A táblák sorokból állnak, amelyeket ‹tr›‹/tr› címkék jelölnek, és a sorokon belül találhatóak a cellák, amelyekből két fajta létezik: a standard cellák, amelyeket ‹td›‹/td›, és az ún. fejcellák, amiket ‹th›‹/th› címkékkel kell jelölnünk. Vagyis a lehető legegyszerűbb és legkisebb táblázat így néz ki:

‹table›
        ‹tr›
                ‹td›Cella‹/td›
        ‹/tr›
‹/table›

Ez a kód – természetesen a megfelelő HTML-es környezetbe ágyazva – egy egyetlen cellából álló, vagyis egysoros-egyoszlopos táblázatot jelenít meg. A „Cella” helyett szinte bármilyen összetett HTML-kódsorozatot is írhattunk volna, így táblázat celláin belül megjeleníthetünk több bekezdést, képe(ke)t, de akár hosszabb listákat is.

A hátterekkel és a keretekkel „eljátszogatva” akár 3D-hatású cellákat is létrehozhatunk

Ha a ‹td›Cella‹/td› helyett azt írtuk volna, hogy ‹th›Cella‹/th›, akkor jelen pillanatban csak annyi különbséget látnánk, hogy a „Cella” szöveg félkövér betűkkel jelenik meg, ugyanis míg a standard cellák alapértelmezés szerint normál betűstílussal balra zártan jelennek meg, addig az oszlop vagy sor fejrovatok címei félkövéren és középre igazítva. De mivel a cella szélessége most pontosan megegyezik a tartalom szélességével, ezért a megjelenést nem befolyásolja az igazítás iránya.

Beállíthatjuk a cellán belüli függőleges igazítást is

A ‹table› elemnek nagyon sok attribútumot adhatunk meg, szélsőséges esetben egy táblaindító címke ilyen rémálomszerűen is kinézhetne:

‹table title="Ez a tábla címe" summary=”mintatábla” width="50%" height="100px" border="1" cellspacing="3" cellpadding="2" align="center" bordercolor="#000080" bordercolorlight="#000800" bordercolordark="#080000" background="tablebg.png" bgcolor="#cccccc" frame="above" rules="rows"›

Ezt a fajta attribútumhalmozást több ok miatt is ajánlatos elkerülni. Egyrészt, mert ezeknek a tulajdonságoknak egy jelentős részét szerencsére érvénytelenítették az XHTML megjelenésekor. Másrészt azért, mert ezek egy része erősen böngészőfüggő, azaz vannak olyanok, amelyek hatását csak Internet Explorer, mások pedig csak Firefox alatt láthatjuk. Harmadrészt pedig azért, mert a nem a tartalomhoz kapcsolódó tulajdonságokat nem itt, hanem a stíluslapoknál illik megadni. Márpedig a fenti 15 attribútumból mindössze kettő olyan van, ami a tartalomhoz kapcsolódik: a title, amit akkor jelenítenek meg a böngészők, amikor az egérkurzor a tábla fölött időzik éppen, és a summary, amire pedig akkor van szükség, ha oldalainkat úgy akarjuk elkészíteni, hogy felolvasó szoftvereket használó gyengénlátók és vakok is használni tudják. (E témára egy későbbi leckében még visszatérünk.) Az összes többi tulajdonságot – néhány továbbival kiegészítve – inkább az oldalhoz kapcsolt CSS-állományban érdemes megadnunk. (A képen látható és a CD/DVD-mellékleten található példában azért maradt benne néhány attribútum, mert ennél még nem használtunk CSS-t, de azért szerettük volna, ha jól látszanak a tábla részei.)

A sorok esetében, vagyis a ‹tr› címkéknél az az érdekes, hogy az akár attribútummal, akár a stílusokkal ezekhez rendelt tulajdonságok szinte mindegyike tulajdonképpen nem is ezek kinézetét változtatja meg, hanem a sorban található cellákét. Így például az align="center" attribútum vagy a text-align: center; stílus nem a sort fogja középre igazítani, hanem a sorban található valamennyi cella tartalmát (amennyiben az egyes celláknál ezt felül nem bíráljuk). Miután a mégiscsak a cellákban található a táblázatok érdemi része, így érthető, hogy ezeknél találjuk a legtöbb kimondottan a tartalommal kapcsolatos attribútumot, azonban ezek többségét (abbr, axis, headers, scope stb.) nem a böngésző-, hanem a felolvasó programok képesek értelmezni.

A cellaelemekhez tartozik két olyan attribútum is, amelyek tulajdonképpen formaiak, mégsem a stílusoknál, hanem az (X)HTML-kódban kell megadnunk. A cellák colspan és a rowspan tulajdonságai ugyanis azt mondják meg a böngészőknek, hogy a tábla kirajzolásakor az adott cellát mennyi szomszédos oszlop (colspan) és/vagy sor (rowspan) cellával kell összevonni. Ezek használata elég egyszerű, azonban nagy odafigyelést igényel, ugyanis roppant könnyű elrontani, főként összetett táblafejek tervezésekor. Ugyanis, ha egy ötoszlopos táblázat első cellájában azt adjuk meg, hogy össze kell vonni az első három oszlopot (‹td colspan="3"›), akkor ezt követően már csak két további ‹td› elem következhet (már ha ebből az első nem ‹td colspan="2"›, hiszen akkor elfogytak az oszlopaink. Hasonlóképpen, ha azt adjuk meg az első cellánál, hogy ‹td rowspan="3"›, akkor a következő két sorban már csak 4-4 üres cella marad. A böngészők ráadásul semmilyen hibaüzenetet nem adnak, és a különféle validátorok sem veszik észre, ha elrontottuk a cellaösszevonásokat. Ilyenkor viszont az eredmény néha igencsak furcsán fog kinézni a képernyőn.