1 / 19

Základní škola a mateřská škola Bzenec

Základní škola a mateřská škola Bzenec. Číslo projektu: CZ.1.07/1.4.00/21.2769. Čí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

brody
Download Presentation

Základní škola a mateřská škola Bzenec

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/21.2769 Čí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á

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

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

  4. Jak vytvořit tabulku? • slouží k tomu tagy <table> … začátek tabulky </table>… konec tabulky • jednotlivé řádky <tr> … začátek řádku </tr> … konec řádku • jednotlivé buňky (sloupce) <td> … začátek buňky </td> … 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í)

  5. 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. <table> <tr> <td>krysa</td> <td>buvol</td> <td>tygr</td> <td>zajíc</td> </tr> <tr> <td>drak</td><td>had</td> <td>kůň</td><td>ovce</td> </tr> </table> Druhý řádek obsahuje taky 4 buňky, jednotlivé buňky ale nemusí být vždy na novém řádku.

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

  7. 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: &nbsp; • zapsáno to bude např. takto: <td>&nbsp; </td>

  8. Vlastnosti – rámeček: border … nakreslí čáry v tabulce zadává se do příkazu <table>: 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 <body>) může být např.: <tableborder="10">

  9. 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ř.: <table border="5" width="80%">

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

  11. 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) <table border=“5“ cellpadding=“5“ cellspacing=“10“>

  12. 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, …)

  13. Vlastnosti – typ rámečku typ rámečku … border-style: … solid plná čára dotted tečkovaná čára dashed čárkovaná čára double dvojitá čára groove příkop ridge val inset ďolík outset návrší none nic

  14. Například: <style type=„text/css“> table {text-align: left; background-color: lightblue; border-color: navy; border-style: dotted} td {border-color: yellow} </style>

  15. Vlastnosti – slučování buněk: • 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

  16. příklad zadání: <table border="5" cellpadding="5" cellspacing="10" width="500"> <tr> <td rowspan=„3“>zvěř</td> <td>zajíc</td> <td colspan=„2“>krysa a buvol</td> </tr> <tr> <td>had</td><td>kůň</td><td>ovce</td> </tr> <tr> <td>tygr</td><td>rys</td><td>osel</td> </tr> </table>

  17. Výsledek: Sloučené buňky v řádku 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!!! Sloučené buňky ve sloupci

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

  19. Např.: <table border="1" align="center"> <tr> <td><img src="garfield1.gif"></td> <td><img src="garfield2.gif"></td> , <td><img src="garfield3.gif"></td> <td><img src="garfield4.gif"></td> <td><img src="garfield5.gif"></td> </tr> </table>

More Related