1
00:00:00,279 --> 00:00:02,635
Zrobiłam stronę
o swoich zwierzętach,

2
00:00:02,635 --> 00:00:04,115
z listą ich imion.

3
00:00:04,321 --> 00:00:06,795
Czy coś was zastanawia?

4
00:00:07,017 --> 00:00:10,953
Miałam Czarno-białego,
Demona i Anioła,

5
00:00:11,094 --> 00:00:12,991
ale jakie to były zwierzaki?

6
00:00:13,134 --> 00:00:14,413
Jakiego koloru?

7
00:00:14,525 --> 00:00:15,924
W jakim wieku?

8
00:00:16,113 --> 00:00:18,316
Powinnam podać więcej informacji

9
00:00:18,316 --> 00:00:21,027
o swoich zwierzętach.
Odpowiedzieć na pytania.

10
00:00:21,195 --> 00:00:23,457
Mogłabym zrobić listę zagnieżdżoną

11
00:00:23,457 --> 00:00:27,012
lub podawać informacje
w nawiasach:

12
00:00:27,166 --> 00:00:32,002
Czarno-biały był królikiem,
Demon to kot,

13
00:00:32,002 --> 00:00:34,173
Anioł - też kot.

14
00:00:34,495 --> 00:00:37,605
Ale wygląda to nieporządnie.

15
00:00:37,605 --> 00:00:40,906
I nie mogę przewijać w dół tak,
by widzieć gatunki

16
00:00:40,906 --> 00:00:42,586
w postaci eleganckiej listy.

17
00:00:43,111 --> 00:00:47,116
To wspaniała okazja,
żeby stworzyć tabelę

18
00:00:47,401 --> 00:00:49,130
z wierszami dla zwierzaków

19
00:00:49,130 --> 00:00:51,858
i z kolumnami na informacje,

20
00:00:51,858 --> 00:00:53,764
które chcę wam podać.

21
00:00:54,053 --> 00:00:58,390
Do robienia tabel w HTML-u
trzeba wielu znaczników.

22
00:00:58,618 --> 00:00:59,836
Przygotujcie się!

23
00:00:59,968 --> 00:01:02,551
Nie musicie uczyć się
znaczników na pamięć.

24
00:01:02,551 --> 00:01:04,394
Jest gdzie sprawdzać.

25
00:01:04,427 --> 00:01:07,192
Mnie uczenie się ich
zajęło 10 lat, a jestem

26
00:01:07,192 --> 00:01:08,038
zawodowcem!

27
00:01:08,575 --> 00:01:10,186
Jesteście gotowi?

28
00:01:10,486 --> 00:01:14,890
Pierwszy znacznik to „table”
(ang. tabela). Trafna nazwa!

29
00:01:15,104 --> 00:01:19,927
Potrzebujemy nagłówka w tabeli,
na tytuły kolumn.

30
00:01:20,023 --> 00:01:22,463
Zapiszemy: „thead”.

31
00:01:23,268 --> 00:01:27,874
Wewnątrz zwykle jest
jeden wiersz komórek nagłówka.

32
00:01:27,988 --> 00:01:31,959
Dodając wiersz, używamy
znacznika „tr”.

33
00:01:32,632 --> 00:01:35,287
W tym wierszu wstawiamy
komórki nagłówka.

34
00:01:36,016 --> 00:01:40,907
Do stworzenia komórki użyjemy „th”.

35
00:01:42,232 --> 00:01:44,839
Jaka będzie nazwa pierwszej kolumny?

36
00:01:45,099 --> 00:01:49,252
Imiona zwierzaków to najważniejsza
informacja w wierszu.

37
00:01:49,252 --> 00:01:51,096
To go określa.

38
00:01:51,292 --> 00:01:54,551
Dodajmy kolumnę dla gatunku

39
00:01:55,269 --> 00:01:58,583
i w końcu - dla koloru.

40
00:01:59,342 --> 00:02:01,532
Na razie wystarczy kolumn,

41
00:02:01,532 --> 00:02:03,525
wpiszmy dane.

42
00:02:03,903 --> 00:02:05,951
Wiersze z danymi zaczynamy

43
00:02:05,951 --> 00:02:09,473
od „tbody” pod naszym „thead”.

44
00:02:09,473 --> 00:02:11,847
Chcemy zrobić wiersz,

45
00:02:11,847 --> 00:02:14,002
więc używamy znacznika „tr”.

46
00:02:14,341 --> 00:02:16,717
Tutaj, zamiast pisać „th”,

47
00:02:16,717 --> 00:02:19,815
damy „td”, bo jesteśmy w treści.

48
00:02:20,057 --> 00:02:23,136
Napiszemy „td”,
co oznacza „dane w tabeli”.

49
00:02:23,136 --> 00:02:26,471
Jaka jest wartość w pierwszej komórce

50
00:02:26,471 --> 00:02:27,937
w 1. wierszu danych?

51
00:02:28,266 --> 00:02:30,261
Zerknę na swoją listę.

52
00:02:30,261 --> 00:02:33,801
Pierwszy na niej jest Czarno-biały,

53
00:02:33,801 --> 00:02:36,019
a to imię zwierzaka.

54
00:02:36,019 --> 00:02:39,318
Napiszę więc: „Czarno-biały”.

55
00:02:40,425 --> 00:02:42,334
Teraz drugi „td”.

56
00:02:42,686 --> 00:02:46,726
Widzimy, że drugi „th” to gatunek.

57
00:02:46,726 --> 00:02:49,730
Czarno-biały był królikiem,

58
00:02:49,914 --> 00:02:52,111
napiszemy więc „królik”.

59
00:02:52,697 --> 00:02:55,164
I trzeci „th”.

60
00:02:55,309 --> 00:02:58,127
Sprawdzamy: to był kolor.

61
00:02:58,229 --> 00:03:00,177
Zatem odpowiadający „td”…

62
00:03:00,177 --> 00:03:04,430
nazywając królika, nie byłam
zbyt pomysłowym dzieckiem.

63
00:03:04,430 --> 00:03:07,935
Domyślcie się.

64
00:03:08,476 --> 00:03:10,527
Zróbmy kolejny wiersz.

65
00:03:10,925 --> 00:03:12,967
Pokażę wam sztuczkę.

66
00:03:13,099 --> 00:03:15,514
Po zrobieniu jednego wiersza,

67
00:03:15,514 --> 00:03:17,126
zaznaczam go

68
00:03:17,126 --> 00:03:19,394
i kopiuję skrótem klawiaturowym,

69
00:03:19,394 --> 00:03:22,588
zwykle CTRL+C lub cmd+C,

70
00:03:22,588 --> 00:03:24,438
zależnie od systemu operacyjnego.

71
00:03:24,626 --> 00:03:28,637
I wklejam, także używając skrótu.

72
00:03:28,637 --> 00:03:31,082
Zazwyczaj to CTRL+V
lub cmd+V,

73
00:03:31,082 --> 00:03:33,041
w zależności od systemu.

74
00:03:33,185 --> 00:03:36,976
Wkleiłam i tylko zmienię wartości.

75
00:03:37,040 --> 00:03:41,779
Tu będzie Demon, kot i czarny.

76
00:03:41,779 --> 00:03:44,397
Zrobimy to jeszcze raz.

77
00:03:44,397 --> 00:03:52,395
Tu będzie Anioł, kot, rudy.

78
00:03:52,966 --> 00:03:55,607
Można się zanudzić,

79
00:03:55,607 --> 00:03:59,068
ciągle wpisując „tr” i „td”.

80
00:03:59,068 --> 00:04:03,002
Kopiuj-wklej ułatwia sprawę.

81
00:04:03,529 --> 00:04:05,723
No i mamy tabelę.

82
00:04:05,950 --> 00:04:08,041
Mogłabym dołożyć kolumny,

83
00:04:08,041 --> 00:04:10,548
dodając kolejne „th” w nagłówku

84
00:04:10,548 --> 00:04:12,827
i „td” w wierszach,

85
00:04:12,827 --> 00:04:15,962
gdybym chciała podawać
więcej informacji o zwierzakach.

86
00:04:16,240 --> 00:04:19,661
Ciekawi was, jak można
zmieniać wygląd tabeli,

87
00:04:19,661 --> 00:04:22,189
np. krawędzie lub kolor tła?

88
00:04:22,358 --> 00:04:24,673
Robi się to za pomocą
właściwości CSS,

89
00:04:24,673 --> 00:04:27,753
które już znacie
albo poznacie wkrótce.

90
00:04:27,918 --> 00:04:31,522
Zmieńcie tę stronę,
by zrobić listę swoich zwierzaków

91
00:04:31,522 --> 00:04:33,261
lub tych, o których marzycie.

92
00:04:33,494 --> 00:04:35,161
Przedstawcie dane w tabeli!