Stylizacja tabeli za pomocą CSS

Stylizacja tabeli za pomocą CSS

Domyślnie tabele HTML są bardzo proste i pozbawione stylów. Aby wyglądały estetycznie i czytelnie, warto je ostylować przy użyciu CSS. Dzięki temu poprawisz wygląd danych, a użytkownicy łatwiej odnajdą potrzebne informacje.

1. Podstawowa stylizacja tabeli

Najprostszy sposób na poprawienie wyglądu tabeli to dodanie obramowań wokół komórek oraz odstępów, które sprawią, że zawartość stanie się czytelniejsza.

<table>
  <tr>
    <th>Imię</th>
    <th>Nazwisko</th>
    <th>Wiek</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Kowalska</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Jan</td>
    <td>Nowak</td>
    <td>35</td>
  </tr>
</table>

CSS do podstawowej stylizacji:

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #333;
  padding: 8px;
  text-align: left;
}

Efekt działania:

Ważne: Użycie border-collapse: collapse; sprawia, że obramowania komórek nie dublują się, tylko łączą w jedną linię.

2. Dodanie kolorów i stylizacja nagłówków

Dodanie kolorów tła do nagłówków lub zmiana koloru tekstu sprawia, że tabela jest bardziej czytelna. Warto podkreślić nagłówki kolumn, aby użytkownik szybko wiedział, co przedstawiają dane.

th {
  background-color: #4CAF50;
  color: white;
}

Efekt działania:

3. Alternatywne kolory wierszy (paski zebry)

Wielu projektantów stosuje naprzemienne kolory wierszy, aby ułatwić czytanie dużych tabel. To tzw. efekt „zebry”.

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Efekt działania:

4. Dodanie efektu najechania myszką (hover)

Dla lepszej interakcji możesz dodać efekt podświetlenia wiersza, gdy użytkownik na niego najedzie kursorem.

tr:hover {
  background-color: #ddd;
}

Dzięki temu użytkownik łatwiej śledzi interesujące go dane w tabeli.

5. Dostosowanie szerokości kolumn i wyrównania tekstu

Możesz dostosować szerokości kolumn i ustalić sposób wyrównania tekstu w komórkach:

th, td {
  text-align: center;
}

th:first-child, td:first-child {
  width: 40%;
  text-align: left;
}

W ten sposób np. pierwsza kolumna może być szersza i wyrównana do lewej strony, a pozostałe do środka.

✅ Podsumowanie stylizacji tabel

• border-collapse łączy ramki komórek w jedną linię.
• padding i text-align poprawiają czytelność treści.
• nth-child pozwala tworzyć efekt zebry.
• hover dodaje interaktywność przy najechaniu kursorem.
• Możesz zmieniać kolory, szerokości kolumn, wysokości wierszy i style obramowań.

🎯 Ćwiczenie w JSFiddle

Przejdź do JSFiddle i wklej poniższy kod w sekcji HTML oraz CSS:

HTML

<table>
  <tr>
    <th>Produkt</th>
    <th>Cena</th>
    <th>Dostępność</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>3000 zł</td>
    <td>Dostępny</td>
  </tr>
  <tr>
    <td>Smartfon</td>
    <td>2500 zł</td>
    <td>Chwilowo brak</td>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #333;
  padding: 10px;
  text-align: center;
}

th {
  background-color: #4CAF50;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

Kliknij Run i zobacz, jak działa Twoja ostylowana tabela!