Stylizacja tabeli CSS - Różne właściwości ze składnią, kodami i danymi wyjściowymi

Spisie treści:

Anonim

Wprowadzenie do stylizacji tabel CSS

Dlaczego używamy CSS, chociaż możemy używać tabel HTML, to dlatego, że w tabeli HTML układ strony oparty na tabeli często renderuje się wolniej niż równoważny układ oparty na CSS; dotyczy to w szczególności stron o dużej zawartości. Tabele nie powinny być używane jako pomoce układu. A jeśli zbudujemy tabele HTML bez żadnych stylów ani atrybutów w przeglądarce, będą wyświetlane bez żadnych ramek. Stylowanie stołu za pomocą CSS może poprawić jego wygląd.

Tabele CSS są dość łatwe do zrozumienia i użycia. To tylko kwestia zapamiętania odpowiednich wartości właściwości wyświetlania CSS dla podstawowych elementów tabeli HTML. Za pomocą CSS jesteśmy w stanie wykonać stylowe stoły.

Co to jest stylizacja tabeli CSS?

Tabela CSS (Cascading Style Sheets) opisuje, jak ułożyć zestaw elementów w wierszach i kolumnach. Domyślny CSS zastosowany do tabeli HTML to tabela CSS.

  • CSS zaprojektował i przeprojektował elastyczność.
  • Oznacza to, że układ oparty na CSS zapewnia, że ​​umieścisz wszystkie swoje style (tj. Od drobnych zmian do głównych reguł) w jednym miejscu.
  • Zmieniając reguły układu ustawione w tym arkuszu stylów, wpływasz na każdą stronę, która się do niego odwołuje.
  • Układ strony oparty na CSS zwykle pojawia się na ekranie szybciej, a nawet pobieranie będzie szybsze niż układ oparty na tabeli.

Właściwości stylu tabeli CSS

Poniżej znajdują się różne właściwości stylów tabel CSS:

1. Upadek granicy

Służy do wskazania, czy granice wokół komórek tabeli powinny być oddzielone, czy zwinięte.

Składnia: border-collapse: separate|collapse|initial|inherit;

  • Zwinięcie obramowania: oddzielne: służy do tego, aby sąsiednie komórki miały własne i niezależne granice, które nie są wspólne.

Składnia

border-collapse: separate;

Wartość domyślna ustawiona na właściwość border-collapse jest osobna. Po ich rozdzieleniu przeglądarki umieszczają odstęp między pikselami między każdą komórką za pomocą właściwości border-spacing.

Kod

Wynik:

  • Zwinięcie ramki: zwinięcie: za każdym razem, gdy ustawiamy właściwość zwinięcia ramki, aby zwinąć, usuwa przestrzeń między komórkami.

Składnia

border-collapse: collapse;

Kod

Wynik :

Nawet jeśli wyeliminujesz to miejsce, ustawiając atrybut spacji komórki dla znacznika HTML na 0, przeglądarki nadal wyświetlają podwójne ramki. Oznacza to, że dolna ramka jednej komórki pojawi się nad górną ramką komórki poniżej, powodując podwojenie linii granicznych. Ustawienie właściwości zwinięcia obramowania na zwinięcie eliminuje zarówno przestrzeń między komórkami, jak i podwajanie granic.