HTML Táblázatok

HTML Táblázatok

A táblázatokat a HTML-ben a <table> tag definiálja. A táblázatok sorokból állnak (<tr> tag), a sorok pedig cellákból (<td> tag). A cellák tartalmazhatnak bármilyen HTML elemet.

Szintaktika:

<table border="1">
    <tr>
        <td>sor 1, cella 1</td>
        <td>sor 1, cella 2</td>
    </tr>
    <tr>
        <td>sor 2, cella 1</td>
        <td>sor 2, cella 2</td>
    </tr>
</table>

Megjelenés a böngészőben:

sor 1, cella 1	sor 1, cella 2
sor 2, cella 1	sor 2, cella 2

A tábázatok egyéb tulajdonságait további tagek definiálják. A táblázat címe: <caption> tag, fejléce: <thead>,<th> tagek, törzse: <tbody> tag és a lábléce: <tfoot> taggal valósítható meg. A <col> és a <colgroup> tagek az oszlopok egyszerű és egységes formázásában nyújtanának segítséget, de mivel csak az Internet Explorer támogatja őket, ezért nem kerülnek részletezésre. A táblázatok kifinomultabb megjelenését továbbá CSS táblázatokkal kapcsolatos tulajdonságaival lehet megvalósítani.

Van egy olyan nézet, hogy a táblázatokat visszafogottan illik használni, mert a nagy méretű és bonyolult szerkezetű, illetve többszörösen egymásba ágyazott táblázatok jelentősen lellassíthatják a böngészőt. E mellett a forrás kód méretét is növelik, kevésbé áltláthatóvá teszik, ebből kifolyólag a szintaktikai hibáknak is nagyobb az esélyük.

A mai sávszélességek és processzorsebességek mellet ez nem feltétlenül igaz és bonyolultabb forráskódot is inkább valamely szerver oldali szkriptel generálunk manapság, mint "kézzel". Viszont az bizosan igaz, hogy az adatok egyszerű, gyors formázására a táblázatok kitűnően alkalmazhatók. A site dizájn kialakításában is nagy szerepük lehet, bár ma már ilyen célra valóban inkább a stíluslapokat javasolt használni.

Példa a táblázatok lehetőségeire:

<table border="1" cellpadding="3" cellspacing="1">
<caption>Megtakarítások</caption>
<thead style="color:green;">
    <tr>
        <th>Hónap</th>
        <th>Megtakarítás</th>
    </tr>
</thead>
<tbody style="color:blue;">
    <tr>
        <td>Január</td>
        <td>€100</td>
    </tr>
    <tr>
        <td>Február</td>
        <td>€80</td>
    </tr>
</tbody>
<tfoot style="color:red;">
    <tr>
        <td>Összesen</td>
        <td>€180</td>
    </tr>
</tfoot>
</table>

Megjelenés a böngészőben:

Megtakarítások

Hónap	Megtakarítás
Január	€100
Február	€80
Összesen	€180

Táblázattal kapcsolatos tagek

Tag	Leírás
<table>	Táblázat definiálása
<th>	Fejléc cella definiálása
<td>	Cella definiálása
<tr>	Sor definiálása
<caption>	Táblázat címének definiálása
<thead>	Fejléc definiálása
<tbody>	Törzs definiálása
<tfoot>	Lábléc definiálása