1 / 16

Tabulky 1

2 . června 2013. VY_32_INOVACE_160319_Tabulky_1_DUM. Tabulky 1. Základní nastavení. Prvky tabulek. tabulky nadpisy tabulek řádek sloupec skupina řádků skupina sloupců skupina záhlaví skupina zápatí buňka. Struktura tabulky – povinné elementy. < table> < tr >

odin
Download Presentation

Tabulky 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 2. června 2013 VY_32_INOVACE_160319_Tabulky_1_DUM Tabulky 1 Základní nastavení

  2. Prvky tabulek • tabulky • nadpisy tabulek • řádek • sloupec • skupina řádků • skupina sloupců • skupina záhlaví • skupina zápatí • buňka

  3. Struktura tabulky – povinné elementy <table> <tr> <td>1. buňka v 1. řádku</td> <td>2. buňka v 1. řádku</td> </tr> <tr> <td>1. buňka v 2. řádku</td> <td>2. buňka v 2. řádku</td> </tr> </table>

  4. Význam základních značek • <table>,</table> Párová značka označující začátek a konec tabulky. • <tr>, </tr> Párová značka definující řádek tabulky. • <td>, </td> Párová značka vymezující buňku v tabulce.

  5. Nepovinné části tabulky • <caption>, <caption> Definuje nadpis tabulky. • <thead>, </thead> Párová značka určující hlavičku tabulky. • <tbody>, </tbody> Vymezuje tělo tabulky. • <tfoot>, </tfoot> Párová značka pro patu tabulky.

  6. Nepovinné části tabulky • <colgroup>, <colgroup> Spravuje skupinu sloupců se stejným formátováním. • <col> Nepárová značka. Definuje sloupec tabulky. • <th>,</th> Párová značka pro buňky hlavičky tabulky.

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

  8. 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í.

  9. 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}

  10. 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).

  11. 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.

  12. 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.

  13. Ohraničení tabulky Vlastnost border: • border-width, • border-style, • border-color. Příklad: table, td {2px solid black}

  14. 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}

  15. Své znalosti si zopakujte v zde. • Kvíz

  16. Zdroje • W3C [online]. 2013 [cit. 2013-06-02]. Dostupné z: http://www.w3.org/ • KROUŽEK, Jiří a Martin DOMES. CSS: kapesní přehled. Vyd. 1. Brno: ComputerPress, 2006, 135 s. ISBN 80-251-0773-6. • CASTRO, Elizabeth. HTML, XHTML a CSS: názorný průvodce tvorbou WWW stránek. Vyd. 1. Brno: ComputerPress, 2007, 438 s. ISBN 978-80-251-1531-2. • STANÍČEK, Petr. CSS: hotová řešení. Vyd. 1. Brno: ComputerPress, 2006, 267 s. ISBN 80-251-1031-1.

More Related