HTML5 Táblázatok
A táblázatok lényegében nem sokat változtak az előzőekhez képest, de úgy gondoltam érdemes szót ejtenünk róla, hiszen így lesz teljes a kép. Az ember a táblázatban általában összetartozó adatokat ábrázol. Egy kis trükkel és persze a CSS3 segítségével nagyon szépen fel tudjuk dobni az általunk készített táblázatokat. Esetleg grafikonokat is készíthetünk, de erről egy későbbi cikk szól majd. Nézzük milyen lehetőségeink vannak ha táblázatokat szeretnénk készíteni.
A táblázatokhoz tartozó elemek
<table> – táblázat definiálása. Nos, a <table> elem esetében jelenleg egyetlen régi attribútum sem támogatott, így érdemes azokat kerülni.
<caption> – A táblázat címe, itt is megszűnt az összes attribútum támogatása egyelőre.
<colgroup> – oszlopcsoport, melyek tulajdonságait tudjuk a segítségével egyidejűleg beállítani. Minden attribútum támogatása megszűnt.
<th> és <td> – A táblázat fejléce és egy cellája, itt is elég nagy a zűrzavar, mert a legtöbb régi attribútum támogatása nincs benne a HTML5-ben, nézzük melyek maradtak meg.
colspan – Jelzi, az oszlop szélességét.
headers – A fejlécben lévő információk kiíratására szolgál.
rowspan – Jelzi a sor magasságot.
<tr> – táblázat 1 sora, minden attribútum támogatása megszűnt.
<thead> – táblázat feje, minden attribútum támogatása megszűnt.
<tbody> – táblázat törzse, minden attribútum támogatása megszűnt.
<tfoot> – táblázat lábléce, minden attribútum támogatása megszűnt.
Ugyan nem teljesen tartozik ide, mégis felvenném a táblázatokhoz a <textarea> elemet, hiszen ez is alkalmas rá, hogy “táblázatot” készítsünk vele. Nézzük milyen attribútumai vannak.
autofocus – az oldal betöltésekor automatikusan aktív lesz
cols – soronkénti látható karakterek számának definiálásadisabled – elem megjelenésének kikapcsolása, letiltása
form – a form nevét adhatjuk meg, ahova a textarea tartozik
maxlenght – karakterek maximális számát definiálhatjuk vele
name – maga a textarea elem nevét adhatjuk meg
placeholder – helykitöltő szöveg
readonly – csak olvashatóvá tehetjük vele a textarea-t
required – kitöltése kötelezővé válik
wrap – sortörés módjának meghatározása, hard (oszlop végi) vagy soft (sortörés nélküli).
rows – sorok számának definiálását tehetjük meg a segítségével.
Nézzünk előbb egy egyszerű, majd egy kicsit összetettebb példát az előzőekre. Kezdjük talán egy nagyon egyszerű 2×2-es táblázattal.
<table border="1"> <tbody> <tr> <td>sor 1 - oszlop 1</td> <td>sor 1 - oszlop 2</td> </tr> <tr> <td>sor 2 - oszlop 1</td> <td>sor 2 - oszlop 2</td> </tr> </tbody> </table>
Ennek eredménye:
Egyszerű táblázat
Nézzük, hogy tudunk cellákat egyesíteni. Szintén egy egyszerű példával.
<table border="1"> <tbody> <tr> <td colspan="2">sor 1 - oszlop 1 & oszlop 2</td> </tr> <tr> <td>sor 2 - oszlop 1</td> <td>sor 2 - oszlop 2</td> </tr> </tbody> </table>
Ennek eredménye:
Egyszerű táblázat + egyesítés
Most nézzünk egy szintén egyszerű példát az oszlopok egyesítésére.
<table border="1"> <tbody> <tr> <td>sor 1 - oszlop 1</td> <td rowspan="2">sor 1 & sor 2 - oszlop 2</td> </tr> <tr> <td>sor 2 - oszlop 1</td> </tr> </tbody> </table>
Ez így néz ki:
Egyszerű táblázat + egyesítés
És végül csináljunk egy kombinációs táblázatot.<table border="1"> <tbody> <tr> <td colspan="2">sor 1 - oszlop 1 & oszlop 2</td> </tr> <tr> <td>sor 2 - oszlop 1</td> <td rowspan="2">sor 2 & sor 3 - oszlop 2</td> </tr> <tr> <td>sor 3 - oszlop 1</td> </tr> </tbody> </table>Ennek pedig ez az eredménye:
Egyszerű táblázat + egyesítések
Most nézzünk egy picit bonyolultabb példát és vigyünk bele színeket is, hogy mutasson is valahogy a táblázatunk. Természetesen, ezt a legegyszerűbben egy kis CSS3 segítségével tehetjük meg. A táblázatunknak, legyen fejléce, valamint legyen 7×2-es és minden páros-páratlan sort más színűre készítsünk. Lássuk a kódot!
<!DOCTYPE html> <html> <head> <title>HTML5 Table tutorial</title> <style> #tabla { width: 50%; /*szélesség*/ margin-left: 25%; /*hogy jobban nézzünk ki, ne a lap szélén legyen*/ margin-right: 25%; text-align: center; /*a táblázatban szereplő minden szöveg igazítása, kivéve a thead-et*/ } thead { background-color: black; /*fejléc beállításai*/ color: white; text-indent: 15px; text-align: center; } tbody tr:nth-child(odd) { /*páratlan sorok*/ background-color: rgba( 0,191,255, 0.2); /* kék, 20% alpha */ } tbody tr:nth-child(even) { /*páros sorok*/ background-color: rgba(255, 0, 0, 0.4); /* red, 40% alpha */ } </style> </head> <body> <table id="tabla"> <thead> <tr> <th>Oszlop 1</th> <th>Oszlop 2</th> </tr> </thead> <tbody> <tr> <td>Sor 1, Oszlop 1</td> <td>Sor 1, Oszlop 2</td> </tr> <tr> <td>Sor 2, Oszlop 1</td> <td>Sor 2, Oszlop 2</td> </tr> <tr> <td>Sor 3, Oszlop 1</td> <td>Sor 3, Oszlop 2</td> </tr> <tr> <td>Sor 4, Oszlop 1</td> <td>Sor 4, Oszlop 2</td> </tr> <tr> <td>Sor 5, Oszlop 1</td> <td>Sor 5, Oszlop 2</td> </tr> <tr> <td>Sor 6, Oszlop 1</td> <td>Sor 6, Oszlop 2</td> </tr> <tr> <td>Sor 7, Oszlop 1</td> <td>Sor 7, Oszlop 2</td> </tr> </tbody> </table> </body> </html>A demo itt megtekinthető.
És így fog kinézni:Táblázat tutorial + CSS3
A következő részben egy kis jQuery segítségével még szebb táblázatokra fogunk példát nézni, és megkísérlünk grafikont is készíteni.
HTML5 Táblázatok a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van. Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.
