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

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

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

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

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

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

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

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

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

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

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

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

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

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í

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

Citace Ilustrace: Kopie obrazovek programu Poznámkový blok – vlastní tvorba autora Kopie obrazovek internetového prohlížeče – vlastní tvorba autora www.office.microsoft.com www.office.microsoft.com