Tematická oblast: Aplikační software pro práci s informacemi II. Číslo šablony: III/2 VY_32_INOVACE_P4_3.12 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - tabulka Typ: DUM - kombinovaný Předmět: ICT Ročník: 2., 3. r. (6leté), 1. r. (4leté) Zpracováno v rámci projektu EU peníze školám CZ.1.07/1.5.00/34.0296 Zpracovatel: Mgr. René Brauner Gymnázium, Třinec, příspěvková organizace Datum vytvoření: březen 2014
Metodický list Prezentace je určena k procvičení učiva v 2., 3. ročníku šestiletého a 1. ročníku čtyřletého studia. Je možné ji zařadit i do plánů seminářů ICT v rámci opakování. Prezentace vede žáka k pochopení problematiky tvorby webových stránek, prezentované učivo se ihned aplikuje do výuky. Žák prokazuje znalost pojmů HTML, CSS. Žák je schopen napsat krátký zdrojový kód. Úkoly řeší žáci samostatně na pracovních stanicích. Mohou používat doporučené učebnice, google nebo wikipedii. Práce a následná kontrola probíhají ve spolupráci s učitelem.
HTML - tabulka Tabulka se do stránky vkládá pomocí elementu TABLE. Uvnitř elementu pak postupně zapisujeme jednotlivé buňky tabulky. Buňky se zapisují po řádcích. Řádka tabulky je uzavřena mezi tagy <TR> a </TR>. Jednotlivé buňky v řádce se pak uzavírají mezi tagy: <TD> a </TD> Element TD se používá pro normální buňky <TH> a </TH> Element TH se používá pro buňky v hlavičce tabulky, znaky se zobrazují tučným písmem a jsou vycentrovány. Na internetových stránkách se tabulky používají ve dvou případech: Jestliže je potřeba udělat klasickou tabulku. Jako pomůcka pro úpravu stránek, když je něco potřeba někam umístit (např. sloupcová sazba).
Tag <table> Tag uzavírá celou strukturu tabulky, obsahuje další elementy; zejména řádky tabulky <tr>. atribut význam možné hodnoty align obtékání tabulky ostatním textem left, right, center cellpadding vnitřní okraj buněk pixely cellspacing vnější okraj buněk pixely border šířka rámečku buněk pixely width minimální šířka tabulky délka, procento height minimální výška délka, procento background obrázek na pozadí URL obrázku bgcolor barva pozadí barva bordercolor barva rámečku barva
Tabulka <html> <head> <title>TITUL</title> <body> <h1>Tabulka</h1> <table> <tr> <td>buňka</td> </tr> </table> </body> </html>
Tag <tr> Řádek tabulky. Z angl. table row. Musí být uvnitř elementu <table> a smí obsahovat pouze buňky (<td> a <th>). Přípustnými (ale zastaralými a neužívanými) atributy jsou height, background, bgcolor. Jde o tag párový, ale pokud se neuvede koncová značka, tak se v prohlížeči nic zlého nestane, protože to je stejně vždycky před začátkem nového řádku nebo před koncem tabulky. Vhodné je tag <tr> ukončovat pro přehlednost.
Tabulka <html> <head> <title>TITUL</title> <body> <h1>Tabulka</h1> <table border="1"> <tr> <th>jan</th> <th>buňka</th> </tr> <td>jarmila</td> <td>buňka</td> </table> </body> </html>
Sloučení buněk Někdy potřebujeme několik buněk tabulky sloučit dohromady, např. pro společný nadpis nad více sloupci. Pokud chceme sloučit několik buněk v jednom řádku do jedné buňky, stačí u tagu <TH> nebo <TD> uvést atribut COLSPAN. Jako jeho hodnotu uvedeme počet buněk, které mají být sloučeny. Př: <TH COLSPAN="2">
Cvičení Popište strukturu tabulky. Vysvětlete použití tagů TH, TR. Které atributy můžete použít u tagu TABLE?
Citace zdrojů JAKpsatweb. Tabulky [online]. [cit. 5.3.2014]. Dostupný na WWW: http://www.jakpsatweb.cz/html/tabulky.html