Tabulky

Přehled tagů z oblasti tabulek
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ů:

Atributy tagu <table>
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.

Tag <table>, atribut align
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.

Tag <table>, atribut frame
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>.

Tag <table>, atribut rules
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:

Atributy tagu <td>
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
Tag <td>, atribut align
Tag <td>, atribut valign
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.

Atributy tagu <caption>
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>

Příklad stylování tagu col

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:

  1. 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>
  2. 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

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.