Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>

Transkript

1 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 ano <table> thead hlavička tabulky ano <table> tfoot patička tabulky ano <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>

2 Tag <table> může mít kromě obecných mnoho dalších atributů: Atributy tagu <table> atribut možné hodnoty align obtékání tabulky ostatním textem left, right, center cellpadding vnitřní okraj buněk pixely cellspacing vnější okraj buněk pixely border šířka rámečku buněk pixely width minimální šířka tabulky délka nebo procento height minimální výška délka nebo procento background obrázek na pozadí URL obrázku bgcolor pozadí bordercolor rámečku bordercolorlight bordercolordark frame světlejší vykreslovací rámečku (Explorer) tmavší vykreslovací rámečku (Explorer) vykreslení rámečku okolo void, border, box, hsides, vsides, above, below, lhs, rhs rules vykreslení mřížky none, all, rows, cols, groups summary stručné shrnutí obsahu text pro slepce Všechny výše uvedené atributy (vyjma frame, rules a summary) jsou zastaralé. Doporučují se nahradit CSS styly (border, padding pro tag td, width, height pro tag table). Cellspacing se přes CSS styl nahradit nedá (border-spacing nefunguje v Exploreru). Bordercolorlight a bordercolordark fungující v Exploreru se přes styly nahradit nedají. Tag <table>, atribut align align= left right center tabulka je umístěna vlevo a obtékána textem tabulka je umístěna vpravo a obtékána textem tabulka je vystředěna a není obtékána. Nestandardní vlastnost fungující jenom v

3 Exploreru. Vystředění v Mozille a spol. se dělá přes style="margin-left: auto; margin-right: auto" 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= void border (standardní hodnota) box hsides vsides above below lhs tabulka nemá rámeček rámeček je okolo celé tabuly horizontální okraje (= horní a dolní) vertikální okraje (= pravý a levý) zobrazí se pouze horní okraj tabulky pouze spodní okraj 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= none all (standardní hodnota) rows cols mřížka nebude vykreslena mřížka bude mezi všemi buňkami tabulky mřížka bude pouze mezi řádky mřížka je pouze mezi sloupci tabulky groups mřížka bude pouze mezi oddíly tabulky (taby tbody a thead) 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>). Časté překlepy: celspacing, celpadding, cellpading, celpading. Správně je to cellspacing a cellpadding.

4 Speciální styly pro tabulku V souvislosti s tagem <table> prosím věnujte pozornost stylům bordercollapse: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 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 verticalalign 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 bgcolor pozadí backgroundimage backgroundcolor bordercolor rámečku border-color bordercolorlight bordercolordark světlejší vykreslovací rámečku tmavší vykreslovací rámečku

5 rowspan colspan přesah buňky na n dalších řádků (spojení buněk) přesah buňky do dalších sloupců počet přesahujících řádků 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. Tag <td>, atribut align align= left right center justify zarovnání obsahu doleva (není nutno nastavovat) zarovnání obsahu buňky vpravo zarovnání na střed zarovnání do bloku Tag <td>, atribut valign valign= middle top bottom vertikální zarovnání na střed (výchozí hodnota) vertikální zarovnání obsahu buňky nahoru 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 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). 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á.

6 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 možné hodnoty align valign horizontální zarovnání left, center, right nad nebo pod tabulkou top, bottom Atribut valign=bottom způsobí zobrazení pod tabulkou. <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í. Další tagy existují pouze v HTML verze 4.0, používají se v praxi velmi málo a všímají si jich jen novější prohlížeče (IE 4 +, Mozilla apod.). 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">. <table> <col style="text-align: right"> <col span="2" style="text-align: center"> <tr> <td>vpravo zarovnaný sloupec</td> <td>vycentrovaný sloupec</td>

7 <td>další vycentrovaný sloupec (to je ta dvojka).</td> </tr> </table> Správně by měla být skupině tagů <col> předřazen tag <colgroup>. Ale funguje to i bez toho. 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. 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ě (zatím to nefunguje). Stejně jako <tbody> má dnes funkci pouze při vykreslování mřížky a skriptování. 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).