Tabele i dane w CSS

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• rozpoznać, kiedy tabela jest właściwym wzorcem UI,
• budować tabelę z caption, thead, tbody i scope,
• stylować komórki, nagłówki, wiersze i dane liczbowe,
• obsługiwać szerokie tabele przez kontrolowany overflow-x,
• stosować sticky header w przewijalnym kontenerze,
• projektować alternatywny widok danych dla małych ekranów.

Kontekst praktyczny

Tabele pojawiają się w dashboardach, porównaniach planów, raportach, listach faktur, panelach administracyjnych i widokach statusów. Dobra tabela pozwala szybko skanować dane, porównać wartości i znaleźć anomalię bez nadmiaru dekoracji.

Kiedy użyć tabeli

Użyj <table>, gdy użytkownik musi porównać wiele rekordów według tych samych pól. Nie używaj tabeli tylko po to, aby stworzyć siatkę kart, formularz albo layout dwóch kolumn.

• Tabela pasuje do faktur, raportów, wyników, cenników i list rekordów.
• Karty lepiej sprawdzają się, gdy każdy rekord ma inną strukturę albo wymaga bogatego opisu.
• Lista jest wystarczająca, gdy dane nie wymagają porównania kolumnowego.

Semantyka tabeli

Semantyczna tabela pomaga przeglądarce i technologiom asystującym zrozumieć relację między nagłówkami i komórkami. Minimum jakości to opis przez caption, nagłówki kolumn oraz scope.

Kopiuj<table class="data-table">
  <caption>Wyniki kursantów w bieżącym module</caption>
  <thead>
    <tr>
      <th scope="col">Kursant</th>
      <th scope="col">Ukończone lekcje</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Anna</th>
      <td>22 / 22</td>
      <td>Gotowe</td>
    </tr>
  </tbody>
</table>

scope="col" mówi, że nagłówek opisuje kolumnę, a scope="row" opisuje konkretny wiersz. To niewielki atrybut, który znacząco poprawia zrozumiałość danych.

Bazowy styl tabeli

Czytelna tabela potrzebuje rytmu: spójnego paddingu, delikatnych linii, wyrównania liczb i spokojnego kontrastu nagłówka. Unikaj ciężkich ramek wokół każdej komórki, jeżeli dane mają być szybko skanowane.

Kopiuj.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: .8rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.data-table .number {
  text-align: right;
}

Dane liczbowe zwykle wyrównuje się do prawej, bo wtedy łatwiej porównać rzędy wielkości. Tekstowe etykiety i nazwy pozostają wyrównane do lewej.

Overflow i szerokie dane

Szeroka tabela nie powinna rozszerzać całej strony. Zamiast ściskać wszystkie kolumny do nieczytelnego minimum, umieść tabelę w przewijalnym kontenerze i nadaj jej rozsądną minimalną szerokość.

Kopiuj.table-scroll {
  overflow-x: auto;
  border: 1px solid #dbe2f1;
  border-radius: 12px;
}

.table-scroll table {
  min-width: 42rem;
}

To jeden z najbezpieczniejszych wzorców dla danych administracyjnych. Strona nie dostaje poziomego scrolla, ale użytkownik nadal ma dostęp do wszystkich kolumn.

Sticky header

Gdy tabela ma wiele wierszy, nagłówki kolumn mogą pozostać widoczne podczas przewijania. Użyj position: sticky na komórkach th w thead, a tło i z-index ustaw jawnie.

.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eff6ff;
}

Sticky header działa najlepiej w kontenerze, który ma kontrolowane przewijanie. Nagłówki muszą mieć własne tło, inaczej tekst z wierszy może prześwitywać podczas scrollowania.

Dane na mobile

Na małych ekranach masz dwie sensowne strategie: przewijalną tabelę albo alternatywny widok rekordów. Jeżeli użytkownik musi porównywać kolumny, zostaw tabelę. Jeżeli ważniejszy jest przegląd pojedynczych rekordów, karty mogą być czytelniejsze.

Kopiuj<article class="record-card">
  <h3>Plan Pro</h3>
  <dl>
    <div>
      <dt>Cena</dt>
      <dd>49 zł</dd>
    </div>
    <div>
      <dt>Status</dt>
      <dd>Aktywny</dd>
    </div>
  </dl>
</article>

Nie ukrywaj ważnych kolumn tylko dlatego, że ekran jest mały. Jeżeli dane są potrzebne do decyzji, muszą być dostępne także na telefonie.

Demo tabeli danych

Poniższe demo pokazuje tabelę z podpisem, nagłówkami kolumn, nagłówkami wierszy, wyrównaniem liczb, kontrolowanym overflow i wariantem rekordów dla wąskich widoków.

Najczęstsze błędy początkujących

• Używanie tabel do layoutu całej strony zamiast do danych tabelarycznych.
• Brak caption i nagłówków z poprawnym scope.
• Ściskanie wielu kolumn na telefonie, aż dane przestają być czytelne.
• Dodawanie ciężkich ramek wokół każdej komórki bez hierarchii wizualnej.
• Wyrównywanie liczb do lewej, przez co porównanie wartości jest trudniejsze.
• Ukrywanie kolumn na mobile bez sprawdzenia, czy użytkownik nadal może podjąć decyzję.

Mini zadanie

Zbuduj tabelę porównania trzech planów subskrypcji.

• Dodaj caption, thead, tbody i nagłówki z scope.
• Wyrównaj ceny i limity liczbowe do prawej.
• Dodaj delikatny kolor nagłówka i pasy naprzemienne dla wierszy.
• Owiń tabelę w kontener z overflow-x: auto.
• Przetestuj tabelę na szerokości 390px i sprawdź, czy nie rozszerza całej strony.

Checklista

• Rozumiem, kiedy tabela jest lepsza niż lista albo karty.
• Potrafię zbudować semantyczną strukturę tabeli.
• Dodaję caption i właściwe scope dla nagłówków.
• Wiem, jak stylować nagłówki, wiersze, liczby i statusy.
• Zabezpieczam szerokie dane przez kontrolowany overflow-x.
• Umiem dobrać przewijalną tabelę albo widok rekordów dla mobile.

Podsumowanie lekcji

Tabele są narzędziem do porównywania danych, nie sposobem na budowanie layoutu. Profesjonalna implementacja łączy semantyczny HTML, czytelny rytm komórek, kontrolowany overflow, sticky header tam, gdzie pomaga, oraz przemyślany wariant dla małych ekranów.

Kolejny krok roadmapy to cienie, obramowania, zaokrąglenia i separacja wizualna.