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 1Buň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 1Buň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í tabulkyZáhlaví tabulky
Buňka 1Buň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 1Buň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í tabulkyBuňka 1
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í tabulkyBuňka 1
Buňka 2
HTML Návod
HTML Návod - HOME
Úvod
Začínáme
HTML Tagy
HTML Formátování textu
HTML Atributy
HTML Barvy
HTML Odkazy
HTML Obrázky
HTML Metadata
HTML Komentáře
HTML Formuláře
HTML Tabulky
Psaní HTML značek
HTML & CSS
HTML & JAVASCRIPT
HTML Webové šablony
HTML Test
Shrnutí
Užitečné seznamy a nástroje
Kompletní seznam HTML tagů
Kódy HTML značek
Pojmenované barvy v HTML
Generátor hexadecimálního kódu barev
HTML ukázky
Hudba na web
©2008 - 2011 Klikzone.cz
Ráj aut - inzerce nových i ojetých aut