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 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:

<table border="1" cellpadding="10" cellspacing="0">
	<tbody>
		<tr>
			<td colspan="2">
			<p>Állatok</p>
			</td>
		</tr>
		<tr>
			<td colspan="2">
			<p>Mosómedve</p>
			</td>
		</tr>
		<tr>
			<td>
			<p>Tyúk</p>
			</td>
			<td>
			<p>Kakas</p>
			</td>
		</tr>
	</tbody>
</table>

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 és 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 elem segítségével az egész oszlopot egyszerre tudjuk stilizálni, például háttérszínt rendelhetünk hozzá. A elem a elembe kerül. Ha csak egy oszlopot szeretnénk stilizálni a kettőből, fontos, hogy a másikat üres 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!