Tabele w HTML — kiedy używać, a kiedy nie

HTML udostępnia strukturę tabelaryczną do prezentowania danych w układzie wierszy i kolumn. Element <table> pozwala tworzyć takie tabele, jednak ważne jest zrozumienie, kiedy używać tabel, a kiedy ich unikać.

Kiedy używać tabel

• Dane o charakterze tabelarycznym — np. wyniki finansowe w układzie kolumn (rok, przychód, zysk).
• Plan lekcji (godzina vs dzień tygodnia).
• Lista produktów z cenami, stany magazynowe itp.
• Gdy naturalna siatka wierszy i kolumn zapewnia czytelność danych.

Kiedy nie używać tabel

Nie stosuj tabel do tworzenia ogólnego layoutu strony (układów kolumnowo-wierszowych). Dawniej tabele używano do rozmieszczania całych stron, ale w nowoczesnym webdevelopmencie to zły pomysł — układ taki jest sztywny i nieprzystosowany do responsywności. Zamiast tego używaj CSS (np. flexbox, grid) i semantycznych kontenerów. Reguła: tabela służy do danych, nie do rozmieszczania elementów interfejsu.

Struktura tabeli HTML

• <table> – znacznik otaczający całą tabelę.
• <tr> (table row) – wiersz tabeli; składa się z komórek.
• <td> (table data) – standardowa komórka z danymi.
• <th> (table header) – komórka nagłówkowa (np. nagłówek kolumny lub wiersza). Przeglądarka domyślnie wyświetla <th> pogrubionym i wycentrowanym.
• Opcjonalne semantyczne podziały: <thead>, <tbody>, <tfoot> dla nagłówka, ciała i stopki tabeli.
• Atrybuty colspan i rowspan pozwalają łączyć komórki (np. jedna komórka na dwie kolumny lub dwa wiersze).

Przykład prostej tabeli

<table>
    <tr>
        <th>Produkt</th>
        <th>Cena</th>
        <th>Ilość</th>
    </tr>
    <tr>
        <td>Jabłka</td>
        <td>3 zł/kg</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Banany</td>
        <td>4 zł/kg</td>
        <td>2</td>
    </tr>
</table>

Domyślny wygląd tabel i podstawowe style

Przeglądarki zwykle rysują tabele bez obramowań, z domyślnym paddingiem w komórkach, a nagłówki <th> są pogrubione i wycentrowane. Aby zmienić wygląd użyj CSS.

Przykładowe reguły CSS

/* Dodanie obramowań */
table, th, td {
    border: 1px solid #000;
}

/* Zlanie obramowań w jedną linię */
table {
    border-collapse: collapse;
}

/* Padding w komórkach */
th, td {
    padding: 8px;
}

/* Proste stylowanie praktyczne */
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #aaa;
    padding: 6px 10px;
}
th {
    background-color: #f2f2f2;
    text-align: left;
}

/* Wyrównanie np. drugiej kolumny (ceny) do prawej */
td:nth-child(2) {
    text-align: right;
}

Wskazówki

• Numery i wartości liczbowe lepiej wyrównać do prawej dla czytelności.
• Używaj <thead>/<tbody>/<tfoot> gdy tabela jest większa i warto rozdzielić semantycznie części tabeli.
• Unikaj używania tabel do układu strony — zamiast tego stosuj CSS (flexbox, grid).

Podsumowanie

Używaj tabel tam, gdzie dane mają naturalną strukturę wierszy i kolumn, stylizuj je przy pomocy CSS dla czytelności i unikaj stosowania tabel jako narzędzia layoutowego — to poprawi semantykę i responsywność strony.