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

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

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

Egyszerű táblázat + egyesítés

Egyszerű táblázat + egyesítések

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:

Tabla tutorial + CSS3

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.

Creative Commons Licenc
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.

You may also like...