tabulky 2

<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>

<section> <h1>Úroveň 1</h1> <section> <h1>Úroveň 2</h1> <section> <h1>Úroveň 3</h1> </section>

<nav> <ul> <li><a href="/">Titulek</a></li> <li><a href="/products">Výrobky</a></li> <li><a href="/services">Služby</a></li> <li><a href="/about">O nás</a></li> </ul> </nav>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs" /><head>

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

Tabulky 2Pokročilá nastavení

1

9. června 2013 VY_32_INOVACE_160320_Tabulky_2_DUM





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> <td colspan="2">sloučená buňka v řádku </td>

</tr> </table>





3

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

1. buňka v 1. řádku 2. buňka v 1. řádku

sloučená buňka v řádku





4

Sloučení buněk ve sloupci<table> <tr> <td rowspan="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

levý sloučený sloupec

1. buňka v 1. řádku

2. buňka v 2. řádku





6

Rozdělení tabulky na skupiny sloupcůTabulku rozdělíme na „sekce“, které naformátujeme pomocí CSS.

<table><col class="sl_1"> <col span="2"> <col class="sl_4">…</table>





7

caption-sideUrčuje umístění titulku tabulky.Hodnoty:• top zobrazení nadpisu nad tabulkou,• bottom nadpis se zobrazí pod tabulkou,• left vykreslení nadpisu vlevo od tabulky,• right vykreslení nadpisu vpravo od tabulky,• inherit zdědění hodnoty od nadřízeného

elementu.Příklad:caption {caption-side:bottom}





8

Schéma definování mezer v tabulce pomocí CSS

rámeček tabulky

rámeček buňky

obsah buňky

obsah buňky

border-spacing určuje mezeru mezi buňkami navzájem a mezi buňkami a rámečkem tabulky

padding řídí mezeru mezi rámečkem buňky a jejím obsahem





9

border-spacingVlastnost 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-spacingborder-spacing: a bParametr a platí pro mezery v horizontálním směru. Hodnota b pro mezery ve vertikálním směru.border-spacing: abNastavení hodnot ab platí pro horizontální i vertikální směr.table {border: 2px solid black;

border-spacing: 5px}





11

paddingNastavení 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

http://oa-opava-eu.ic.cz/Sonnek/VY_32_INOVACE_160320_Tabulky2_Kviz.htm





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: Computer Press, 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: Computer Press, 2007, 438 s. ISBN 978-80-251-1531-2. •STANÍČEK, Petr. CSS: hotová řešení. Vyd. 1. Brno: Computer Press, 2006, 267 s. ISBN 80-251-1031-1.

tabulky 2

Documents