Základní škola a mateřská škola Bzenec
Sponsored Links
This presentation is the property of its rightful owner.
1 / 19

Základní škola a mateřská škola Bzenec PowerPoint PPT Presentation


  • 64 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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

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

    <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í)


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.


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: &nbsp;

  • zapsáno to bude např. takto:

    <td>&nbsp; </td>


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">


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%">


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)

    <table border=“5“ cellpadding=“5“ cellspacing=“10“>


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:

<style type=„text/css“>

table {text-align: left; background-color: lightblue; border-color: navy; border-style: dotted}

td {border-color: yellow}

</style>


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


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>


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


Obsah buňky:

  • do buňky v tabulce můžeme vložit cokoliv:

    • obrázek

    • odkaz na www stránku

    • čísla

    • texty, …


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>


  • Login