0:00:00.279,0:00:02.635
Zrobiłam stronę[br]o swoich zwierzętach,

0:00:02.635,0:00:04.115
z listą ich imion.

0:00:04.321,0:00:06.795
Czy coś was zastanawia?

0:00:07.017,0:00:10.953
Miałam Czarno-białego,[br]Demona i Anioła,

0:00:11.094,0:00:12.991
ale jakie to były zwierzaki?

0:00:13.134,0:00:14.413
Jakiego koloru?

0:00:14.525,0:00:15.924
W jakim wieku?

0:00:16.113,0:00:18.316
Powinnam podać więcej informacji

0:00:18.316,0:00:21.027
o swoich zwierzętach.[br]Odpowiedzieć na pytania.

0:00:21.195,0:00:23.457
Mogłabym zrobić listę zagnieżdżoną

0:00:23.457,0:00:27.012
lub podawać informacje[br]w nawiasach:

0:00:27.166,0:00:32.002
Czarno-biały był królikiem,[br]Demon to kot,

0:00:32.002,0:00:34.173
Anioł - też kot.

0:00:34.495,0:00:37.605
Ale wygląda to nieporządnie.

0:00:37.605,0:00:40.906
I nie mogę przewijać w dół tak,[br]by widzieć gatunki

0:00:40.906,0:00:42.586
w postaci eleganckiej listy.

0:00:43.111,0:00:47.116
To wspaniała okazja,[br]żeby stworzyć tabelę

0:00:47.401,0:00:49.130
z wierszami dla zwierzaków

0:00:49.130,0:00:51.858
i z kolumnami na informacje,

0:00:51.858,0:00:53.764
które chcę wam podać.

0:00:54.053,0:00:58.390
Do robienia tabel w HTML-u[br]trzeba wielu znaczników.

0:00:58.618,0:00:59.836
Przygotujcie się!

0:00:59.968,0:01:02.551
Nie musicie uczyć się[br]znaczników na pamięć.

0:01:02.551,0:01:04.394
Jest gdzie sprawdzać.

0:01:04.427,0:01:07.192
Mnie uczenie się ich[br]zajęło 10 lat, a jestem

0:01:07.192,0:01:08.038
zawodowcem!

0:01:08.575,0:01:10.186
Jesteście gotowi?

0:01:10.486,0:01:14.890
Pierwszy znacznik to „table”[br](ang. tabela). Trafna nazwa!

0:01:15.104,0:01:19.927
Potrzebujemy nagłówka w tabeli,[br]na tytuły kolumn.

0:01:20.023,0:01:22.463
Zapiszemy: „thead”.

0:01:23.268,0:01:27.874
Wewnątrz zwykle jest[br]jeden wiersz komórek nagłówka.

0:01:27.988,0:01:31.959
Dodając wiersz, używamy[br]znacznika „tr”.

0:01:32.632,0:01:35.287
W tym wierszu wstawiamy[br]komórki nagłówka.

0:01:36.016,0:01:40.907
Do stworzenia komórki użyjemy „th”.

0:01:42.232,0:01:44.839
Jaka będzie nazwa pierwszej kolumny?

0:01:45.099,0:01:49.252
Imiona zwierzaków to najważniejsza[br]informacja w wierszu.

0:01:49.252,0:01:51.096
To go określa.

0:01:51.292,0:01:54.551
Dodajmy kolumnę dla gatunku

0:01:55.269,0:01:58.583
i w końcu - dla koloru.

0:01:59.342,0:02:01.532
Na razie wystarczy kolumn,

0:02:01.532,0:02:03.525
wpiszmy dane.

0:02:03.903,0:02:05.951
Wiersze z danymi zaczynamy

0:02:05.951,0:02:09.473
od „tbody” pod naszym „thead”.

0:02:09.473,0:02:11.847
Chcemy zrobić wiersz,

0:02:11.847,0:02:14.002
więc używamy znacznika „tr”.

0:02:14.341,0:02:16.717
Tutaj, zamiast pisać „th”,

0:02:16.717,0:02:19.815
damy „td”, bo jesteśmy w treści.

0:02:20.057,0:02:23.136
Napiszemy „td”,[br]co oznacza „dane w tabeli”.

0:02:23.136,0:02:26.471
Jaka jest wartość w pierwszej komórce

0:02:26.471,0:02:27.937
w 1. wierszu danych?

0:02:28.266,0:02:30.261
Zerknę na swoją listę.

0:02:30.261,0:02:33.801
Pierwszy na niej jest Czarno-biały,

0:02:33.801,0:02:36.019
a to imię zwierzaka.

0:02:36.019,0:02:39.318
Napiszę więc: „Czarno-biały”.

0:02:40.425,0:02:42.334
Teraz drugi „td”.

0:02:42.686,0:02:46.726
Widzimy, że drugi „th” to gatunek.

0:02:46.726,0:02:49.730
Czarno-biały był królikiem,

0:02:49.914,0:02:52.111
napiszemy więc „królik”.

0:02:52.697,0:02:55.164
I trzeci „th”.

0:02:55.309,0:02:58.127
Sprawdzamy: to był kolor.

0:02:58.229,0:03:00.177
Zatem odpowiadający „td”…

0:03:00.177,0:03:04.430
nazywając królika, nie byłam[br]zbyt pomysłowym dzieckiem.

0:03:04.430,0:03:07.935
Domyślcie się.

0:03:08.476,0:03:10.527
Zróbmy kolejny wiersz.

0:03:10.925,0:03:12.967
Pokażę wam sztuczkę.

0:03:13.099,0:03:15.514
Po zrobieniu jednego wiersza,

0:03:15.514,0:03:17.126
zaznaczam go

0:03:17.126,0:03:19.394
i kopiuję skrótem klawiaturowym,

0:03:19.394,0:03:22.588
zwykle CTRL+C lub cmd+C,

0:03:22.588,0:03:24.438
zależnie od systemu operacyjnego.

0:03:24.626,0:03:28.637
I wklejam, także używając skrótu.

0:03:28.637,0:03:31.082
Zazwyczaj to CTRL+V[br]lub cmd+V,

0:03:31.082,0:03:33.041
w zależności od systemu.

0:03:33.185,0:03:36.976
Wkleiłam i tylko zmienię wartości.

0:03:37.040,0:03:41.779
Tu będzie Demon, kot i czarny.

0:03:41.779,0:03:44.397
Zrobimy to jeszcze raz.

0:03:44.397,0:03:52.395
Tu będzie Anioł, kot, rudy.

0:03:52.966,0:03:55.607
Można się zanudzić,

0:03:55.607,0:03:59.068
ciągle wpisując „tr” i „td”.

0:03:59.068,0:04:03.002
Kopiuj-wklej ułatwia sprawę.

0:04:03.529,0:04:05.723
No i mamy tabelę.

0:04:05.950,0:04:08.041
Mogłabym dołożyć kolumny,

0:04:08.041,0:04:10.548
dodając kolejne „th” w nagłówku

0:04:10.548,0:04:12.827
i „td” w wierszach,

0:04:12.827,0:04:15.962
gdybym chciała podawać[br]więcej informacji o zwierzakach.

0:04:16.240,0:04:19.661
Ciekawi was, jak można[br]zmieniać wygląd tabeli,

0:04:19.661,0:04:22.189
np. krawędzie lub kolor tła?

0:04:22.358,0:04:24.673
Robi się to za pomocą[br]właściwości CSS,

0:04:24.673,0:04:27.753
które już znacie[br]albo poznacie wkrótce.

0:04:27.918,0:04:31.522
Zmieńcie tę stronę,[br]by zrobić listę swoich zwierzaków

0:04:31.522,0:04:33.261
lub tych, o których marzycie.

0:04:33.494,0:04:35.161
Przedstawcie dane w tabeli!