WEBVTT

00:00:00.279 --> 00:00:02.635
Zrobiłam stronę
o swoich zwierzętach,

00:00:02.635 --> 00:00:04.115
z listą ich imion.

00:00:04.321 --> 00:00:06.795
Czy coś was zastanawia?

00:00:07.017 --> 00:00:10.953
Miałam Czarno-białego,
Demona i Anioła,

00:00:11.094 --> 00:00:12.991
ale jakie to były zwierzaki?

00:00:13.134 --> 00:00:14.413
Jakiego koloru?

00:00:14.525 --> 00:00:15.924
W jakim wieku?

00:00:16.113 --> 00:00:18.316
Powinnam podać więcej informacji

00:00:18.316 --> 00:00:21.027
o swoich zwierzętach.
Odpowiedzieć na pytania.

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

00:00:23.457 --> 00:00:27.012
lub podawać informacje
w nawiasach:

00:00:27.166 --> 00:00:32.002
Czarno-biały był królikiem,
Demon to kot,

00:00:32.002 --> 00:00:34.173
Anioł - też kot.

00:00:34.495 --> 00:00:37.605
Ale wygląda to nieporządnie.

00:00:37.605 --> 00:00:40.906
I nie mogę przewijać w dół tak,
by widzieć gatunki

00:00:40.906 --> 00:00:42.586
w postaci eleganckiej listy.

00:00:43.111 --> 00:00:47.116
To wspaniała okazja,
żeby stworzyć tabelę

00:00:47.401 --> 00:00:49.130
z wierszami dla zwierzaków

00:00:49.130 --> 00:00:51.858
i z kolumnami na informacje,

00:00:51.858 --> 00:00:53.764
które chcę wam podać.

00:00:54.053 --> 00:00:58.390
Do robienia tabel w HTML-u
trzeba wielu znaczników.

00:00:58.618 --> 00:00:59.836
Przygotujcie się!

00:00:59.968 --> 00:01:02.551
Nie musicie uczyć się
znaczników na pamięć.

00:01:02.551 --> 00:01:04.394
Jest gdzie sprawdzać.

00:01:04.427 --> 00:01:07.192
Mnie uczenie się ich
zajęło 10 lat, a jestem

00:01:07.192 --> 00:01:08.038
zawodowcem!

00:01:08.575 --> 00:01:10.186
Jesteście gotowi?

00:01:10.486 --> 00:01:14.890
Pierwszy znacznik to „table”
(ang. tabela). Trafna nazwa!

00:01:15.104 --> 00:01:19.927
Potrzebujemy nagłówka w tabeli,
na tytuły kolumn.

00:01:20.023 --> 00:01:22.463
Zapiszemy: „thead”.

00:01:23.268 --> 00:01:27.874
Wewnątrz zwykle jest
jeden wiersz komórek nagłówka.

00:01:27.988 --> 00:01:31.959
Dodając wiersz, używamy
znacznika „tr”.

00:01:32.632 --> 00:01:35.287
W tym wierszu wstawiamy
komórki nagłówka.

00:01:36.016 --> 00:01:40.907
Do stworzenia komórki użyjemy „th”.

00:01:42.232 --> 00:01:44.839
Jaka będzie nazwa pierwszej kolumny?

00:01:45.099 --> 00:01:49.252
Imiona zwierzaków to najważniejsza
informacja w wierszu.

00:01:49.252 --> 00:01:51.096
To go określa.

00:01:51.292 --> 00:01:54.551
Dodajmy kolumnę dla gatunku

00:01:55.269 --> 00:01:58.583
i w końcu - dla koloru.

00:01:59.342 --> 00:02:01.532
Na razie wystarczy kolumn,

00:02:01.532 --> 00:02:03.525
wpiszmy dane.

00:02:03.903 --> 00:02:05.951
Wiersze z danymi zaczynamy

00:02:05.951 --> 00:02:09.473
od „tbody” pod naszym „thead”.

00:02:09.473 --> 00:02:11.847
Chcemy zrobić wiersz,

00:02:11.847 --> 00:02:14.002
więc używamy znacznika „tr”.

00:02:14.341 --> 00:02:16.717
Tutaj, zamiast pisać „th”,

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

00:02:20.057 --> 00:02:23.136
Napiszemy „td”,
co oznacza „dane w tabeli”.

00:02:23.136 --> 00:02:26.471
Jaka jest wartość w pierwszej komórce

00:02:26.471 --> 00:02:27.937
w 1. wierszu danych?

00:02:28.266 --> 00:02:30.261
Zerknę na swoją listę.

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

00:02:33.801 --> 00:02:36.019
a to imię zwierzaka.

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

00:02:40.425 --> 00:02:42.334
Teraz drugi „td”.

00:02:42.686 --> 00:02:46.726
Widzimy, że drugi „th” to gatunek.

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

00:02:49.914 --> 00:02:52.111
napiszemy więc „królik”.

00:02:52.697 --> 00:02:55.164
I trzeci „th”.

00:02:55.309 --> 00:02:58.127
Sprawdzamy: to był kolor.

00:02:58.229 --> 00:03:00.177
Zatem odpowiadający „td”…

00:03:00.177 --> 00:03:04.430
nazywając królika, nie byłam
zbyt pomysłowym dzieckiem.

00:03:04.430 --> 00:03:07.935
Domyślcie się.

00:03:08.476 --> 00:03:10.527
Zróbmy kolejny wiersz.

00:03:10.925 --> 00:03:12.967
Pokażę wam sztuczkę.

00:03:13.099 --> 00:03:15.514
Po zrobieniu jednego wiersza,

00:03:15.514 --> 00:03:17.126
zaznaczam go

00:03:17.126 --> 00:03:19.394
i kopiuję skrótem klawiaturowym,

00:03:19.394 --> 00:03:22.588
zwykle CTRL+C lub cmd+C,

00:03:22.588 --> 00:03:24.438
zależnie od systemu operacyjnego.

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

00:03:28.637 --> 00:03:31.082
Zazwyczaj to CTRL+V
lub cmd+V,

00:03:31.082 --> 00:03:33.041
w zależności od systemu.

00:03:33.185 --> 00:03:36.976
Wkleiłam i tylko zmienię wartości.

00:03:37.040 --> 00:03:41.779
Tu będzie Demon, kot i czarny.

00:03:41.779 --> 00:03:44.397
Zrobimy to jeszcze raz.

00:03:44.397 --> 00:03:52.395
Tu będzie Anioł, kot, rudy.

00:03:52.966 --> 00:03:55.607
Można się zanudzić,

00:03:55.607 --> 00:03:59.068
ciągle wpisując „tr” i „td”.

00:03:59.068 --> 00:04:03.002
Kopiuj-wklej ułatwia sprawę.

00:04:03.529 --> 00:04:05.723
No i mamy tabelę.

00:04:05.950 --> 00:04:08.041
Mogłabym dołożyć kolumny,

00:04:08.041 --> 00:04:10.548
dodając kolejne „th” w nagłówku

00:04:10.548 --> 00:04:12.827
i „td” w wierszach,

00:04:12.827 --> 00:04:15.962
gdybym chciała podawać
więcej informacji o zwierzakach.

00:04:16.240 --> 00:04:19.661
Ciekawi was, jak można
zmieniać wygląd tabeli,

00:04:19.661 --> 00:04:22.189
np. krawędzie lub kolor tła?

00:04:22.358 --> 00:04:24.673
Robi się to za pomocą
właściwości CSS,

00:04:24.673 --> 00:04:27.753
które już znacie
albo poznacie wkrótce.

00:04:27.918 --> 00:04:31.522
Zmieńcie tę stronę,
by zrobić listę swoich zwierzaków

00:04:31.522 --> 00:04:33.261
lub tych, o których marzycie.

00:04:33.494 --> 00:04:35.161
Przedstawcie dane w tabeli!