HTML tables

Zrobiłam stronę
o swoich zwierzętach,

z listą ich imion.

Czy coś was zastanawia?

Miałam Czarno-białego,
Demona i Anioła,

ale jakie to były zwierzaki?

Jakiego koloru?

W jakim wieku?

Powinnam podać więcej informacji

o swoich zwierzętach.
Odpowiedzieć na pytania.

Mogłabym zrobić listę zagnieżdżoną

lub podawać informacje
w nawiasach:

Czarno-biały był królikiem,
Demon to kot,

Anioł - też kot.

Ale wygląda to nieporządnie.

I nie mogę przewijać w dół tak,
by widzieć gatunki

w postaci eleganckiej listy.

To wspaniała okazja,
żeby stworzyć tabelę

z wierszami dla zwierzaków

i z kolumnami na informacje,

które chcę wam podać.

Do robienia tabel w HTML-u
trzeba wielu znaczników.

Przygotujcie się!

Nie musicie uczyć się
znaczników na pamięć.

Jest gdzie sprawdzać.

Mnie uczenie się ich
zajęło 10 lat, a jestem

zawodowcem!

Jesteście gotowi?

Pierwszy znacznik to „table”
(ang. tabela). Trafna nazwa!

Potrzebujemy nagłówka w tabeli,
na tytuły kolumn.

Zapiszemy: „thead”.

Wewnątrz zwykle jest
jeden wiersz komórek nagłówka.

Dodając wiersz, używamy
znacznika „tr”.

W tym wierszu wstawiamy
komórki nagłówka.

Do stworzenia komórki użyjemy „th”.

Jaka będzie nazwa pierwszej kolumny?

Imiona zwierzaków to najważniejsza
informacja w wierszu.

To go określa.

Dodajmy kolumnę dla gatunku

i w końcu - dla koloru.

Na razie wystarczy kolumn,

wpiszmy dane.

Wiersze z danymi zaczynamy

od „tbody” pod naszym „thead”.

Chcemy zrobić wiersz,

więc używamy znacznika „tr”.

Tutaj, zamiast pisać „th”,

damy „td”, bo jesteśmy w treści.

Napiszemy „td”,
co oznacza „dane w tabeli”.

Jaka jest wartość w pierwszej komórce

w 1. wierszu danych?

Zerknę na swoją listę.

Pierwszy na niej jest Czarno-biały,

a to imię zwierzaka.

Napiszę więc: „Czarno-biały”.

Teraz drugi „td”.

Widzimy, że drugi „th” to gatunek.

Czarno-biały był królikiem,

napiszemy więc „królik”.

I trzeci „th”.

Sprawdzamy: to był kolor.

Zatem odpowiadający „td”…

nazywając królika, nie byłam
zbyt pomysłowym dzieckiem.

Domyślcie się.

Zróbmy kolejny wiersz.

Pokażę wam sztuczkę.

Po zrobieniu jednego wiersza,

zaznaczam go

i kopiuję skrótem klawiaturowym,

zwykle CTRL+C lub cmd+C,

zależnie od systemu operacyjnego.

I wklejam, także używając skrótu.

Zazwyczaj to CTRL+V
lub cmd+V,

w zależności od systemu.

Wkleiłam i tylko zmienię wartości.

Tu będzie Demon, kot i czarny.

Zrobimy to jeszcze raz.

Tu będzie Anioł, kot, rudy.

Można się zanudzić,

ciągle wpisując „tr” i „td”.

Kopiuj-wklej ułatwia sprawę.

No i mamy tabelę.

Mogłabym dołożyć kolumny,

dodając kolejne „th” w nagłówku

i „td” w wierszach,

gdybym chciała podawać
więcej informacji o zwierzakach.

Ciekawi was, jak można
zmieniać wygląd tabeli,

np. krawędzie lub kolor tła?

Robi się to za pomocą
właściwości CSS,

które już znacie
albo poznacie wkrótce.

Zmieńcie tę stronę,
by zrobić listę swoich zwierzaków

lub tych, o których marzycie.

Przedstawcie dane w tabeli!