Můj pracovní webík

... aneb HTML a CSS pro starší a nechápavé ...

ZÁKLADY TABULEK

kontejnerový tabulkový element <table> sdružuje skupinu ostatních elementů, které definují jednotlivé řádky <tr> a buňky <td>
XHTML tabulka se skládá z řádků a sloupců, které tvoří buňky
buňky mohou obsahovat prakticky jakýkoliv jiný XHTML element (např. hypelink, obrázek, text ...)
nejdůležitějším elementem je element <table>, který obklopuje všechny ostatní elementy
pomocí volitelného elementu <caption> můžeme zadat vysvětlující text nebo záhlaví tabulky
uvnitř elementu <table> se nacházejí další kontejnerové elementy:
element <tr> (table row, řádek tabulky) - definuje řádky tabulky
element <td> table data, data tabulky) - definuje buňky tabulky
element <th> (table heading, nadpis tabulky) - lze jím vytvořit nadpisy pro řádky i sloupce
do těla HTML dokumentu vložíme nejdůležitější tagy <table> a </table>
mezi tyto tabulkové tagy vložíme libovolný počet dvojic <tr> a </tr> znamenající jednotlivé řádky tabulky
do prvního řádku můžeme volitelně doplnit nadpisy sloupců prostřednictvím tagů <th> a </th> - text nadpisu napíšeme mezi tyto tagy - element <th> je nepovinný
do zbývajících řádků přidáme správný počet buněk, tj. tagů <td> a </td> - mezi tyto tagy vložíme libovolný obsah buňky (text, jiný XHTML element)
musíme si dát pozor, aby jednotlivé řádky měly stejný počet sloupců
ne všechny buňky musí nutně obsahovat nějaká data - prázdné buňky vytvoříme tak, že mezi tagy <td> a </td> vložíme pevnou mezeru (non-breaking space) pomocí znaků &nbsp;

např. <td>&nbsp;</td>

kontejnerový element <caption> slouží k zadávání názvu nebo popisu tabulky
následuje ihned po otevíracím tagu <table>
není povinný
v tabulce se může vyskytovat pouze jediný element <caption>
nejčastějším způsobem zobrazení názvu tabulky je nahoře
chceme-li název zobrazie na spodku tabulky, použijeme atribut align - hodnoty jsou top (nad tabulkou) a bottom (pod tabulkou)
tento atribut však není podporován XHTML Strict
řádky v tabulce tvoří element <tr>
nejpoužívanější atributy elementu <tr> jsou:
atribut align - nastavuje zarovnávání buněk v řádku ve vodorovném směru - povolené hodnoty jsou center (na střed), left (k levému okraji) a right (k pravému okraji)
atribut valign - nastavuje zarovnávání buněk v řádku ve svislém směru - povolené hodnoty jsou center (na střed), top (k hornímu okraji) a bottom (k dolnímu okraji)
element <td> tvoří buňku, ve které budou data
element <th> tvoří buňku, ve které bude nadpis řádků nebo sloupců
pro oba elemeenty platí atributy align a valign stejně jako u elementu <tr>
použijeme je pouze tehdy, chceme-li obsah některé z buněk v řádku zarovnat jinak než celý řádek
element <th> podporuje ještě další užitečný atribut scope (rozsah), který určuje rozsah buněk, pro který platí definovaný nadpis
atribut scope má 2 hodnoty:
row (řádek) - nadpis platí pro řádky
col (column) sloupec) - nadpis platí pro sloupce
občas je třeba spojit prostor více buněk ve stejném řádku nebo sloupci do jediné (tyto buňky mají obahovat stejnou informaci nebo název má platit pro více buněk)
k tomu slouží 2 atributy elementů <th> a <td>:
atribut colspan (column span, přesah sloupce) - spojuje buňky vedle sebe
atribut rowspan (row span, přesah řádku) - spojuje buňky pod sebou

ukázka v části TABULKY