slide1
Download
Skip this Video
Download Presentation
Základní škola a mateřská škola Bzenec

Loading in 2 Seconds...

play fullscreen
1 / 19

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


  • 76 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Základní škola a mateřská škola Bzenec' - brody


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
slide1

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á

slide2

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

dotted tečkovaná čára

dashed čárkovaná čára

double dvojitá čára

groove příkop

ridge val

inset ďolík

outset návrší

none nic

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, …
slide19
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>

ad