Tabele w HTML5 - część 2

Widzieliśmy już, jak utworzyć podstawową tabelę tekstową bez stylów w części 1 tego samouczka, chociaż na poziomie kodu jest to w porządku, na poziomie wizualnym nie pokazuje nam siły organizacyjnej, jaką tabela może zapewnić naszym dane, W naszych serwisach wielokrotnie musimy klasyfikować dane, elementy, informacje w ogóle, do tego możemy posłużyć się dobrze skonstruowaną i reprezentatywną tabelą.
Element
Element NS pozwala nam tworzyć nagłówki do naszej tabeli w celu wizualnej identyfikacji naszych kolumn, a także td jest synem tr. Jego atrybuty to: colspan, rowspan, zakres, nagłówki, wycofane atrybuty w tej specyfikacji HTML5 są następujące: skrót, oś, wyrównanie, szerokość, znak, charoff, valign, bgcolor, wysokość i nowrap, zakres, jeśli przyjrzymy się szczegółowo, ten element działa bardzo podobnie do td, jego konwencja CSS jest następująca:

 th {wyświetlacz: komórka tabeli; wyrównanie w pionie: dziedziczenie; grubość czcionki: pogrubiona; wyrównanie tekstu: środek; } 

Zobaczmy teraz, jak go użyć do zbudowania tabeli z nieco większym formatowaniem niż poprzednio:

 Przykład 
 
 
Ranga
mniam
 
Kolor
Rozmiar
 

 
 
Ulubiony:
 
Jabłka
Zielony
Średni
 

 
 
Drugie ulubione:
 
Pomarańcze
Pomarańczowy
Wielki
 

 
 
3 miejsce Ulubione:
 
Granat
Rodzaj zielono-czerwonego
 
Różni się od średnich do dużych
 

 

 

Jak widzieliśmy w tym przykładzie, możemy umieścić element NS w obrębie tr, jego funkcja jest podobna do td, tylko że służy to do generowania nagłówków, pokazany kod daje nam w rezultacie następującą tabelę:

Nasza tabela zaczyna wyglądać znacznie lepiej, jednak nadal jest bardzo prosta, a informacje nie są tak czytelne, jak powinny, np. nagłówki i treść nie pasują do siebie, a wizualnie trudno odróżnić, które należy do którego, ponieważ będziemy korzystać z CSS i zobaczymy, jak w dużej mierze rozwiążemy tę sytuację.
W tym celu użyjemy:

Mamy dwa warunki na NSoboje zaczynają od powiedzenia nam, że są dziećmi trJednak w pierwszym umieszczamy, aby jego wyrównanie było w lewo, będzie miał białe litery, a jego tło będzie szare, w drugim wskazujemy, że gdy będzie tylko jeden dla każdego tr, wyrównamy go w prawo , umieścimy jaśniejsze tło szare, a litery będą ciemniejsze.
Zobaczmy wynikowy kod:

 Przykład [b] [/ b] 
 
 
Ranga
mniam
Kolor
Rozmiar
 

 
 
Ulubiony:
Jabłka
Zielony
Średni
 

 
 
Drugie ulubione:
Pomarańcze
Pomarańczowy
Wielki
 

 
 
3 miejsce Ulubione:
Granat
Rodzaj zielono-czerwonego
 
Różni się od średnich do dużych
 

 

 

Zobaczmy teraz wynik tego kodu i zauważymy, że w ten sposób nasza tabela jest znacznie bardziej zorganizowana i możemy rozróżnić, do której kolumny należy każda z danych.

Jak widać, ten przykład daje nam wizję tego, czym powinien być stół, jednak wciąż daleko mu do ideału. Co by się stało na przykład, gdybyśmy dodali inne? NS, w wierszu informacyjnym? Stracilibyśmy format, który zmuszałby nas do pracy za każdym razem, gdy tabela zmienia swoją strukturę.
Aby tego uniknąć, istnieją 3 elementy, które logicznie dzielą tabelę, że tak powiem, są to: głowa, ciało, stopa. Dzięki temu, co widzieliśmy, jesteśmy w stanie zrozumieć bez większego teoretycznego wyjaśnienia, więc przejdźmy do praktycznego przykładu tego.

 Przykład 
 [b] 

 [/ b] 

 [b] [/ b] 

 [b] 

 [/ b] 
 
Ranga
mniam
Kolor
Rozmiar
 

 
 
Ranga
mniam
Kolor
Rozmiar
 
 
Ulubiony:
Jabłka
Zielony
Średni
 

 
 
Drugie ulubione:
Pomarańcze
Pomarańczowy
Wielki
 

 
 
3 miejsce Ulubione:
Granat
 
Rodzaj zielono-czerwonego
Różni się od średnich do dużych
 

 

 

 

Zobaczmy teraz wynik tego:

Jak widzimy, jest to w zasadzie pierwsza rzecz, którą zrobiliśmy, teraz na dole tabeli widzimy, że mamy nagłówek w równym stopniu, jednak w kodzie widzieliśmy, że są to dwie różne struktury, a także zawartość.
Na tym kończymy nasz samouczek dotyczący tabel HTML5, musimy tylko wykonać kilka ćwiczeń i przećwiczyć to, czego się nauczyliśmy.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt