HTML - Tabulky

Úvod do vytváření tabulek

Tabulky lze vždy dělit na sloupce a řádky, základní struktura tabulky vypadá třeba takto: 

<table>
  <tr><td>Buňka 1, 1. řádek</td><td>Buňka 2, 1. řádek</td></tr>
  <tr><td>Buňka 1, 2. řádek</td><td>Buňka 2, 1. řádek</td></tr>
</table>

Což se vykreslí zhruba takto:

Buňka 1, 1. řádekBuňka 2, 1. řádek
Buňka 1, 2. řádekBuňka 2, 1. řádek

Než začnete tvořit tabulku, určete si kolik bude mít řádků (tolik je třeba použít značek tr, ve kterých jsou uzavřeny buňky tabulky). Počet sloupců stanovíte počtem opakujících se značek td. Tak se vytváří nejjednoduší tabulka. O slučování buněk se zmíníme níže.

table

Tabulka, počáteční a koncová značka pro tabulku.
AtributVýznam
alignZarovnání
borderVelikost rámečku v px
cellpaddingVnitřní okraj buňky v px
cellspacingVnější okraj buňky v px
widthMinimální výška tabulky (pokud bude text přesahovat, tabulka se roztáhne)
heightMinimální šířka
backgroundAdresa obrázku na pozadí
bgcolorBarva pozadí
bordercolorBarva rámečku
frameTyp rámečku: border | box | void | vsides | hsides | above | below | lhs | rhs
summaryShrnutí obsahu tabulky pro alternativní čtečky
rulesVykreslení mřížky, hodnoty: none | all | rows | cols | groups

Doporučuji většinu těchto atributů (kromě summary) nahrazovat pomocí CSS vlastností, postupně: text-align, border, padding, margin, width, height, background-image, background-color, border-color, border-style.

tr

Označuje řádek tabulky. Začíná a končí každý řádek tabulky.

td

Označuje jednu buňku tabulky:
AtributVýznam
alignZarovnání, hodnoty: left | center | right | justify
valignVertikální zarovnání, hodnoty: top | middle | bottom | baseline
widthVýška buňky v px
heightŠířka buňky v px
nowrapObsah se nebude lámat
backgroundAdresa obrázku na pozadí
bgcolorBarva pozadí
bordercolorBarva rámečku
rowspanPřesah buňky přes řádky, má-li buňka přesahovat přes dva řádky, bude hodnota atributu 2
colspanPřesah buňky přes sloupce, má-li buňka přesahovat přes dva sloupce, bude hodnota atributu 2

Doporučuji atributy nahrazovat CSS vlastnostmi: text-align, vertical-align, width, height, white-space, background-image, background-color, border-color.

Sloučení buněk, které se dělá pomocí atributů rowspan a colspan může vypadat následovně (kolik buněk se sloučí, tolik se jich následně vynechá): 

<table>
  <tr><td rowspan="2">1</td><td>2</td><td colspan="2">3</td></tr>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</table>

První buňka prvního řádku má nastaveno rowspan="2", bude tedy místo jednoho zabírat dva řádky. Proto se v druhém řádku tabulky objeví o jednu buňku méně. Třetí buňka prvního řádku má nastaveno colspan="2", bude tedy zabírat místo jednoho sloupce dva. Proto je v prvním řádku jedna buňka vynechána.

123
123

Druhá ukázka: 

<table>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td rowspan="2" colspan="3">1</td><td>2</td></tr>
  <tr><td>1</td></tr>
</table>

Tabulka má standardně 4 buňky (první řádek). První buňka druhého řádku má nastaveno rowspan="2" colspan="3", měla by tedy zabírat dva řádky a tři sloupce. Proto se na druhém řádku objevují buňky pouze dvě, na čtvrtém dokonce jenom jedna.

1234
12
1

th

Označuje buňku nadpisu tabulky, obvykle se vykreslí tučně, značky th by se měly objevit v prvním řádku tabulky. Je identická se značkou td, pouze má jiný strukturní význam a jinak se vykresluje: 
<table>
  <tr><th>Nadpis 1</th><th>Nadpis 2</th></tr>
  <tr><td>Buňka 1, 1. řádek</td><td>Buňka 2, 1. řádek</td></tr>
  <tr><td>Buňka 1, 2. řádek</td><td>Buňka 2, 1. řádek</td></tr>
</table>

caption

Nadpis tabulky, následuje po značce table:

col

Ovlivňuje sloupec tabulky (styl): 
<table>
  <col style="background-color: gray" />
  <tr><th>Nadpis 1</th><th>Nadpis 2</th></tr>
  <tr><td>Buňka 1, 1. řádek</td><td>Buňka 2, 1. řádek</td></tr>
  <tr><td>Buňka 1, 2. řádek</td><td>Buňka 2, 1. řádek</td></tr>
</table>

První sloupec tabulky bude mít šedivé pozadí. Pokud je třeba stylovat i další sloupce, stačí přidat další značku col.

colgroup

Ovlivňuje sloupec tabulky (styl), podobné jako col.

thead, tbody a tfoot

Tyto značky logicky rozčleňují obsah tabulky na thead (hlavičku), tbody (tělo) a tfoot (patičku): 

<table>
  <thead>
    <tr><th>Nadpis 1</th><th>Nadpis 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Buňka 1, 1. řádek</td><td>Buňka 2, 1. řádek</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Buňka 1, 2. řádek</td><td>Buňka 2, 1. řádek</td></tr>
  </tfoot>
</table>


Doporuuji
Pro sv weby pouvm *Webhosting C4: 20 GB prostoru, PHP, MySQL, e-maily, subdomny za 1200 K (zdarma 2 GB navc kad rok). Vce WebhostingC4.cz.
Potebujete poradit?

Vyhledvn

Osobn doporuuji

Poradna

Pokud si nevte rady, chcete kontakt na spolehlivho tvrce webu, i vs zajm ciz nzor, ozvte se.

Reklama

Reklama: