Tabulky
| Tag | Význam | Párový | Výskyt |
|---|---|---|---|
| table | tabulka | ano | |
| tr | řádek tabulky | nepovinně | <table>, <tbody>, <thead>, <tfoot> |
| td | buňka tabulky | nepovinně | <tr> |
| th | hlavičková buňka tabulky | nepovinně | <tr> |
| caption | hlavička tabulky | ano | <table> |
| col | ovlivnění sloupce tabulky | ne | <table> |
| colgroup | skupina sloupců tabulky | ne | <table> |
| tbody | tělo tabulky | nepovinně | <table> |
| thead | hlavička tabulky | nepovinně | <table> |
| tfoot | patička tabulky | nepovinně | <table> |
Pokud vás zajímají tabulky méně technicky a více pro začátečníky, přečtěte si výklad v kapitolách úvod do tabulek, formátování tabulek a design pomocí tabulek.
table
Tabulka. Uzavírá celou strukturu tabulky, obsahuje další elementy; zejména řádky tabulky <tr>.
Příklad tabulky 2x2:
<table>
<tr><td>horní levá buňka</td><td>horní pravá</td></tr>
<tr><td>dolní levá</td><td>dolní pravá</td></tr>
</table>
Tag <table> může mít kromě obecných mnoho dalších atributů:
| atribut | význam | možné hodnoty | nahradit CSSkem |
|---|---|---|---|
| align | obtékání tabulky ostatním textem | left, right, center | float u table |
| cellpadding | vnitřní okraj buněk | pixely | padding u td |
| cellspacing | vnější okraj buněk | pixely | border-spacing u table |
| border | šířka rámečku buněk | pixely | border u td |
| width | minimální šířka tabulky | délka nebo procento | width u table |
| height | minimální výška | délka nebo procento | height u table |
| background | obrázek na pozadí | URL obrázku | background-image |
| bgcolor | barva pozadí | barva | background-color |
| bordercolor | barva rámečku | barva | border-color u td |
| frame | vykreslení rámečku okolo | void, border, box, hsides, vsides, above, below, lhs, rhs | rozdílný border-style u table a u td |
| rules | vykreslení mřížky | none, all, rows, cols, groups | rozdílný border-style u table a u td |
| summary | stručné shrnutí obsahu | text pro čtečky pro nevidící |
Všechny výše uvedené atributy (vyjma summary) jsou zastaralé. Doporučují se nahradit CSS styly (border, padding pro tag td, width, height, background a border-spacing pro tag table).
Další atributy bordercolorlight a bordercolordark kdysi fungovaly v Exploreru.
| align= | význam | proč nepoužívat |
|---|---|---|
| left | tabulka je umístěna vlevo a obtékána textem | nahradit css vlastností float: left; |
| right | tabulka je umístěna vpravo a obtékána textem | nahradit css vlastností float: right; |
| center | tabulka je vystředěna a není obtékána. Nestandardní vlastnost fungující jenom v Exploreru. | nahradit css zápisem style="margin: auto;", viz vystředění |
Co se týká šířky tabulek, atribut width nastavuje pouze minimální šířku, nikoli vždy šířku skutečnou. Skutečná šířka může být větší, pokud bude větší součet šířek sloupců. Každý sloupec je tak široký, jak je široká jeho nejširší buňka.
| frame= | význam |
|---|---|
| void | tabulka nemá rámeček |
| border (standardní hodnota) | rámeček je okolo celé tabuly |
| box | |
| hsides | horizontální okraje (= horní a dolní) |
| vsides | vertikální okraje (= pravý a levý) |
| above | zobrazí se pouze horní okraj tabulky |
| below | pouze spodní okraj |
| lhs | levá strana tabulky |
| rhs | pravá strana tabulky |
Název atributu "frame" nemá nic společného s rámy! V praxi je lepší atribut frame nepoužívat a grafického efektu docílit správným použitím css stylu border u tagu <table>.
| rules= | význam |
|---|---|
| none | mřížka nebude vykreslena |
| all (standardní hodnota) | mřížka bude mezi všemi buňkami tabulky |
| rows | mřížka bude pouze mezi řádky |
| cols | mřížka je pouze mezi sloupci tabulky |
| groups | mřížka bude pouze mezi oddíly tabulky (tagy thead, tbody a tfoot) a mezi skupinami sloupců (tag colgroup) |
Atributy frame a rules fungují jedině při nenulovém rámečku (nesmí být <table border="0">. V praxi je lepší atribut rules nepoužívat a požadovaného efektu dosáhnout pomocí CSS stylu border aplikovaného na buňky tabulky (tagy <td>).
Speciální styly pro tabulku
V souvislosti s tagem <table> prosím věnujte pozornost stylům border-collapse:collapse (z dvojitých rámečků udělá jednoduché) a table-layout: fixed (rychlejší vykreslování). Příklad:
<table border="1" style="table-layout: fixed; border-collapse: collapse;">...
tr
Řádek tabulky. Z angl. table row. Musí být uvnitř elementu <table> a smí obsahovat pouze buňky (<td> a <th>). Přípustnými (ale zastaralými a neužívanými) atributy jsou height, background, bgcolor. Jde o tag párový, ale pokud se neuvede koncová značka, tak se v prohlížeči nic zlého nestane, protože to je stejně vždycky před začátkem nového řádku nebo před koncem tabulky. Slušností je ovšem tag tr ukončovat, už pro přehlednost.
td
Buňka tabulky. Musí být umístěna v řádku <tr>. <td> je párový tag, ale pokud se neuzavře, tak si s tím prohlížeče poradí. Kromě obecných atributů má tyto:
| atribut | význam | hodnoty | nahraďte CSS stylem |
|---|---|---|---|
| align | horizontální zarovnání obsahu | left, center, right, justify | text-align |
| valign | vertikální zarovnání obsahu | top, middle, bottom, baseline | vertical-align |
| width | doporučená šířka buňky | délka nebo procento | width |
| height | minimální výška řádku | délka | height |
| nowrap | obsah buňky se nebude zalamovat | bez hodnoty | white-space |
| background | obrázek na pozadí | URL obrázku | background-image |
| bgcolor | barva pozadí | barva | background-color |
| bordercolor | barva rámečku | barva | border-color |
| bordercolorlight | světlejší vykreslovací barva rámečku | barva | |
| bordercolordark | tmavší vykreslovací barva rámečku | barva | |
| rowspan | přesah buňky na n dalších řádků (spojení buněk) | počet přesahujících řádků | |
| colspan | přesah buňky do dalších sloupců | počet přesahujících sloupců | |
| axis, scope, abbr, headers | informace pro automatické zpracování | různé zbytečné hodnoty |
Všechny výše zníněné atributy s výjimkou rowspan a colspan jsou považovány za zastaralé a doporučuje se nahrazování pomocí stylů. V praxi se ovšem občas neobejdete bez width a height.
| align= | význam |
|---|---|
| left | zarovnání obsahu doleva (není nutno nastavovat) |
| right | zarovnání obsahu buňky vpravo |
| center | zarovnání na střed |
| justify | zarovnání do bloku |
| valign= | význam |
|---|---|
| middle | vertikální zarovnání na střed (výchozí hodnota) |
| top | vertikální zarovnání obsahu buňky nahoru |
| bottom | vertikální zarovnání dolů |
| baseline | vertikální zarovnání textu k jiným textům v řádku |
Velmi složité téma jsou šířky buněk. Základní pravidlo říká, že všechny buňky v jednom sloupci jsou stejně široké. Šířka sloupce je vzata od jeho nejširší buňky.
Výsledná šířka buněk je dále ovlivněna jednak atributem width, ale také obsahem buňky, nastavením šířky tabulky a šířkou ostatních sloupců buněk. Neznám úplně přesně obecný algoritmus vyhodnocování šířky, ale i to, co vím, je strašně dlouhé, proto to sem nepíšu.
Výška buňky je jednodušší záležitost, protože vertikálního místa je nekonečno (kdežto horizontální je omezeno šířkou stránky/okna). U výšky tedy většinou platí, že co nastavíte, to platí, přičemž v případě konfliktu vyhrává větší výška.
Atributy rowspan a colspan vlastně spojují buňky (nebo lépe řečeno vyznačují přesah). Rowspan přesahuje buňku do dalších řádků, colspan do sloupců. Na místě, kam buňka přesáhla, se do HTML zápisu nic nedává.
Příklad tabulky 2x2 se spojeným levým sloupečkem:
<table>
<tr><td rowspan=2>levá buňka</td><td>horní pravá</td></tr>
<tr><!-- zde nic --><td>dolní pravá</td></tr>
</table>
th
Hlavičková buňka. Chová se úplně stejně jako <td> pouze s tím rozdílem, že text je tučný a v buňkách vystředěný. Má stejný zápis i atributy jako <td>.
caption
Nadpis tabulky (hlavička). V HTML zápisu má následovat za značkou <table> před prvním řádkem. Zobrazuje se jako vystředěný text nad tabulkou.
| atribut | význam | možné hodnoty |
|---|---|---|
| align | nad nebo pod tabulkou | top, bottom |
Atribut align=bottom způsobí zobrazení pod tabulkou. Stejného efektu se dá dosáhnout pomocí CSS stylu caption-side: bottom.
Horizontální zarovnání nadpisu tabulky doprava nebo doleva se dělá klasicky CSS stylem text-align.
V některých referencích se uvádějí ještě hodnoty left a right pro zobrazení nadpisu vedle tabulky. Podle mých zkušeností ale nic takového v prohlížečích nefunguje.
Tag <caption> může obsahovat cokoliv, ale nejčastěji se tam dává nějaký popisek tabulky.
Správně by každá tabulka měla obsahovat pouze jednu <caption>, ale když se jich tam zapíše více, prohlížeče je zobrazí.
Příklad caption nad tabulkou:
<table>
<caption>Nadpis tabulky</caption>
<tr>... zbytek tabulky
</table>
Příklad caption pod tabulkou
<table>
<caption align="bottom">Nadpis tabulky dole</caption>
<tr>... zbytek tabulky
</table>
Další tagy existují v HTML od verze 4.0, takže se v praxi používají spíše méně. Podporu mají dobrou.
col
Sloupec. Umožňuje nastavit nějakou vlastnost všem buňkám v jednom sloupci (například šířku nebo zarovnání). Nepárový tag uváděný za tagem <table>. Není nutno <col> používat, ale když už, tak by jich mělo být tolik, kolik je sloupců (nebo použít atribut span). Tagy <col> se vztahují ke sloupcům v tom pořadí, jak jsou zapsány.
Možnými atributy jsou align a valign s hodnotami stejnými jako u buněk, nejlépe je ale asi použít style nebo class. Pravděpodobně budou fungovat i atributy pro formátování buněk (jako bgcolor). Doporučuji ale nastavovat formátování CSS stylem, to bude fungovat určitě.
Atribut span usnadňuje výpis několika stejných sousedních tagů <col>. Místo aby se psalo enkrát <col>, tak se napíše <col span="n">.
Správně by měla být skupině tagů <col> předřazen tag <colgroup>. Ale funguje to i bez toho.
Stylování col
Tagu col se dá přiřadit relativně malá množina stylů: border, background, width a visibility. Plus jejich odvozeniny, jako například border-color. Tento výčet je dosti omezující. Col se tedy nedá použít například na zarovnávání textu, barvu textu nebo skrývání sloupců.
<table>
<col style="background-color: yellow;">
<col span="2" style="background-color: cyan">
<tr> <td>žlutý sloupec</td> <td>modrý sloupec</td>
<td>Další modrý sloupec (to je ta dvojka).</td> </tr>
</table>
Použítí tagů <col> se vyplatí pouze u větších, složitěji formátovaných tabulek.
colgroup
Skupina sloupců. Mám-li být upřímný, moc nechápu rozdíl mezi <col> a <colgroup>. Jediné dva rozdíly:
- pokud jsou v nějaké tabulce uvedeny <col> i <colgroup>, <colgroup> jsou zanedbávány Ale jejich atributy platí pro následující tagy <col>
- colgroup jsou brány v potaz při <table rules="groups">, to se týká vykreslování mřížky.
tbody
Tělo tabulky (nebo také skupina řádek). Zbytný tag. Vyskytuje se v elementu <table> vně řádků. V jedné tabulce může být více <tbody>. Obsahují řádky (tagy <tr>). Nemají zatím žádný smysl kromě vykreslování mřížky při <table rules="groups"> a lze je použít při skriptování. V budoucnu se očekává, že budou v aplikacích funkčně sdružovat řádky. Stejné nedoporučované atributy align, valign a bgcolor se stejnou funkcí jako u <td>.
thead
Skupina řádků, která je záhlavím tabulky. Zbytný tag, velmi podobný tagu <tbody>. V budoucnu se očekává, že se záhlaví tabulky bude tisknout na každé stránce a při rolování bude setrvávat na místě (2008: funguje to minimálně ve Firefoxu). Stejně jako <tbody> má thead funkci pouze při vykreslování mřížky a skriptování. Stejné nedoporučované atributy align, valign a bgcolor se stejnou funkcí jako u <td>.
tfoot
To samé co <thead>, pouze se jedná o patičku tabulky. Tento tag by měl obsahovat jenom řádky tabulky (<td>). V kódu má být umístěn ještě před samotným tělem tabulky (takže jakoby na jiném místě, než ve výsledku). I v případě, že jsou za tfoot další řádky (v <tbody>), vykreslí se <tfoot> na konci tabulky (IE 5 +, Mozilla).
Reklama
