HTML > Tabulky

V PDF

V DOC

Tabulky

Tabulky bývaly ve světě webdesignu mocným hráčem. V dobách, kdy podpora CSS v prohlížečích byla mrzká, se pomocí tabulek řešilo rozmístěná jednotlivých prvků na stránce – tzv. tabulkový layout, který však měl své nevýhody (například delší načítání takto utvořené stránky).

I když se dnes se stránkami tvořenými pomocí tabulek můžeme setkat, k rozvržení prvků na stránkách bychom měli využívat CSS. Avšak i dnes mají tabulky své nezastupitelné místo. Využíváme je pro tabulková data; prostě pro obsah, který chceme mít v tabulce (a který se samozřejmě do tabulky hodí).

Pro tvorbu tabulek využíváme následujících tagů.

Tag Význam tagu
table Ohraničuje tabulku; je párový.
tr Řádek tabulky (z anglického table row); i když v některých verzích HTML tento tag nemusí být párový, doporučuji ho jako párový psát.
td Buňka tabulky; tento tag doporučuju psát opět jako párový.

Nyní již máme dostatek informací k tomu, abychom dokázali sestrojit jednoduchou tabulku.
Vytvoříme si tabulku 3 × 2 (3 řádky, 2 sloupce).

<table>
  <tr><td>Horní levá buňka</td><td>Horní pravá buňka</td></tr>
  <tr><td>Prostřední levá buňka</td><td>Prostřední pravá buňka</td></tr>
  <tr><td>Dolní levá buňka</td><td>Dolní pravá buňka</td></tr>
</table>

Výsledek, tak, jak se nám zobrazí v prohlížeči vypadá pak takto:

Horní levá buňka Horní pravá buňka
Prostřední levá buňka Prostřední pravá buňka
Dolní levá buňka Dolní levá buňka

Zatím nic moc, že? Proto si prozradíme několik atributů.

Atributy pro table Význam atributu
cellspacing Vnější okraj buněk; hodnotu zadáváme jako číslo bez jednotky, prohlížeč si domyslí pixely.
cellpadding Vnitřní okraj buněk
border Rámeček, ve všech prohlížečích se však nevykreslí stejně; hodnota je číslo, prohlížeč si opět domyslí pixely.
width Šířka tabulky; pozor, jedná se však o minimální šířku. Pokud zadáme šířku v procentech, bere se šířka z nadřazeného prvku (třeba okna prohlížeče). Zadáváme-li pixely, zase nemusíme psát jednotky. Je-li však obsah delší, než námi nastavená minimální šířka, je její rozměr ignorován.
height Výška tabulky, platí stejná pravidla jako pro šířku. Pokud však je nadřazený prvek tabulky okno prohlížeče, tabulka na výšku zadanou v procentech nereaguje (teda aspoň mně). Navíc verzi HTML, kterou používáme k výkladu se tento atribut dvakrát nezamlouvá.

Všechny tyto atributy lze nastavit i pomocí CSS, a měli bychom to tak dělat. Ale pokud se například na stránku díváme s vypnutými styly, cellspacing a cellpadding se může hodit.


Atributy pro td Význam atributu
rowspan Sloučení buněk v rámci řádku; jako hodnotu zadáváme takové číslo, kolik buněk chceme spojit.
colspan Sloučení buněk v rámci sloupce

Názorný příklad pomůže.

<table border="1" cellpadding="10">
  <tr><td colspan="2">1</td> <td>2</td></tr>
  <tr><td rowspan="2">3</td> <td>4</td> <td>5</td></tr>
  <tr><td>6</td> <td>7</td></tr>
</table>

A v prohlížeči:

12
345
67


Pozn.: Pokud jste si prohlíželi zdrojový kód této stránky, možná jste si všimli, že tabulky v ukázkách vykresluji trochu upraveným kódem, než je uváděn. Je to z důvodu, že v CSS souboru, který určuje vzhled tohoto webu mám tabulky definované trochu jinak, proto je kód trochu upraven, aby vzhled odpovídal kódu uváděnému v příkladech.


Tabulky 2. část, aneb další info

Tag Význam tagu
th Buňka v hlavičce tabulky. Tento tag je příbuzný tagu td, akorát text vložený do th je zarovnán na střed a vykresluje se tučným písmem (viz například tuto tabulku).
caption Nadpis tabulky; píše se za tag table. Je to párový tag.
col Nastavuje vlastnost jednomu sloupci tabulky. Nepárový tag.

Opět bude nejlepší si vše ukázat na příkladu:

<table border="1" cellpadding="10">
<caption>Moje tabulka</caption>
  <col style="background-color: #FFDDCC">
  <tr><th>Něco</th> <th>Popis něčeho</th></tr>
  <tr><td>houba mycí</td> <td>vodní živočich</td></tr>
  <tr><td>rýhonosec pcháčový</td> <td>brouk</td></tr>
  <tr><td>sametka podzimní</td> <td>roztoč</td></tr>
</table>

Pokud nevíte, co zápis style="background-color: #FFDDCC" znamená, můžete se podívat do sekce CSS.

A výsledek v prohlížeči…

Moje tabulka
Něco Popis něčeho
houba mycí vodní živočich
rýhonosec pcháčový brouk
sametka podzimní roztoč


Pro tag col si uvedeme jeden atribut.

Atribut pro col Význam atributu
span Udává, na kolik sloupců se má daná vlastnost aplikovat.

Následující dva zápisy tabulky by pak měly znamenat to samé…

<table border="1" cellpadding="10">
  <col style="background-color: #FFDDCC">
  <col style="background-color: #FFDDCC">
  <tr><td>rýhonosec pcháčový</td> <td>brouk</td></tr>
  <tr><td>sametka podzimní</td> <td>roztoč</td></tr>
</table>

<table border="1" cellpadding="10">
  <col span="2" style="background-color: #FFDDCC">
  <tr><td>rýhonosec pcháčový</td> <td>brouk</td></tr>
  <tr><td>sametka podzimní</td> <td>roztoč</td></tr>
</table>

…a zobrazit tento výsledek:

rýhonosec pcháčový brouk
sametka podzimní roztoč


Další tagy

Tag Význam tagu
colgroup Tagy, které používám velmi zřídka nebo skoro vůbec; proto toho o nich vím velmi málo. Tuším snad, že obsah uzavřený do tagu thead se tiskne na každé stránce (na které je tabulka?). Ve kterém prohlížeči to však funguje nemám ponětí.
thead
tbody
tfoot


Další kapitolou jsou

Formuláře

V PDF

V DOC

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 

 TOPlist