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!