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. řádek | Buňka 2, 1. řádek |
Buňka 1, 2. řádek | Buň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.Atribut | Význam |
---|---|
align | Zarovnání |
border | Velikost rámečku v px |
cellpadding | Vnitřní okraj buňky v px |
cellspacing | Vnější okraj buňky v px |
width | Minimální výška tabulky (pokud bude text přesahovat, tabulka se roztáhne) |
height | Minimální šířka |
background | Adresa obrázku na pozadí |
bgcolor | Barva pozadí |
bordercolor | Barva rámečku |
frame | Typ rámečku: border | box | void | vsides | hsides | above | below | lhs | rhs |
summary | Shrnutí obsahu tabulky pro alternativní čtečky |
rules | Vykreslení 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:Atribut | Význam |
---|---|
align | Zarovnání, hodnoty: left | center | right | justify |
valign | Vertikální zarovnání, hodnoty: top | middle | bottom | baseline |
width | Výška buňky v px |
height | Šířka buňky v px |
nowrap | Obsah se nebude lámat |
background | Adresa obrázku na pozadí |
bgcolor | Barva pozadí |
bordercolor | Barva rámečku |
rowspan | Přesah buňky přes řádky, má-li buňka přesahovat přes dva řádky, bude hodnota atributu 2 |
colspan | Př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.
1 | 2 | 3 | |
1 | 2 | 3 |
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.
1 | 2 | 3 | 4 |
1 | 2 | ||
1 |
th
Označuje buňku nadpisu tabulky, obvykle se vykreslí tučně, značkyth
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čcetable
:
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é jakocol
.
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>
Vyhledvn
Zklady
Znaky abecedn
Poradna
Pokud si nevte rady, chcete kontakt na spolehlivho tvrce webu, i vs zajm ciz nzor, ozvte se.