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.

  • Zwinięcie obramowania: początkowe: służy do ustawienia właściwości zwinięcia obramowania na wartość domyślną.
  • Zwinięcie ramki: dziedziczenie: Jest używane, gdy właściwość zwinięcia granicy dziedziczy po elementach nadrzędnych. Ta właściwość działa tylko po zastosowaniu do etykietka.

    Wartości: zwiń, oddzielne, początkowe, odziedziczone;

    2. Odstępy między krawędziami

    Ustawia przestrzeń przylegającą do granic i zawartość otaczającą tabelę. Jest podobny do odstępu komórek znacznika

    atrybut, z tym że ma opcjonalną drugą wartość. Ta właściwość działa tylko po zastosowaniu do
    etykietka.

    Składnia

    border-spacing: Length|initial|inherit;

    Odstępy między krawędziami zwykle przyjmują jedną lub dwie wartości długości. W tym określana jest tylko jedna wartość, która określa zarówno poziomy, jak i pionowy odstęp między komórkami.

    Kod

    Wynik:

    W tym przypadku, jeśli zostaną określone dwie wartości, pierwsza wartość określa poziome odstępy między komórkami (przestrzeń po obu stronach każdej komórki), a druga wartość określa pionowe odstępy między komórkami. (przestrzeń oddzielająca dół jednej komórki od góry tej pod nią).

    3. Podpis

    Właściwość po stronie podpisu określa położenie podpisu tabeli. Po zastosowaniu do podpisu tabeli ta właściwość określa, czy podpis pojawi się na górze czy na dole tabeli. Podpis zwykle pojawiałby się u góry tabeli.

    Składnia

    caption-side: top|bottom|initial|inherit;

    Ta właściwość może mieć jedną z czterech wartości:

    • Caption-side: top: Jest to wartość domyślna. Umieszcza podpis nad tabelą.

    Składnia: caption-side:top;

    Kod

    Wynik:

    • Podpis: na dole: umieszcza podpis pod tabelą.

    Składnia: caption-side:bottom;

    Kod

    Wynik:

    • Podpis: początkowy: służy do ustawienia właściwości na wartość domyślną.
    • Caption-side: inherit: Dziedziczy tę właściwość po elemencie nadrzędnym.

    Wartości: góra, dół, inicjał, dziedziczenie;

    4. Puste komórki

    Mówi przeglądarce, czy powinna wyświetlić komórkę tabeli, która jest całkowicie pusta. Kontroluje renderowanie ramek i tła komórek, które nie mają widocznej zawartości w tabeli korzystającej z modelu oddzielnych granic.

    Składnia: empty-cells: show|hide|initial|inherit;

    Ta właściwość może mieć jedną z czterech wartości:

    • Pusta komórka: pokaż: Ta właściwość służy do wyświetlania ramek pustej komórki.

    Składnia: empty-cells: show;

    Kod

    Wynik:

    • Pusta komórka: ukryj: Ta właściwość służy do ukrywania granic w pustej komórce.

    Składnia: empty-cells: hide;

    Kod

    Wynik:

    • Pusta komórka: początkowa : służy do ustawienia właściwości na wartość domyślną.
    • Empty-cell: inherit: Dziedziczy tę właściwość po elemencie nadrzędnym.

    Wartości: show, hide, initial, odziedziczą;

    5. Układ tabeli

    Kontroluje sposób rysowania tabeli przez przeglądarkę internetową i może nieznacznie wpływać na szybkość jej wyświetlania. Ta właściwość może mieć jedną z czterech wartości.

    Składnia: table-layout: auto|fixed|initial|inherit;

    Domyślną właściwością jest auto.

    1. Układ tabeli: auto: Auto sprawia, że ​​szerokość elementów dopasowuje się automatycznie do zawartości.

    2. Tabela - układ: naprawiono : Ustawione ustawienie zmusza przeglądarkę do renderowania wszystkich kolumn o tej samej szerokości co kolumny w pierwszym rzędzie. Jeśli treść wykracza poza pierwszy wiersz, treść zostanie zawinięta, odcięta lub rozciągnięta poza komórki.

    Kod

    Wynik:

    3. Układ tabeli: początkowy: służy do ustawienia właściwości na wartość domyślną.

    4. Układ tabeli: dziedziczenie: Dziedziczy tę właściwość po elemencie nadrzędnym.

    Wniosek

    Za pomocą CSS możemy tworzyć stylowe stoły i poprawiać wygląd stołu.

    Polecane artykuły

    Jest to przewodnik po stylizacji tabel CSS. Tutaj omawiamy właściwości z kodami, wyjściami i składnią Stylizacji tabeli CSS. Możesz również przejrzeć nasze podane artykuły, aby dowiedzieć się więcej -

    1. Zalety CSS
    2. Zastosowania CSS
    3. Wprowadzenie do CSS
    4. Formatowanie tekstu CSS

    Kategoria:

    Narzędzia programistyczne