Home >> HTML návod >> HTML Tabulky

HTML Tabulky

V této lekci se seznámíme s HTML tabulkami. Naučíme se tvořit jednoduché i složitější tabulky, řekneme si jaké tagy se při tvoření tabulek používají a také jak lze tabulky využít.

Původně byly tabulky předurčeny pouze pro prezentování tabulkových dat. Přestože se pro tento účel používají i dnes, spousta tvůrců webových stránek je používá také pro rozložení webových stránek. To je pravděpodobně způsobeno tím, že HTML má omezené schopnosti rozložení.

Každopádně ať už používáte tabulky pro prezentaci tabulkových dat nebo pro rozložení stránek, budete používat stejné HTML tagy.

Zakladní tagy

Každá HTML tabulka obsahuje minimálně tyto 3 tagy: <table>, <tr> a <td>. Samozřejmě existují i další tagy. Pro žačátek nám však postačí tyto 3 a nyní se na ně podíváme podrobněji.

Tag <table>

HTML tag <table> vyznačuje začátek a konec tabulky. Tento párový tag je povinný.

Příklad:


<table border="1">

<tr>

<td>Buňka 1</td>

<td>Buňka 2</td>

</tr>

</table>

Všimněte si, že jsme přidali atribut border, jenž definuje šířku rámečku.

Výsledek:

Buňka 1

Buňka 2

Atributy tagu <table>

Seznam atributu, které lze použít u tohoto tagu naleznete zde. Spousta těchto atributů je však zastaralá, proto doporučujeme, tam kde to jde, použít CSS styly.

Tagy <tr> a <td>

Pomocí HTML tagu <tr> jsou tvořeny jednotlivé řádky tabulky. Jednotlivé buňky jsou tvořeny tagem <td>.

Příklad:


<table border="1" cellpadding="5" cellspacing="0" width="100%">

<tr>

<td width="30%">Buňka 1</td><td>Buňka 2</td>

</tr>

</table>

Výsledek:

Buňka 1

Buňka 2

Záhlaví tabulky

Spousta tabulek má své záhlaví pro sloupce nebo pro řádky. V HTML se používá tag th.

Většina prohlížečů zobrazí záhlaví tučně a zarovnané na střed .

Příklad:


<table border="1" cellpadding="5" cellspacing="5" width="100%">

<tr>

<th>Záhlaví tabulky</th>

<th>Záhlaví tabulky</th>

</tr>

<tr>

<td width="30%">Buňka 1</td><td>Buňka 2</td>

</tr>

</table>

Výsledek:

Záhlaví tabulky	Záhlaví tabulky
Buňka 1	Buňka 2

Atribut Colspan

Atribut colspan můžete použíty, aby jedna buňka zahrnovala více sloupců.

Příklad:


<table border="1" cellpadding="5" cellspacing="5" width="100%">

<tr>

<th colspan="2">Záhlaví tabulky</th>

</tr>

<tr>

<td width="30%">Buňka 1</td><td>Buňka 2</td>

</tr>

</table>

Výsledek:

Záhlaví tabulky
Buňka 1	Buňka 2

Atribut Rowspan

Atribut rowspan má stejnou funkci jako atribut colspan, pouze s rozdílem, že slouží pro více řádků v jedné buňce.

Příklad:




<table border="1" cellpadding="5" cellspacing="5" width="100%">

<tr>

<th rowspan="2">Záhlaví tabulky</th><td>Buňka 1</td>

</tr>

<tr>

<td width="70%">Buňka 2</td>

</tr>

</table>

Výsledek:

Záhlaví tabulky	Buňka 1
Záhlaví tabulky	Buňka 2

Barvy v tabulkách

Ve Vašich tabulách můžete použít barvy pomocí jednoduchého CSS stylu. Barvy můžete použít např: pro rámeček, jednotlivé řádky nebo sloupce, popříbadě buňky.

Příklad:


<table border="1" cellpadding="5" cellspacing="5" width="100%">



<tr>

<th style="color:lime;background-color:green;" rowspan="2">

Záhlaví tabulky</th><td style="text-align:center;color:red;

background-color:yellow;">Buňka 1

</tr>

<tr>

<td style="text-align:center;color:yellow;background-color:red;">Buňka 2</td>

</tr>



</table>

Výsledek:

Záhlaví tabulky	Buňka 1
Záhlaví tabulky	Buňka 2

Další lekce >>

<< Předchozí lekce