section DOCTYPE html h 1rove 1h 1 html

  • Slides: 16
Download presentation
<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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> 2. června 2013 <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> VY_32_INOVACE_160319_Tabulky_1_DUM Tabulky 1 Základní nastavení 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. 1

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> • • • <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> Prvky tabulek tabulky nadpisy tabulek řádek sloupec skupina řádků skupina sloupců skupina záhlaví skupina zápatí buňka <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 2

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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 "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Struktura tabulky – povinné elementy <table> <tr> <td>1. <td>2. </tr> </table> buňka v 1. řádku</td> buňka v 2. řádku</td> 3

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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 "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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. 4

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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 "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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. 5

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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> Nepovinné části tabulky • <colgroup>, <colgroup> <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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. 6

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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 "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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 "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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 "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Nastavení způsobu vykreslení Způsob vykreslení ovlivňuje vlastnost CSS table-layout. Fixní model: #tab 1 {table-layout: fixed} Automatický model: #tab 1 {table-layout: auto} 9

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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 "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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 "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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 "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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> Ohraničení tabulky Vlastnost border: • border-width, • border-style, • border-color. <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> Příklad: table, td {2 px solid black} 13

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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 "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> 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: 1 px solid black; border-collapse: collapse} 14

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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 "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> • Své znalosti si zopakujte v zde. • Kvíz 15

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1>

<section> <!DOCTYPE html> <h 1>Úroveň 1</h 1> <html> <section> <head> <h 1>Úroveň 2</h 1> <title>Title of the document</title> <section> </head> <h 1>Úroveň 3</h 1> <body> </section> The content of the document. . . </body> </html> <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> Zdroje <!DOCTYPE html PUBLIC "//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD /xhtml 1 -transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xht ml" xml: lang="cs" /> <head> • W 3 C [online]. 2013 [cit. 2013 -06 -02]. Dostupné z: http: //www. w 3. 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 -15312. • STANÍČEK, Petr. CSS: hotová řešení. Vyd. 1. Brno: Computer Press, 2006, 267 s. ISBN 80 -251 -1031 -1. 16