Inf Tvorba WWW – tabulky a seznamy

Výukový materiál Číslo projektu: CZ.1.07/1.5.00/34.0608 Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Číslo materiálu: 07_02_32_INOVACE_19

Základní užitečné tagy HTML Předmět: INF Ročník: 3. Jméno autora: Jan Mlčůch Škola: SPŠ Hranice Anotace: Žák se seznámí s tagy pro tvorbu tabulek a seznamů. Klíčová slova: <table>, <thead>, <tbody>, <th>, <tr>, <td> <ul>, <ol>, <li> Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Jan Mlčůch Financováno z ESF a státního rozpočtu ČR.

Tabulky tabulka na webové stránce umožňuje vkládat do jejích buněk elementy, které jsou potom hezky uspořádané narozdíl od odstavců, které se vždy skládají pod sebe, si můžeme text v tabulce skládat úhledně vedle sebe krom textu mohou být v buňkách i obrázky a další elementy

Tabulky tabulka má podobnou strukturu, jako samotná HTML stránka začíná tagem <table> má hlavičku <thead> má tělo <tbody> každý tento tag je samozřejmě párový, takže se ukončuje příslušnými tagy s lomítkem, např. </table> tloušťku rámečku tabulky nastavíme atributem border, který je implicitně nastaven na 0, tedy vypnutý např. <table border="1">

Tabulky hlavičkou tabulky se myslí její první řádek, který popisuje, co znamenají hodnoty ve sloupcích hlavička lze i úplně vynechat existuje i tag <tfoot> umožňující nastavit patičku tabulky v těle tabulky jsou potom řádky odděleny tagy <tr>.../tr> v řádcích jsou jednotlivé buňky odděleny tagy <td>...</td> v hlavičce píšeme také <tr> ale místo <td> píšeme <th>

Příklad tabulky <table border="1"> <thead> <tr> <th>Značka</th> <th>Typ</th> <th>Motor</th> </tr> </thead> <tbody> <td><img src="images/škoda.jpg" alt=„Škoda"></td> <td>Superb</td> <td>2.5 TDI</td> . </tbody> </table>

Příklad tabulky

Tabulky sousední buňky v tabulce můžeme slučovat ke sloučení buněk v řádku slouží atribut colspan, který má hodnotu podle počtu buněk, které propojuje např. <td colspan="2">Škoda</td> obdobně lze pro sloupce použít atribut rowspan

Seznamy v HTML máme dva typy seznamů <ol> a <ul> <ol> ordered list = uspořádaný seznam neboli číslovaný seznam <ul> unordered list = neuspořádaný seznam seznam s odrážkami oba tagy jsou párové a obsahují položky seznamu oddělené párovým tagem <li> seznamy se často používají v navigačním menu na webové stránce

Příklad seznamu <h2>Co jsem se dnes naučil</h2> <ul> <li>Vytvářet tabulky</li> <li>Slučovat buňky</li> <li>Vytvořit uspořádaný seznam</li> </ul> <h2>Můj prioritní jídelníček</h2> <ol> <li>Špagety</li> <li>Smetanový sos</li> <li>Hamburger</li> <li>Cheese burger</li> <li>Brokolice</li> </ol>

Financováno z ESF a státního rozpočtu ČR. Použité zdroje ROUBAL, Pavel. Informatika a výpočetní technika pro střední školy : Teoretická učebnice. 1. vyd. Brno : CP Books, a. s., c2007. 102 s. ISBN 80-251-0761-2. Veškeré použité obrázky (kliparty) pocházejí z obsahu webu www.microsoft.office.com a vlastní tvorby v programu HTML-Kit. Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Jan Mlčůch Financováno z ESF a státního rozpočtu ČR.