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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
És végül csináljunk egy kombinációs táblázatot. [sourcecode language="html"] <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> [/sourcecode] 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.
Permissions beyond the scope of this license may be available at http://html5.ugyesen.com.
