Obsah
V minulosti byly tabulky HTML používány ke kontrole rozložení stránek, aby se zachovaly proporce obsahu, vytvářely sekce, rozdělovaly informace atd. V současné době je to špatná praxe, ve skutečnosti s novými specifikacemi položky stůl V HTML5 bylo vynaloženo veškeré úsilí, aby toto bylo použito ke svému skutečnému účelu, kterým je zobrazení dat ve 2-dimenzionálních polích.Prvek stolu
Prvek stůl je skvělý kontejner a může být uvnitř jakéhokoli prvku, který je tok, například div. Vnitřní prvek stůl budeme mít prvky: titulek, skupina, thead, tbody, tfoot, tr, th Y td, které jsou nutné k vytvoření ústavy pro naši tabulku, navíc nový standard učinil následující atributy zastaralými uvnitř stůl a musí je používat výhradně CSS: souhrn, zarovnání, šířka, bgcolor, vycpávky, mezery mezi buňkami, rámeček, pravidla. Konvence CSS pro tento prvek bude tato:
tabulka {zobrazit: tabulka; srážka hranic: oddělená; mezery mezi okraji: 2px; barva ohraničení: šedá; } Tr element
Jak dobře víme, tabulky se skládají ze dvou základních prvků, řádků a sloupců, kde řádky představují každý informační záznam a sloupce strukturu a typ informací, podívejme se na prvek použitý k vytvoření řádků, tento prvek je tr. Může to být podřízený následujících prvků: stůl, thead, tfoot, tbodyJak vidíme, může to být přímé podřízené tabulky nebo dítě prvků, které jsou podřízenými tabulky a které definují její strukturu. Musí obsahovat 1 nebo více položek td nebo th podle potřeby byly do nového standardu HTML5 vloženy také některé z jeho zastaralých atributů, kterými jsou: zarovnat, char, charoff, valign, bgcolor. Které musí být zpracovány výhradně CSS, uvedený CSS má jako konvenci následující strukturu:
tr {display: table-row; vertical-align: inherit; border-color: inherit;} Td prvek
Tento prvek definuje sloupce v našich řádcích v tabulce, což nám umožňuje oddělit informace v rámci záznamu a tím je umět zařadit podle našich potřeb, je podřízeným prvku tr, platné atributy, které může mít, jsou: colspan, rowspan, záhlaví a zastaralé atributy, které je nyní třeba zpracovat v CSS, jsou: zkratka, osa, zarovnání, šířka, char, charoff, valign, bgcolor, výška, nowrap, rozsah. Konvence CSS pro tento prvek je následující:
td {display: table-cell; vertical-align: inherit; }Náš první stůl
Pojďme uvést do praxe to, co jsme zatím viděli, už víme, že pro naši tabulku potřebujeme řádky a sloupce v rámci našeho kontejneru nebo nadřazeného prvku, podívejme se, jak to vezmeme do HTML kódu:
Příklad
| Jablka | Zelená | Střední |
| Pomeranče | oranžový | Velký |
Tento kód nám dává strukturu tabulky se 2 řádky se 3 sloupci, protože vidíme, že jde o jednoduchý text, který nás vede k zobrazení tohoto výsledku:
