HTML tables

Vytvořila jsem webovou stránku
o domácích mazlíčcích se seznamem jejich jmen.

Co vás napadne,
když se na to podíváte?

Měla jsem mazlíčky se jmény
Black & White, Deamon a Angel.

Co to bylo za mazlíčky?

Jakou měli barvu?

Jak staří byli?

Měla bych vám o nich
poskytnout více informací

abych ukojila vaši zvědavost.

Mohla bych to udělat
pomocí vnořeného seznamu

nebo dát informaci do kulatých závorek.

Black & White byl králík,

Daemon je kočka,

a Angel taky.

Ale tohle se mi nelíbí,
protože to není organizované

a na první pohled nevidím všechny druhy zvířat

v jednom hezky zarovnaném seznamu.

Tohle je perfektní příležitost
pro použití tabulky,

ve které bude řádek pro každého mazlíčka

a sloupec pro jejich jednotlivé vlastnosti,

které vám chci ukázat.

Pro vytvoření tabulky v HTML,
budeme potřebovat hodně tagů.

Tak se připravte.

A nelámejte si hlavu,
když si je nebudete všechny pamatovat.

Vždycky si je potom můžete najít.

Mně to třeba trvalo 10 let,
než jsem si je všechny zapamatovala.

Tak se dáme do toho.

První tag je ,

Dále potřebujeme hlavičku tabulky,

která bude obsahovat popisek
pro každý sloupec.

Takže napíšeme .

Dovnitř obvykle chceme jen jeden řádek.

Pro každý řádek v tabulce
použijeme tag .

Do tohoto řádku chceme
buňky hlavičky.

Pro každou buňku hlavičky
napíšeme tag .

Jaký bude popisek prvního sloupce?

Budou to jména mazlíčků,
protože to je nejdůležitější údaj v řádku.

a zároveň je to jedinečný identifikátor.

Přidáme další sloupec pro druh zvířete.

A nakonec přidáme sloupec pro barvu.

Myslím, že to prozatím stačí.

Teď přidáme nějaká data.

Pro začátek vyplníme řádky daty

pomocí tagu pod

a pak budeme znovu
potřebovat vytvořit řádek,

takže použijeme tag .

Ale uvnitř místo tagu ,

použijeme ,
protože jsme uvnitř těla tabulky.

'td' je zkratka pro 'Table Data',

Jaká je hodnota v první buňce
prvního řádku?

No, podívám se do mého seznamu,

a vidím, že první věc na něm
byla Black & white,

což je její jméno,

takže jenom napíšu "Black & white".

Teď druhý tag .

Druhý tag je pro druh zvířat.

a Black & white je králík,

takže napíšeme "králík".

A nakonec, třetí .

Koukneme nahoru,
třetí je pro barvy.

No, jako malá jsem nebyla moc kreativní,
když jsem pojmenovávala svého králíka,

takže barvy můžete nejspíš uhádnout.

Dobrá, pojďme na další řádek.

Ukážu vám malou fintu,
která se mi líbí.

Jakmile uděláme jeden řádek.

označíme ho

a zkopírujeme pomocí klávesové zkratky,

což je obvykle Control + C,

záleží na vašem operačním systému.

A poté to vložíme,
rovněž pomocí klávesové zkratky,

většinou control + V,

opět podle operačního systému.

A po vložení akorát změním hodnoty.

Takže tahle bude Daemon,
kočka a bude černá,

a pak to uděláme ještě jednou,

a tohle bude Angel,
kočka a bude oranžová.

Když byste měli pořád psát a ,
tak se unudíte k smrti.

Tenhle můj kopírovací trik
vám to trochu ulehčí.

A máme hotovou tabulku!

Můžu snadno přidat další sloupce,

pouze přidám další tag v hlavičce,

a pak v každém řádku,

pokud bych chtěla přidat
více detailů o mých mazlíčcích.

Možná vás zajímá,
jak změnit vzhled tabulky,

jako změnit okraje
nebo barvy nebo velikost mezer.

Vše můžete dělat pomocí CSS vlastností,

které jste se už možná naučili
nebo se naučíte.

Vyzkoušejte si vytvořit vlastní webovou
stránku se seznamem vlastních mazlíčků,

nebo mazlíčků, které byste chtěli.

A uspořádejte data do tabulky.