Tanuld meg a HTML táblázat készítését ingyen ebből a cikkből. A HTML táblázatok lehetővé teszik, hogy az adatainkat sorokba és oszlopokba rendezzük és ezáltal egy sokkal átláthatóbb adatszerkezetet kapjunk.
A HTML táblázatok lehetővé teszik, hogy az adatainkat sorokba és oszlopokba rendezzük és ezáltal egy sokkal átláthatóbb adatszerkezetet kapjunk. A táblákat ugyebár senkinek sem kell bemutatni, mindenki találkozott már táblázatokkal.
Tartalomjegyzék
HTML táblázat felépítése
Először is fontos megmondanunk a böngészők számára, hogy itt egy HTML táblázat fog következni. Ezt egy <table> nyitó és egy </table> zárópárral tehetjük meg.
<table></table>Code language:HTML, XML(xml)
A kettő közé fogjuk írni a táblázat többi elemét, például az oszlopait, sorait, vagy a tartalmat.
A <tr></tr> párossal létrehozhatunk egy konkrét sort a táblázatunkban. Ha szeretnénk ebbe a sorba cellákat elhelyezni, akkor használnunk kell a <td> elemet. Így néz ki egy konkrét sor:
Az előző példában <td>-t használtunk, de használhatunk a táblázat első sorában <th>-t is, amely egy táblázat címsort takar. Alapértelmezetten félkövéren jelenik meg. Kiemelkedik a többi sortól, jól látszik, hogy nem adatot tartalmaz, hanem csak az adott sor vagy oszlop tartalmát írja le.
A fent látható példában meghatároztam, hogy ez egy táblázat lesz a <table> elemmel. Majd létrehoztam egy sort a <tr>-el, amibe létrehoztam két címsor cellát a <th>-val. Majd bezártam az első sort a </tr>-el. Majd nyitottam egy új sort a <tr>-el, amibe létrehoztam két cellát a <td>-vel. Majd bezártam az új sort a </tr>-el és bezártam az egész táblázatot is a </table>-el.
A <td> elemek tartalmazhatnak további HTML elemeket is (pl.: h1), vagy akár képeket, listákat stb.
Keret, szegély hozzáadása a HTML táblázathoz
Látható a fenti példában, hogy alapértelmezett esetben a táblázat körül nincs keret, szegély. A megszokott táblázatokban viszont szokott lenni, ezt egy nagyon egyszerű kódrészlettel érhetjük el.
A border: 1px solid black; sort már előzőleg megadtuk, ezzel érjük el a keretet. A border-collapse: collapse; intézi el a dupla szegélyvonal összevonását.
Táblázat oszlopainak összevonása
Van olyan eset amikor szükséges lehet egy táblázaton belül két oszlopot összevonni, ezt nagyon egyszerűen megtehetjük a HTML nyelvben az alábbi utasítással:
<thcolspan="2"></th>Code language:HTML, XML(xml)
Fontos, hogy akár 3-4, sőt még több oszlopot is összevonhatunk, csak cseréljük ki a „colspan=” után szereplő számot.
A fent látható példán láthatjuk, hogy összevontuk a keresztnév mezőt, mivel van olyan eset, amikor valakinek két keresztneve van. Úgy kell alkalmazni ezt, hogy arra a <th>-ra vagy <td>-re, amelyet szeretnénk összevonni más cellával, arra alkalmazzuk a colspan tulajdonságot.
Táblázat sorainak összevonása
Olyan eset is létezik, amikor nem két oszlopot, hanem két sort kell összevonni, erre is van megoldás a HTML nyelvben.
<throwspan="2"></th>Code language:HTML, XML(xml)
Fontos, hogy akár 3-4, sőt még több sort is összevonhatunk, csak cseréljük ki a „rowspan=” után szereplő számot.
A fent látható példán láthatjuk, hogy összevontunk két keresztnév mezőt, mivel van olyan eset, amikor valakinek két keresztneve van. Úgy kell alkalmazni ezt, hogy arra a <th>-ra vagy <td>-re, amelyet szeretnénk összevonni más cellával, arra alkalmazzuk a rowspan tulajdonságot.
Táblázat elnevezése, feliratozása
Van lehetőségünk a HTML nyelvben arra is, hogy elnevezzük a táblázatot, azaz címet adjunk neki. Így a látogató a címből könnyedén kiderítheti, hogy miről is szól a táblázat.
