Download
tabulky 2 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Tabulky 2 PowerPoint Presentation

Tabulky 2

176 Vues Download Presentation
Télécharger la présentation

Tabulky 2

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. VY_32_INOVACE_160320_Tabulky_2_DUM 9. června 2013 Tabulky 2 Pokročilá nastavení

  2. Sloučení buněk v řádku <table> <tr> <td>1. buňka v 1. řádku</td> <td>2. buňka v 1. řádku</td> </tr> <tr> <tdcolspan="2">sloučená buňka v řádku </td> </tr> </table>

  3. Schématická ukázka výstupu sloučených buněk v řádku

  4. Sloučení buněk ve sloupci <table> <tr> <tdrowspan="2">levý sloučený sloupec</td> <td>2. buňka v 1. řádku</td> </tr> <tr> <td>2. buňka v 2. řádku</td> </tr> </table>

  5. Schématická ukázka výstupu sloučených buněk ve sloupci

  6. Rozdělení tabulky na skupiny sloupců Tabulku rozdělíme na „sekce“, které naformátujeme pomocí CSS. <table> <colclass="sl_1"> <colspan="2"> <colclass="sl_4"> … </table>

  7. caption-side Určuje umístění titulku tabulky. Hodnoty: • top zobrazení nadpisu nad tabulkou, • bottom nadpis se zobrazí pod tabulkou, • leftvykreslení nadpisu vlevo od tabulky, • right vykreslení nadpisu vpravo od tabulky, • inheritzdědění hodnoty od nadřízeného elementu. Příklad: caption {caption-side:bottom}

  8. Schéma definování mezer v tabulce pomocí CSS border-spacing určuje mezeru mezi buňkami navzájem a mezi buňkami a rámečkem tabulky rámeček tabulky rámeček buňky obsah buňky obsah buňky padding řídí mezeru mezi rámečkem buňky a jejím obsahem

  9. border-spacing Vlastnost border-spacing definuje velikost mezer mezi rámečky buněk tabulky a prostor mezi rámečkem tabulky a rámečkem buněk. Hodnoty: • jednotky délky, • inherit.

  10. Syntaxe border-spacing border-spacing: a b Parametr a platí pro mezery v horizontálním směru. Hodnota b pro mezery ve vertikálním směru. border-spacing: ab Nastavení hodnot ab platí pro horizontální i vertikální směr. table {border: 2px solid black; border-spacing: 5px}

  11. padding Nastavení vnitřního okraje buněk pomocí CSS. Syntaxe: padding: hodnota Příklad: td {padding-left:5px}

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

  13. Zdroje • W3C [online]. 2013 [cit. 2013-06-09]. 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.