Table, TR, TD, TH – a táblázat beillesztése HTML kódba

Ha az épülő honlapon táblázatot szeretnénk elhelyezni, akkor a HTML kódban kell definiálnunk azt, beillesztve a szükséges tageket, hogy létrejöjjön a táblázat szerkezete. Különböző attribútumokkal pedig a táblázat megjelenését és elrendezését tudjuk módosítani. A cikkben ezeket vesszük sorra, szerkeszthető példákkal kiegészítve. 

HTML táblázatok segítségével szöveges tartalmat, számokat, képeket, linkeket rendezhetünk sorokba és oszlopokba és cellákba. 

A <table> tag segítségével hozhatunk létre táblázatot. A táblázat sorait a <tr> taggel hozhatjuk létre, a cellákat a <td> taggel illeszthetjük be (az angol row és data szavak kezdőbetűi miatt alakul így a rövidítés). A cellák tartalmát, a tényleges adatokat a <td> tagek közé kell beírni. 

 

 

Fontos szerepet játszanak az átláthatóságban a táblázat címsorai (heading). Ezeket <th> taggel hozhatjuk létre, a ilyenkor a cella tartalma nem adatként, hanem címsorként definiálódik, megjelenítése pedig félkövér lesz. 

Alapesetben a cellákba kerülő tartalmak, amik <td> tagek közé kerülnek, balra vannak igazítva, a címsorok pedig középre. 

Caption – a táblázat címe

Az egész táblázatra vonatkozó leírást vagy címet <caption> taggel adhatunk meg, ez a táblázat felett fog megjelenni. A <table> tag után, még az első <tr> tag elé kerül a cím vagy leírás.

Table border – a táblázat szegélye

A táblázat szegélyére vonatkozó információ a <table> tag border attribútumaként kerül a kódba. Ha ha szeretnénk látni a rácsvonalakat, akkor border = “1” -et, “2”-t stb. használunk aszerint, milyen vastagságú vonalakat szeretnénk. 

Cellpadding, cellspacing – a cellák távolsága

A táblázat elrendezése nem csak alapértelmezett beállítások szerint jelenhet meg. Növelhetjük a cellák közötti teret és a cella tartalma valamint szegélyek közötti teret, hogy szellősebb, áttekinthetőbb legyen a táblázat, méghozzá a cellpadding és a cellspacing attribútumokkal. Ezek is a <table> tagen belülre kerülnek.

Width és height – a táblázat méretezése

A táblázat fix szélességet és magasságát is beállíthatjuk, ez a width és height attribútumokkal lehetséges. Megadhatjuk pixelpontban vagy a teljes képernyőhöz viszonyított százalékarányban. 

Colspan és rowspan – sorok vagy oszlopok egyesítése

Sorok és oszlopok egyesítéséhez a colspan (column: oszlop) és rowspan (row: sor) attribútumok használatára van szükség, melyek a <td> tagen belülre kerülnek, még a cella tartalma elé. Az utána következő értékkel azt adjuk meg, hány cellát egyesítünk.

Táblázat színbeállítások

Bordercolor – a táblázat szegélyeinek színe

Az elválasztóvonalak színét a bordercolor attribútummal állíthatjuk be. Ezután színnévvel, vagy színkóddal adhatjuk meg a kívánt árnyalatot. Erről bővebben a HTML színkódok című cikkben olvashatsz.

Bgcolor – a táblázat háttérszíne

Az egész táblázat és egy-egy cella is kaphat háttérszínt, a bgcolor attribútum segítségével. Ebben az esetben is színkódokat, illetve színneveket használhatunk.

Reméljük, megtalálod a cikkben az információt, amire szükséged van, hogy áttekinthető és látványos táblázatokat készíts. Arra biztatunk, hogy kattints rá a szerkesztő felületre és próbáld ki te magad is a különböző beállításokat. Adj meg új méreteket, színeket, keresd meg a neked tetsző színek kódjait, változtass a táblázaton. Így azonnal gyakorlod is az olvasottakat, ami segít elmélyíteni a tudást, és valóban elsajátítani a táblázatkészítés mikéntjét.

 

 

A CodeBerry Programozóiskola “Programozási oktatóanyagok” sorozatában olyan kiegészítő tananyagokat találsz az egyes programnyelvekhez, melyek segítségével gyorsan és egyszerűen sajátíthatod el a programozás alapjait.

Szeretnél online megtanulni programozni? Gyere, és próbáld ki az első 25 leckénket ingyen a CodeBerry Programozóiskolában!