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

Amikor honlapunkon sok-sok adatot tartalmazó táblázatokat vagy például tabulált listákat szeretnénk megjeleníteni, akkor e célra leginkább HTML-táblákat használunk. Ezeket a táblázatokat – a megfelelő előkészületek után – néhány stíluselemmel és egy-két JavaScript funkcióval „megfűszerezve” nemcsak sokkal csinosabbá, de áttekinthetőbbé és felhasználóbarátabbá is alakíthatjuk.

A HTML ‹table› elemét a webdizájnerek hosszú éveken keresztül nem igazán arra használták, amire a szabvány tervezői kitalálták. Egészen a közelmúltig a legtöbb webdizájner – részben a kiadványszerkesztésben szerzett rutinnak „köszönhetően”, részben azért, mert az volt az éppen aktuális trend – számtalan egymásba ágyazott ‹table› elemmel oldotta meg az oldalrészek, oldalelemek elhelyezését. Az oldalakat gyakorlatilag sok kisebb-nagyobb méretű darabra szabdalták, majd ezeket a darabokat töltötték meg képekkel és szövegekkel. Azonban egy ilyen módon kialakított oldalelrendezés esetében szinte a legkisebb dizájnváltoztatás is azt jelentette, hogy a munkát a legelejéről kellett kezdeni. A helyzetet jelentős mértékben rontotta, hogy több, magát profinak mondó WYSIWYG webszerkesztő és grafikai program fejlesztői is ezt a megoldást választották a HTML-export funkciónál, vagyis még ezek a szoftverek is rossz példát mutattak a kezdő webfejlesztőknek.

Így néz ki táblánk „nyers” változata

Szerencsére – néhány őskövületnek nevezhető oldalt és programot leszámítva – a táblázatos elrendezés már a múlté, és a ‹table› elemet többnyire arra használják a weboldalak készítői, amire való: adatok, listák táblázatos megjelenítésére. Mi például a Lorem Ipsum MMIX konferenciára regisztrált előadók és résztvevők listának megjelenítésére alkalmazzuk, ám előtte ismerkedjünk meg egy kicsit közelebbről a táblázatokkal és azok elemeivel.