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