NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov

Prezentace na téma: "NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov"— Transkript prezentace:

1 NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
AUTOR: Ivana Mačková NÁZEV: VY_32_INOVACE_SADA5_INF.9.14 TÉMA: HTML - tabulky ČÍSLO PROJEKTU: CZ.1.07/1.4.00/

2 Anotace Materiál HTML - tabulky Vzdělávací obor Informatika
Tematický okruh HTML – tvorba www stránek Anotace Výukový materiál slouží k vysvětlení a procvičení příkazu pro vytváření tabulek v html dokumentech. Očekávaný výstup Žák se seznámí s příkazem <table> a jeho parametry; funkčnost příkazu si ověřuje na příkladech. Získané poznatky aplikuje také při řešení úkolu. Druh učebního materiálu Prezentace Stupeň a typ vzdělávání Základní vzdělávání – druhý stupeň, 9. ročník

3 HTML - TABULKY Základní tagy
Cílem této prezentace je naučit se tvořit jednoduché i složitější tabulky. Základní tagy Každá HTML tabulka obsahuje 3 základní tagy:  <table> - vyznačuje začátek a konec tabulky; je to párový tag <tr> - vyznačuje začátek a konec řádku; je to párový tag <td> - vyznačuje začátek a konec buňky; je to párový tag

4 Vytvoříme v poznámkovém bloku tento html dokument a uložíme jej pod názvem tabulky1.html.
začátek tabulky tabulka má 7 řádků po 1 buňce konec tabulky

5 Po otevření souboru tabulky1
Po otevření souboru tabulky1.html v internetovém prohlížeči vypadá výsledek naší práce takto:

6 Nyní přidáme k tagu <TABLE> další atributy:
border – definuje tloušťku rámečku cellpadding – určuje v bodech (pixelech) odsazení obsahu (textu) v buňce od rámečku cellspacing – určuje v bodech mezeru mezi jednotlivými buňkami

7 Po této úpravě vypadá tabulka takto:
7 řádků 1 sloupec

8 Sloupci v tabulce přidáme záhlaví příkazem <th> :
je to obdoba příkazu pro vytvoření buňky text v této buňce je zarovnán na střed a je psán tučným písmem v prohlížeči

9 Pokud bychom místo záhlaví sloupce chtěli vytvořit nadpis tabulky, použijeme tag <caption>.
v prohlížeči

10 Jak bychom museli opravit soubor tabulky1
Jak bychom museli opravit soubor tabulky1.html, aby naše tabulka měla 1 řádek se 7 buňkami? v prohlížeči

11 SLUČOVÁNÍ BUNĚK V TABULCE
Atribut colspan - jedna buňka bude zahrnovat více sloupců

12 SLUČOVÁNÍ BUNĚK V TABULCE
Atribut rowspan - jedna buňka bude zahrnovat více řádků

13 Toto je výsledek zobrazení souboru v prohlížeči:

14 ATRIBUTY PRO BARVU POZADÍ, BARVU PÍSMA, ZAROVNÁNÍ PÍSMA
Tato nastavení provádíme atributem style u buňky: <td style = color:red; background-color:yellow; text-align:center;> zarovnání textu barva písma barva pozadí

15

16 ÚKOL: Vytvořte html soubor pro tabulku dle předlohy.
ŘEŠENÍ

17

18 Citace Ilustrace: Kopie obrazovek programu Poznámkový blok – vlastní tvorba autora Kopie obrazovek internetového prohlížeče – vlastní tvorba autora