1
00:00:00,279 --> 00:00:04,335
Vytvořila jsem webovou stránku
o domácích mazlíčcích se seznamem jejich jmen.

2
00:00:04,335 --> 00:00:06,747
Co vás napadne,
když se na to podíváte?

3
00:00:06,747 --> 00:00:11,113
Měla jsem mazlíčky se jmény
Black & White, Deamon a Angel.

4
00:00:11,113 --> 00:00:12,964
Co to bylo za mazlíčky?

5
00:00:12,964 --> 00:00:14,553
Jakou měli barvu?

6
00:00:14,553 --> 00:00:16,124
Jak staří byli?

7
00:00:16,124 --> 00:00:19,233
Měla bych vám o nich
poskytnout více informací

8
00:00:19,233 --> 00:00:21,047
abych ukojila vaši zvědavost.

9
00:00:21,047 --> 00:00:23,457
Mohla bych to udělat
pomocí vnořeného seznamu

10
00:00:23,457 --> 00:00:26,816
nebo dát informaci do kulatých závorek.

11
00:00:26,816 --> 00:00:30,332
Black & White byl králík,

12
00:00:30,332 --> 00:00:32,213
Daemon je kočka,

13
00:00:32,213 --> 00:00:34,204
a Angel taky.

14
00:00:34,384 --> 00:00:37,375
Ale tohle se mi nelíbí,
protože to není organizované

15
00:00:37,375 --> 00:00:40,906
a na první pohled nevidím všechny druhy zvířat

16
00:00:40,906 --> 00:00:42,786
v jednom hezky zarovnaném seznamu.

17
00:00:42,786 --> 00:00:46,706
Tohle je perfektní příležitost
pro použití tabulky,

18
00:00:46,706 --> 00:00:49,140
ve které bude řádek pro každého mazlíčka

19
00:00:49,140 --> 00:00:51,858
a sloupec pro jejich jednotlivé vlastnosti,

20
00:00:51,858 --> 00:00:54,084
které vám chci ukázat.

21
00:00:54,084 --> 00:00:58,378
Pro vytvoření tabulky v HTML,
budeme potřebovat hodně tagů.

22
00:00:58,378 --> 00:00:59,958
Tak se připravte.

23
00:00:59,958 --> 00:01:02,771
A nelámejte si hlavu,
když si je nebudete všechny pamatovat.

24
00:01:02,771 --> 00:01:04,434
Vždycky si je potom můžete najít.

25
00:01:04,434 --> 00:01:08,460
Mně to třeba trvalo 10 let,
než jsem si je všechny zapamatovala.

26
00:01:08,460 --> 00:01:10,436
Tak se dáme do toho.

27
00:01:10,436 --> 00:01:15,084
První tag je ,

28
00:01:15,084 --> 00:01:17,560
Dále potřebujeme hlavičku tabulky,

29
00:01:17,560 --> 00:01:20,023
která bude obsahovat popisek
pro každý sloupec.

30
00:01:20,023 --> 00:01:23,043
Takže napíšeme .

31
00:01:23,043 --> 00:01:27,858
Dovnitř obvykle chceme jen jeden řádek.

32
00:01:27,858 --> 00:01:32,002
Pro každý řádek v tabulce
použijeme tag .

33
00:01:32,002 --> 00:01:35,286
Do tohoto řádku chceme
buňky hlavičky.

34
00:01:35,286 --> 00:01:41,677
Pro každou buňku hlavičky
napíšeme tag .

35
00:01:41,677 --> 00:01:44,879
Jaký bude popisek prvního sloupce?

36
00:01:44,879 --> 00:01:49,092
Budou to jména mazlíčků,
protože to je nejdůležitější údaj v řádku.

37
00:01:49,092 --> 00:01:51,306
a zároveň je to jedinečný identifikátor.

38
00:01:51,306 --> 00:01:54,699
Přidáme další sloupec pro druh zvířete.

39
00:01:54,699 --> 00:01:58,602
A nakonec přidáme sloupec pro barvu.

40
00:01:58,602 --> 00:02:01,532
Myslím, že to prozatím stačí.

41
00:02:01,532 --> 00:02:03,915
Teď přidáme nějaká data.

42
00:02:03,915 --> 00:02:05,951
Pro začátek vyplníme řádky daty

43
00:02:05,951 --> 00:02:09,473
pomocí tagu  pod 

44
00:02:09,473 --> 00:02:11,847
a pak budeme znovu
potřebovat vytvořit řádek,

45
00:02:11,847 --> 00:02:14,282
takže použijeme tag .

46
00:02:14,282 --> 00:02:16,717
Ale uvnitř místo tagu ,

47
00:02:16,717 --> 00:02:20,005
použijeme ,
protože jsme uvnitř těla tabulky.

48
00:02:20,005 --> 00:02:23,136
'td' je zkratka pro 'Table Data',

49
00:02:23,136 --> 00:02:27,871
Jaká je hodnota v první buňce
prvního řádku?

50
00:02:28,056 --> 00:02:30,311
No, podívám se do mého seznamu,

51
00:02:30,311 --> 00:02:33,801
a vidím, že první věc na něm
byla Black & white,

52
00:02:33,801 --> 00:02:36,019
což je její jméno,

53
00:02:36,019 --> 00:02:40,258
takže jenom napíšu "Black & white".

54
00:02:40,258 --> 00:02:42,496
Teď druhý tag .

55
00:02:42,496 --> 00:02:46,726
Druhý tag  je pro druh zvířat.

56
00:02:46,726 --> 00:02:49,724
a Black & white je králík,

57
00:02:49,724 --> 00:02:52,497
takže napíšeme "králík".

58
00:02:52,497 --> 00:02:55,159
A nakonec, třetí .

59
00:02:55,159 --> 00:02:59,049
Koukneme nahoru,
třetí  je pro barvy.

60
00:02:59,049 --> 00:03:04,430
No, jako malá jsem nebyla moc kreativní,
když jsem pojmenovávala svého králíka,

61
00:03:04,430 --> 00:03:08,215
takže barvy můžete nejspíš uhádnout.

62
00:03:08,215 --> 00:03:10,767
Dobrá, pojďme na další řádek.

63
00:03:10,767 --> 00:03:13,067
Ukážu vám malou fintu,
která se mi líbí.

64
00:03:13,067 --> 00:03:15,544
Jakmile uděláme jeden řádek.

65
00:03:15,544 --> 00:03:17,126
označíme ho

66
00:03:17,126 --> 00:03:19,394
a zkopírujeme pomocí klávesové zkratky,

67
00:03:19,394 --> 00:03:22,588
což je obvykle Control + C,

68
00:03:22,588 --> 00:03:24,538
záleží na vašem operačním systému.

69
00:03:24,538 --> 00:03:28,637
A poté to vložíme,
rovněž pomocí klávesové zkratky,

70
00:03:28,637 --> 00:03:31,082
většinou control + V,

71
00:03:31,082 --> 00:03:33,035
opět podle operačního systému.

72
00:03:33,035 --> 00:03:36,870
A po vložení akorát změním hodnoty.

73
00:03:36,870 --> 00:03:41,779
Takže tahle bude Daemon, 
kočka a bude černá,

74
00:03:41,779 --> 00:03:44,397
a pak to uděláme ještě jednou,

75
00:03:44,397 --> 00:03:52,705
a tohle bude Angel,
kočka a bude oranžová.

76
00:03:52,705 --> 00:03:58,158
Když byste měli pořád psát  a ,
tak se unudíte k smrti.

77
00:03:58,158 --> 00:04:03,292
Tenhle můj kopírovací trik
vám to trochu ulehčí.

78
00:04:03,299 --> 00:04:05,853
A máme hotovou tabulku!

79
00:04:05,853 --> 00:04:08,041
Můžu snadno přidat další sloupce,

80
00:04:08,041 --> 00:04:10,548
pouze přidám další tag  v hlavičce,

81
00:04:10,548 --> 00:04:12,827
a pak  v každém řádku,

82
00:04:12,827 --> 00:04:16,142
pokud bych chtěla přidat
více detailů o mých mazlíčcích.

83
00:04:16,142 --> 00:04:19,661
Možná vás zajímá,
jak změnit vzhled tabulky,

84
00:04:19,661 --> 00:04:22,209
jako změnit okraje
nebo barvy nebo velikost mezer.

85
00:04:22,209 --> 00:04:24,673
Vše můžete dělat pomocí CSS vlastností,

86
00:04:24,673 --> 00:04:27,768
které jste se už možná naučili
nebo se naučíte.

87
00:04:27,768 --> 00:04:31,462
Vyzkoušejte si vytvořit vlastní webovou
stránku se seznamem vlastních mazlíčků,

88
00:04:31,462 --> 00:04:33,294
nebo mazlíčků, které byste chtěli.

89
00:04:33,294 --> 00:04:35,853
A uspořádejte data do tabulky.