Inf Tvorba WWW – tabulky a seznamy

Prezentace na téma: "Inf Tvorba WWW – tabulky a seznamy"— Transkript prezentace:

1 Inf Tvorba WWW – tabulky a seznamy

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

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

4 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

5 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">

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

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

8 Příklad tabulky

9 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

10 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

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

12 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., c s. ISBN Veškeré použité obrázky (kliparty) pocházejí z obsahu webu 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.