Stylizuj obramowanie tabeli HTML w CSS: border-collapse, border-spacing, linie komórek, wiersze zebra i zaokrąglone rogi. Interaktywny edytor z CSS do skopiowania.
Aby tabela miała widoczne linie, nadaj obramowanie komórkom th i td, a następnie dodaj do tabeli border-collapse: collapse, aby sąsiednie komórki dzieliły jedną linię zamiast rysować dwie. Dla odstępów między komórkami użyj border-collapse: separate z border-spacing. Zaokrąglone rogi wymagają modelu separate, bo scalone obramowania ignorują border-radius.
Właściwości obramowania tabeli w skrócie
Cel
CSS
Gdzie umieścić
Pojedyncze wspólne linie siatki
border-collapse: collapse
Linie wokół każdej komórki
border: 1px solid #ccc
th, td
Odstępy między komórkami
border-spacing: 4px
table (tylko model separate)
Wiersze w paski
tbody tr:nth-child(even) { background: #f5f5f5 }
Zaokrąglone zewnętrzne rogi
border-radius + border-collapse: separate
table i komórki narożne
Linie tylko między wierszami
border-bottom: 1px solid #ddd
th, td
Tabele mają własne zasady obramowań, odrębne od zwykłych bloków, więc CSS działający na div często wygląda źle na tabeli. Użyj edytora, aby przełączać się między modelem scalonym i rozdzielonym, zmieniać grubość linii, odstępy i promień rogów, a potem skopiuj dokładnie ten CSS, który powstanie.
Wybierz w edytorze model collapse lub separate i obserwuj, jak podwójne linie się łączą lub rozdzielają.
Wybierz, które linie rysować: pełną siatkę, tylko wiersze albo samą zewnętrzną ramkę.
Włącz wiersze zebra lub zaokrąglone rogi; zaokrąglenie samo przełącza tabelę na model separate.
Skopiuj wygenerowany CSS albo zacznij od jednego z edytowalnych przykładów niżej.
Nadawaj obramowanie komórkom, a nie tylko elementowi table. Obramowanie samej tabeli rysuje zewnętrzną ramkę i nic w środku.
Użyj border-spacing: 0 z modelem separate, gdy chcesz zaokrąglonych rogów bez widocznych odstępów.
Paski nadawaj tylko wierszom w tbody, aby wiersz nagłówka zachował własne tło.
Używaj jasnych kolorów linii i pozwól, by większość separacji robił padding; gęsta siatka utrudnia przeglądanie liczb.
Otocz szerokie tabele kontenerem z overflow-x: auto, aby na telefonach przewijała się tabela, a nie cała strona.
Najczęściej zadawane pytania
Dlaczego moja tabela ma podwójne obramowanie?
Wartość początkowa border-collapse to separate, więc każda komórka rysuje własne obramowanie, a dwie sąsiednie leżą obok siebie. Ustaw border-collapse: collapse na tabeli, a sąsiednie obramowania połączą się w jedną linię.
Dlaczego border-radius nie działa na mojej tabeli?
W modelu scalonych obramowań zaokrąglone rogi są ignorowane. Przełącz tabelę na border-collapse: separate, ustaw border-spacing: 0, a następnie zaokrąglij zewnętrzne komórki narożne albo otocz tabelę elementem div z border-radius i overflow: hidden.
Czy atrybut HTML border jest nadal dozwolony w tabelach?
Standard HTML oznacza atrybut border na table jako przestarzały i zaleca użycie CSS. Przeglądarki nadal go rysują ze względu na stare strony, ale nowy kod powinien ustawiać obramowania w arkuszu stylów, aby jedna reguła kontrolowała każdą tabelę.
Jakie wartości przyjmuje border-spacing?
Jedna długość ustawia odstęp zarówno w poziomie, jak i w pionie. Dwie długości ustawiają najpierw poziomy odstęp między kolumnami, a potem pionowy między wierszami, na przykład border-spacing: 8px 4px. Nie działa, gdy tabela jest scalona.
Jak dodać obramowanie tylko do jednej kolumny?
Wskaż komórki tej kolumny selektorem, takim jak td:nth-child(2), th:nth-child(2), i nadaj im lewe lub prawe obramowanie. Stylizowanie komórek bezpośrednio działa tak samo w obu modelach obramowań.
Dwa modele obramowań
W modelu rozdzielonym każda komórka jest osobnym blokiem z własnym obramowaniem, a border-spacing ustawia odstęp między tymi blokami. To model domyślny, dlatego goła tabela z obramowaniem komórek wygląda na podwójnie obrysowaną.
W modelu scalonym przeglądarka zamienia każdą wspólną krawędź w jedną linię. Tego chce większość tabel z danymi, kosztem utraty border-spacing i zaokrąglonych rogów.
Czytelne tabele z danymi
Poziome linie między wierszami prowadzą wzrok wzdłuż rzędu liczb lepiej niż gęsta siatka. Wyrównuj kolumny liczbowe do prawej, zachowaj wyraźny wiersz nagłówka z elementami th i dodaj caption, aby tabela miała nazwę dla użytkowników czytników ekranu.
Paski zebra pomagają w długich tabelach z wieloma kolumnami. Sprawdź, czy kolor paska nadal zapewnia wystarczający kontrast dla tekstu, który na nim leży.
Ściągawka właściwości obramowania tabeli
Właściwości zmieniające sposób rysowania linii tabeli
Właściwość
Wartości
Początkowa
Uwagi
collapse, separate
Ustawiana na tabeli. Collapse łączy wspólne krawędzie.
jedna lub dwie długości
Najpierw odstęp poziomy, potem pionowy. Ignorowana przy scaleniu.
grubość styl kolor
Zwykle ustawiana na th i td.
Ignorowana w modelu scalonym.
Edytowalne przykłady obramowań tabeli
Scalona siatka z wierszem nagłówka
Klasyczna tabela z danymi: jedna linia między każdą komórką i zabarwiony nagłówek.
Tylko wiersze, z paskami zebra
Bez linii pionowych. Dolne obramowanie każdej komórki i tło parzystych wierszy ułatwiają śledzenie długich wierszy.
Zaokrąglone rogi tabeli
Model separate z zerowym odstępem, obramowaniem po prawej i na dole każdej komórki oraz zaokrąglonymi zewnętrznymi rogami.
Przestarzały atrybut border obok wersji w CSS
Obie tabele wyglądają podobnie. Druga trzyma style w CSS, czego wymaga standard HTML.
Edytor obramowań tabeli
Model obramowania
Linie do narysowania
Pełna siatka
Tylko wiersze
Tylko zewnętrzna ramka
Grubość linii: {n}px
Odstęp komórek: {n}px
Promień rogów: {n}px
Wiersze zebra
Kolor linii
Odstępy i zaokrąglenia działają tylko w modelu separate.