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

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


  • 58 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

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á


Z kladn kola a mate sk kola bzenec

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

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

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

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

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

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

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

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 sledek1

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

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

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

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

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

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

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 sledek2

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

Obsah buňky:

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

    • obrázek

    • odkaz na www stránku

    • čísla

    • texty, …


Z kladn kola a mate sk kola bzenec

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