HTML táblázat készítés (HTML table)

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.

HTML táblázat készítés (HTML table) cikk nyitóképe

HTML táblázat készítés (HTML table)

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.

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:

<table> <tr> <td>Első cella</td> <td>Második cella</td> </tr> </table>
Code language: HTML, XML (xml)

HTML táblázat címsor

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.

Példa

HTML kód

<table> <tr> <th>Első címsor</th> <th>Második címsor</th> </tr> <tr> <td>Első cella</td> <td>Második cella</td> </tr> </table>
Code language: HTML, XML (xml)

Eredmény

Első címsorMásodik címsor
Első cellaMásodik cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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.

Keret, szegély kód:

table, th, td, tr { border: 1px solid black; }
Code language: CSS (css)

Példa

HTML kód

<!DOCTYPE html> <html> <head> <style> table, th, td, tr { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>Első címsor</th> <th>Második címsor</th> </tr> <tr> <td>Első cella</td> <td>Második cella</td> </tr> </table> </body> </html>
Code language: HTML, XML (xml)

Eredmény

Első címsorMásodik címsor
Első cellaMásodik cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Dupla vonalas szegély megszüntetése

Ha a szegély dupla vonallal jelenik meg és ez téged zavar, akkor ezzel a kóddal könnyedén összevonhatod a szegélyeket.

table, th, td, tr { border: 1px solid black; border-collapse: collapse; }
Code language: CSS (css)

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:

<th colspan="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.

Példa

HTML kód

<table> <tr> <th>Vezetéknév</th> <th colspan="2">Keresztnév</th> </tr> <tr> <td>Cellár</td> <td>László</td> <td></td> </tr> <tr> <td>Kádár</td> <td>Petra</td> <td>Vivien</td> </tr> </table>
Code language: HTML, XML (xml)

Eredmény

VezetéknévKeresztnév
CellárLászló
KádárPetraVivien

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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.

<th rowspan="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.

Példa

HTML kód

<table> <tr> <th>Vezetéknév</th> <td>Cellár</td> <td>Kádár</td> </tr> <tr> <th rowspan="2">Keresztnév</th> <td>László</td> <td>Petra</td> </tr> <tr> <td></td> <td>Vivien</td> </tr> </table>
Code language: HTML, XML (xml)

Eredmény

VezetéknévCellárKádár
KeresztnévLászlóPetra
Vivien

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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.

Szintaktika

<caption>Táblázat címe</caption>
Code language: HTML, XML (xml)

Példa

HTML kód

<caption>Táblázat címe</caption> <table> <tr> <th>Első címsor</th> <th>Második címsor</th> </tr> <tr> <td>Első cella</td> <td>Második cella</td> </tr> </table>
Code language: HTML, XML (xml)

Eredmény

Táblázat címe
Első címsorMásodik címsor
Első cellaMásodik cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Táblázat háttérszíne

A táblázaton bármilyen stílusbeállításokat elvégezhetünk. Például a háttérszínét is meghatározhatjuk.

Példa

HTML kód

<table style="background-color:yellow;"> <tr> <th>Első címsor</th> <th>Második címsor</th> </tr> <tr> <td>Első cella</td> <td>Második cella</td> </tr> </table>
Code language: HTML, XML (xml)

Eredmény

Első címsorMásodik címsor
Első cellaMásodik cella

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!