Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a: Mgr. Jana Presová Ověřil/a: Mgr. Jana Presová

Název výukového materiálu: Vyváříme www stránky Vzdělávací obor: výpočetní technika Tematický okruh: tvorba jednoduché webové stránky Téma: IX. Tabulky Stručná anotace: Prezentace shrnující zásady při vytváření tabulek na webové stránce a její formátování, také ukazuje, pomocí kterých tagů se slučují nebo rozdělují buňky a jak se dá upravit rámeček.

Jak na tabulky? na www stránku můžeme vložit libovolný počet tabulek do jedné tabulky můžeme vložit další tabulku, jen pozor na správné ukončování jednotlivých buněk tabulky každou tabulku můžeme nějak zformátovat můžeme do ní vložit i obrázek, …

Jak vytvořit tabulku? slouží k tomu tagy … začátek tabulky … konec tabulky jednotlivé řádky … začátek řádku … konec řádku jednotlivé buňky (sloupce) … začátek buňky … konec buňky text píšeme vždy tyto tagy kolikrát tyto tagy napíšeme, tolik se vloží řádků kolikrát tyto tagy napíšeme, tolik se vloží buněk na řádek (na tolik sloupců se rozdělí)

krysa buvol tygr zajíc drak had kůň ovce Příklad jednoduché tabulky: První řádek v tabulce obsahuje 4 buňky, jednotlivé buňky si můžeme pro přehlednost psát vždy na nový řádek. Druhý řádek obsahuje taky 4 buňky, jednotlivé buňky ale nemusí být vždy na novém řádku.

Výsledek: takto bude vypadat výsledek tabulka kolem nemá rámeček ani žádné čáry uvnitř, protože jsme je zatím nenastavili

Prázdná buňka pokud má být některá buňka prázdná, aby tam vůbec byla, musí se do jejího obsahu vložit „pevná mezera“ a to příkazem: zapsáno to bude např. takto:

Vlastnosti – rámeček: border … nakreslí čáry v tabulce zadává se do příkazu : border="n" … n je číslo, které zadá šířku rámečku (udává se v pixelech) barva rámečku je vždy taková, jako je barva písma, kromě případu, kdy ve stylu zadáme jiný formát nastavení rámečku (v ) může být např.:

Vlastnosti – šířka tabulky: width … šířka tabulky udává se: v pixelech (pevná velikost tabulky) v procentech (vzhledem k velikosti otevřeného okna, velikost tabulky se přizpůsobuje oknu – pokud to lze) např.:

Výsledek takto bude vypadat výsledek tabulka má kolem rámeček a šířka vzhledem k otevřenému oknu je 80%

Vlastnosti – mezery mezi buňkami cellpadding … vnitřní velikost rámečku (jsou to jakési rozestupy mezi krajem buňky a textem) cellspacing … vnější velikost rámečku (jsou to jakési rozestupy mezi jednotlivými buňkami)

Vlastnosti – formát tabulky tabulku můžeme formátovat pomocí kaskádových stylů formát se nastaví v hlavičce ve stylu můžeme nastavit: –rámeček …border –zarovnání textu … text-align (left, right, center, justify) –barvu pozadí … background-color –barvu rámečku … border-color –typ rámečku … border-style –formát písma (typ, styl, barvu, velikost, tučnost, …)

Vlastnosti – typ rámečku typ rámečku … border-style: … solid plná čára dottedtečkovaná čára dashedčárkovaná čára doubledvojitá čára groovepříkop ridgeval insetďolík outsetnávrší nonenic

Například: table {text-align: left; background-color: lightblue; border-color: navy; border-style: dotted} td {border-color: yellow}

Sloučení řádků: rowspan="n", kde n je celkový počet řádků, které budou spojeny Sloučení sloupců: colspan="n", kde n je celkový počet sloupců, které budou spojeny do jedné buňky na řádku Vlastnosti – slučování buněk:

příklad zadání: zvěř zajíc krysa a buvol had kůň ovce tygr rys osel

Výsledek: Sloučené buňky v řádku Sloučené buňky ve sloupci P.S. nezapomeňte pak ale taky ubrat počet buněk – musí jich být o tolik míň, kolik je jich sloučených!!!

Obsah buňky: do buňky v tabulce můžeme vložit cokoliv: –obrázek –odkaz na www stránku –čísla –texty, …

Např.:,