Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Michal Sonnek. Obchodní akademie a Střední odborná škola logistická, Opava, příspěvková organizace. Vzdělávací materiál byl vytvořen v rámci OP VK 1.5 – EU peníze středním školám, registrační číslo CZ.1.07/1.5.00/ Tabulky 1 Základní nastavení 1 2. června 2013 VY_32_INOVACE_160319_Tabulky_1_DUM

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Prvky tabulek tabulky nadpisy tabulek řádek sloupec skupina řádků skupina sloupců skupina záhlaví skupina zápatí buňka 2

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Struktura tabulky – povinné elementy 1. buňka v 1. řádku 2. buňka v 1. řádku 1. buňka v 2. řádku 2. buňka v 2. řádku 3

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Význam základních značek, Párová značka označující začátek a konec tabulky., Párová značka definující řádek tabulky., Párová značka vymezující buňku v tabulce. 4

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Nepovinné části tabulky, Definuje nadpis tabulky., Párová značka určující hlavičku tabulky., Vymezuje tělo tabulky., Párová značka pro patu tabulky. 5

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Nepovinné části tabulky, Spravuje skupinu sloupců se stejným formátováním. Nepárová značka. Definuje sloupec tabulky., Párová značka pro buňky hlavičky tabulky. 6

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Fixní model šířky tabulky Fixní model nebere při formátování ohled na obsah tabulky. Rozhodují zadané údaje – především hodnota width. Určení šířky je povinné, bez ní tento model nepracuje. Je možné určit rovněž šířku některých sloupců. Ty které nemají tento parametr definován, si rovnoměrně rozdělí zbylý prostor. Pokud je použit tento model, prohlížeč začne vykreslovat tabulku po obdržení prvního řádku. 7

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Automatický model šířky tabulky Nevýhody – složítější a pomalejší. Výhody – větší flexibilita. Algoritmus potřebuje při vykreslení nejprve znát celý obsah. Potom dojde k výpočtu rozměrů sloupců a optimálně se rozvrhne jejich rozložení. Tabulka se začne vykreslovat až po celkovém načtení. 8

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Nastavení způsobu vykreslení Způsob vykreslení ovlivňuje vlastnost CSS table-layout. Fixní model: #tab1 {table-layout: fixed} Automatický model: #tab1 {table-layout: auto} 9

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Pořadí vykreslování prvků tabulky Pořadí „odspoda“ je: tabulka ( table ), skupiny sloupců( colgroup ), sloupec ( col ), skupiny řádků ( rowgroup, tbody ), řádky ( tr ), buňky ( th/td ). 10

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Horizontální zarovnání obsahu tabuly Vlastnost text–align. Možné hodnoty: left – zarovnání doleva, right – zarovnání doprava, center – zarovnání na střed, justify – zarovnání do bloku. 11

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Vertikální zarovnání obsahu tabulky Vlastnost vertical–align : top – obsah buňky se zarovná k jejímu hornímu okraji, middle – výchozí hodnota – zarovnává na střed na vertikále, bottom – obsah bude zarovnán ke spodnímu okraji buňky, baseline – obsah buňky bude zarovnán k základní lince. 12

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Ohraničení tabulky Vlastnost border : border-width, border-style, border-color. Příklad: table, td {2px solid black} 13

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Podoba rámečku border-collapse Vlastnost border-collapse: separate – vykreslí oddělený rámeček, collapse – model zhrouceného rámečku. Rámečky přilehlých buněk se budou překrývat, Výsledkem bude jedna čára ohraničení. inherit – hodnota se zdědí od nadřazeného elementu. Příklad: table, td {border:1px solid black; border-collapse:collapse} 14

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Své znalosti si zopakujte v zde. Kvíz 15

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Zdroje W3C [online] [cit ]. Dostupné z: KROUŽEK, Jiří a Martin DOMES. CSS: kapesní přehled. Vyd. 1. Brno: Computer Press, 2006, 135 s. ISBN CASTRO, Elizabeth. HTML, XHTML a CSS: názorný průvodce tvorbou WWW stránek. Vyd. 1. Brno: Computer Press, 2007, 438 s. ISBN STANÍČEK, Petr. CSS: hotová řešení. Vyd. 1. Brno: Computer Press, 2006, 267 s. ISBN