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

Táblázatok lehetőségei

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. A táblázatok kifinomultabb megjelenését továbbá CSS táblázatokkal kapcsolatos tulajdonságaival lehet megvalósítani.

<table border="1" cellpadding="3" cellspacing="1">
<caption>Megtakarítások</caption>
<colgroup>
    <col style="background-color:yellow;">
</colgroup>
<thead style="color:green;background-color:yellow;">
    <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
<colgroup>	Táblázat oszlop attribútumainak definiálása
<col>	Táblázat oszlop attribútumainak definiálása
<thead>	Fejléc definiálása
<tbody>	Törzs definiálása
<tfoot>	Lábléc definiálása