HTML5 - Zaawansowane style tabel

W ramach nowych specyfikacji HTML5 Tak CSS Istnieje kilka stylów, które można zastosować do tabel w celu dalszego zdefiniowania i dostosowania ich zachowania do tego, co mamy w głowie, aby tworzyć nasze strony lub dokumenty, elementy, które możemy modyfikować to krawędzie tabel, obsługa pustych komórek, w tym rozmieszczenie tej samej tabeli.
obramowanie-zwiń
Określa, w jaki sposób obramowania są obsługiwane w sąsiednich komórkach, wartości, które może przyjąć ta właściwość, to: upadek Tak rozdzielać.
Dzięki tej właściwości możemy kontrolować zachowanie w jaki sposób przeglądarka rysuje obramowania, spójrzmy na ten obraz jak przeglądarka obsługuje to domyślnie:

Obserwujemy, że na stole rysowana jest granica, a w każdej komórce tego samego narysowana jest kolejna granica, co generuje efekt podwójnego obramowania, zobaczmy teraz, jak z obramowanie-zwiń poradzimy sobie z tym problemem.

 Przykład 
 Wyniki ankiety dotyczącej owoców z 2011 r. 

 
 
Ranga
mniam
Kolor
 
Rozmiar i głosy
 

 

 

 
 
Ulubiony:
Jabłka
Zielony
 
Średni
500
 

 
 
Drugie ulubione:
Pomarańcze
Pomarańczowy
 
Wielki
450
 

 

 
 
 Przedsiębiorstwa danych owoców
 

 

 

Zobaczmy, co ten kod generuje w przeglądarce, zanim przejdziemy do wyjaśnienia:

Wartość collapse, którą umieszczamy we właściwości border-collapse, mówi nam, że nie chcemy, aby na każdym sąsiednim elemencie była rysowana obramowanie, co daje efekt, który widzieliśmy na poprzednim obrazku.
Ustawianie oddzielnych krawędzi
Jeśli zamiast używać upadek używamy oddzielnej wartości domyślnej dla border-collapse, możemy użyć dodatkowych właściwości, takich jak odstępy między obramowaniami W celu zdefiniowania odstępu pomiędzy granicami sąsiednich elementów, spójrzmy na przykład:

 Przykład 
 Wyniki ankiety dotyczącej owoców z 2011 r. 

 
 
Ranga
mniam
Kolor
 
Rozmiar i głosy
 

 

 

 
 
Ulubiony:
Jabłka
Zielony
 
Średni
500
 

 
 
Drugie ulubione:
Pomarańcze
Pomarańczowy
 
 

 

 
 
Przedsiębiorstwa danych owoców
 

 

 

W tym przykładzie po prostu określamy, że obramowanie będzie miało przestrzeń 10 pikseli dla sąsiednich elementów, zobaczmy przykład, jak to przekłada się na przeglądarkę:

Obsługa pustych komórek
Jak widzieliśmy na poprzednim obrazku, przeglądarka przypisuje również spację z obramowaniem dla pustych komórek, czasami możemy tego nie chcieć w naszej tabeli, więc możemy dokonać następującej modyfikacji poprzedniego kodu, aby móc poradzić sobie z pustymi komórki.

Zobaczmy, jak to wygląda w przeglądarce:

Rzeczywiście, udało nam się pozbyć pustych komórek bez utraty formatu naszej tabeli.
Na tym kończymy samouczek, jak widzimy, możemy dokonać wielu modyfikacji w naszych stołach, aby dostosować je do tego, co możemy konceptualizować i dostosować do naszych potrzeb.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt