HTML Tabu?ky

S HTML mô?ete vytvára? tabu?ky.

Príklady

Tabu?ky
Tento príklad predstavuje, ako vytvori? tabu?ky v HTML dokumente.

Okraje Tabu?ky
Tento príklad predvádza rôzne okraje tabu?ky

(Viac príkladov nájdete na spodku tejto stránky)

Tabu?ky

Tabu?ky sú ur?ené s <table> tágom. Tabu?ka je rozdelená do riadkov (s <tr> tágom), a ka?dý riadok je rozdelený na dátové bunky (s <td> tágom). Písmená td znamenajú "table data,", ktoré sú obsahom dátovej bunky. Dátová bunka mô?e obsahova? text, obrázky, odrá?ky, odstavce, formuláre, ?iary, odkazy, tabu?ky at?.

<table border="1">
<tr>
<td>riadok 1, bunka 1</td>
<td>riadok 1, bunka 2</td>

</tr>
<tr>
<td>riadok 2, bunka 1</td>
<td>riadok 2, bunka 2</td>
</tr>
</table>

Ako to vyzerá v browsery:

Tabu?ky a border atribúty

Ak neur?íte border atribút, tabu?ka bude zobrazená bez hocijakých borderov. Niekedy je toto pou?ite?né, ale vä??inu chceme okraje tabu?ky vidie?.

Na zobrazenie tabu?ky s okrajmi musíme pou?i? border atribút:

<table border="1">
<tr>
<td>riadok 1, bunka 1</td>
<td>riadok 1, bunka 2</td>
</tr>
</table>

Hlavi?ky v Tabu?ke

Hlavi?ky v tabu?ke sú ur?ené s <th> tágom.

<table border="1">
<tr>
<th>Hlavi?ka</th>
<th>Iná Hlavi?ka</th>
</tr>
<tr>
<td>riadok 1, bunka 1</td>

<td>riadok 1, bunka 2</td>
</tr>
<tr>
<td>riadok 2, bunka 1</td>
<td>riadok 2, bunka 2</td>
</tr>

</table>

Ako to vyzerá v browsery:

Prázdne bunky v Tabu?ke

Bunky tabu?ky, bez obsahu, nie sú zobrazené ve?mi dobre vo vä??ine browserov.

<table border="1">
<tr>
<td>riadok 1, bunka 1</td>
<td>riadok 1, bunka 2</td>

</tr>
<tr>
<td>riadok 2, bunka 1</td>
<td></td>
</tr>
</table>

Ako to vyzerá v browsery:

Pozna?te si, ?e bordery okolo prázdnej bunky CHÝBAJÚ (NB! Mozilla Firefox ich zobrazuje).

Aby sa to nestalo, pridajte non-breaking space (&nbsp;) do prázdnej bunky, aby boli bordery vidite?né: 

<table border="1">
<tr>

<td>riadok 1, bunka 1</td>
<td>riadok 1, bunka 2</td>
</tr>
<tr>
<td>riadok 2, bunka 1</td>
<td>&nbsp;</td>

</tr>
</table>

Ako to vyzerá v browsery:

Poznámky - Vhodné Tipy

<thead>,<tbody> a <tfoot> elementy sa zriedka pou?ívajú, kvôli zlej podpore browserov a budúcim zmenám XHTML verzií.

Viac Príkladov

Tabu?ky bez okrajov
Tento príklad predvádza tabu?ku bez okrajov.

Hlavi?ky v tabu?ke
Tento príklad predvádza, ako zobrazi? hlavi?ky v tabu?ke.

Prázdne bunky
Tento príklad predvádza, ako pou?i? "&nbsp;" urobenie sprovoznenie prázdnych buniek

Tabu?ka s titulkom
Tento príklad predvádza tabu?ku s titulkom.

Tabu?kové bunky, ktoré spoja viac, ne? riadok/st?pec
Tento príklad predvádza, ako ur?i? bunku tabu?ky, ktorá spojí viac, ne? jeden riadok alebo st?pec.

Tágy vnútri tabu?ky
Tento príklad predvádza, ako zobrazi? elementy vnútri iných elementov.

Výpl? bunky
Tento príklad predvádza, ako pou?i? cellpadding, na vytvorenie viac bieleho miesto medzi obsahom bunky a jej bordera.

Od?alovanie buniek
Tento príklad predvádza, ako pou?i? cellspacing, na zvä??enie vzdialenosti medzi bunkami.

Pridanie farby pozadia alebo obrázku na pozadí pre tabu?ku
Tento príklad predvádza, ako prida? pozadie do tabu?ky.

Pridanie farby pozadia alebo obrázku na pozadí do bunky
Tento príklad predvádza, ako prida? pozadie do jednej alebo viac buniek v tabu?ke.

Zarovnanie obsahu v bunke
Tento príklad predvádza, ako pou?i? "align" atribút na zarovnanie obsahu buniek a vytvori? "pekne-vyzerajúcu" tabu?ku.

Frame atribút
Tento príklad predvádza, ako pou?i? "frame" atribút na kontrolovanie borderov okolo tabu?ky.

Frame a border atribúty
Ako pou?i? "frame" a "border" atribúty na kontrolovanie borderov okolo tabu?ky.

Tágy v tabu?ke