Mi a táblázat?

A táblázat az adatok strukturált formája, mely sorokból és oszlopokból áll. Lehetővé teszi, hogy gyorsan és könnyen átnézzük az értékeket, illetve a kapcsolatokat az adatok különféle típusai között — ez lehet a személy neve és kora, a hetek és napok a naptárban vagy a kisiskolás órarendje.

A táblázatokat gyakran alkalmazzuk, és ez már régóta így van, amit az 1800-as évekből fennmaradt dokumentumok is tanúsítanak. Nem csoda hát, hogy a HTML megalkotói is adtak módot az adatok strukturált, táblázatos kimutatására a weben.

Hogyan működik a táblázat?

A táblázat lényege, hogy az információk könnyen értelmezhetőek legyenek a sorok és az oszlopok fejlécének köszönhetően. Ha helyesen alkalmazzuk, a HTML-táblázat a vakoknak és a gyengénlátóknak is sokatmondó, hiszen a képernyőolvasók is jól kezelik.

A táblázatok formázása

Nem szeretnénk megtéveszteni — egy jó táblázathoz nem elég a HTML. Ahhoz, hogy a táblázat igazán megfeleljen a webes világnak, nem árt CSS segítségével stilizálni a szilárd HTML-struktúrát. Kezdetnek azonban elég, ha a HTML részre összpontosítunk.

Mikor NEM ajánlatos HTML-táblázatokat használni?

A HTML-táblázatokat a táblázatos adatok tárolására tervezték. Sokan azonban a segítségükkel rajzolták ki a weboldalakat. Egy sorba került a cím, a következőbe a tartalom oszlopai, a legalsó sorba pedig a lábjegyzék. Ez azért volt megszokott gyakorlat, mert régen a böngészők nem igazán támogatták a CSS-t. Ma már szerencsére ritkábban találkozhatunk ilyen struktúrával.

Megállapíthatjuk, hogy a HTML-táblázatok alkalmazása a weboldal elrendezésére rossz ötlet. Hogy miért?

A táblázatos elrendezés megzavarja a képernyőolvasókat

A képernyőolvasók, melyek segítségével a vakok és a gyengénlátók is használhatják a webet, a táblázatot jelző jelöléseket úgy is értelmezik, mintha táblázatról volna szó, így ha ezeket a jelöléseket használjuk az oldal formázására, a képernyőolvasók összezavarodnak, a felhasználók pedig nem tudják értelmezni a hallottakat.

Bonyolultak lesznek a kódok

Mivel a HTML-táblázat nem erre lett kitalálva, az oldalak rendezése során általában igen bonyolult kódok keletkeznek, melyeket nehezebb megírni, karbantartani és javítani is.

A táblázat nem automatikusan reszponzív

A táblázatok mérete mindig a tartalomhoz igazodik, így ahhoz, hogy kisebb berendezéseken, például mobiltelefonokon is elérhetőek legyenek, külön lépéseket kell megtenni.

Fejléc hozzáadása a <th> elem segítségével

Fordítsuk a figyelmünket a táblázatok fejléceire — azokra a speciális cellákra, amelyekkel a sorok meg az oszlopok kezdődnek, és amelyek meghatározzák a tartalmazott adatok típusát. A fejlécek lehetővé teszik, hogy a táblázat szebb, könnyebben áttekinthető legyen, hiszen az adattípusok meghatározása kitűnik a többi sor és oszlop közül. A táblázatok fejléceinek még egy fontos előnyük van — a scope attribútum segítségével (erről a jövőben több szó is esik majd) lehetővé teszik, hogy minden fejléc össze legyen kötve a hozzá tartozó sor vagy oszlop összes adatával. Ez különösen a képernyőolvasók miatt fontos.

A cellák kiterjesztése több sorra és oszlopra

Időnként hasznos lehet, ha a cella több sorra vagy oszlopra is kiterjed. Tegyük fel, hogy állatfajokat akarunk bemutatni a táblázatban. Bizonyos esetekben szeretnénk feltüntetni az állat nemét is (tyúk/kakas), más fajoknál viszont nem (mosómedve) — és azt akarjuk, hogy ez utóbbi esetben ez az egy elnevezés foglalja el mindkét oszlopot, valahogy így:

Az “Állatok” és a “Mosómedve” cellák két oszlopra kell, hogy kiterjedjenek — ilyenkor használható a colspan attribútum, mely ezt lehetővé teszi. Két sorra kiterjedő cellák esetén a rowspan attribútum használatos. Mindkét attribútum számbeli értékeket fogad el, egység meghatározása nélkül. A szám az összeforrasztani kívánt sorok vagy oszlopok számát jelöli. Esetünkben ez így festene:

colspan="2"

Az oszlopok stilizálása

Még egy fontos dolog maradt, melyre érdemes figyelmet fordítani. A HTML-ben egy olyan módszer is van, amelynek segítségével stilizálhatjuk a táblázat oszlopait. Erre a <col> és <colgroup> elemek használatosak. Ezekre azért van szükség, mert így sokkal hatékonyabban és könnyebben formázhatjuk meg a táblázat oszlopait — enélkül valójában az oszlop fejlécét és minden celláját egyenként kellene stilizálni.

A <col> elem segítségével az egész oszlopot egyszerre tudjuk stilizálni, például háttérszínt rendelhetünk hozzá. A <col> elem a <colgroup> elembe kerül. Ha csak egy oszlopot szeretnénk stilizálni a kettőből, fontos, hogy a másikat üres <col> elemmel lássuk el. Ha mindkét oszlopnál szeretnénk igénybe venni a stíluselemet, a már említett span attribútumot használhatjuk.

Ezzel a HTML-táblázatokról szóló lecke végére érkeztünk. Próbáld ki valamennyi elemet és attribútumot, hogy a jövő héten felkészülten folytathasd a kalandozást a HTML izgalmas világában!

NYEREMÉNYJÁTÉK:

Néhány szó rólunk:

Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban.