Wprowadzenie do tabel (<table>)

Lekcja 7.1: Wprowadzenie do tabel (<table>)

Strona główna > Rozdział 7: Tabele > Wprowadzenie do tabel (<table>)

Do czego służą tabele w HTML?

Tabele w HTML służą do prezentowania danych w sposób ustrukturyzowany, w formie wierszy i kolumn. Są idealne do wyświetlania danych tabelarycznych, takich jak wyniki finansowe, statystyki, porównania produktów, harmonogramy itp.

Ważna uwaga historyczna: W przeszłości tabele były często nadużywane do tworzenia układu (layoutu) całej strony internetowej. Jest to obecnie uważane za złą praktykę. Do tworzenia layoutu strony należy używać CSS (np. Flexbox, Grid) oraz semantycznych znaczników HTML5 (np. <header>, <nav>, <main>, <aside>, <footer>). Tabele powinny być używane wyłącznie do prezentacji danych tabelarycznych.

Podstawowa struktura tabeli

Tworzenie tabeli w HTML opiera się na kilku kluczowych znacznikach:

<table>: Główny znacznik otaczający całą tabelę.
<tr> (Table Row): Definiuje pojedynczy wiersz w tabeli.
<th> (Table Header): Definiuje komórkę nagłówkową w tabeli. Tekst wewnątrz <th> jest zazwyczaj wyświetlany jako pogrubiony i wyśrodkowany. Komórki nagłówkowe opisują zawartość kolumny lub wiersza.
<td> (Table Data): Definiuje standardową komórkę danych w tabeli.

Prosty przykład tabeli:

<table border="1"> <!-- Atrybut border dodany dla widoczności, lepiej używać CSS -->
  <tr>
    <th>Imię</th>
    <th>Nazwisko</th>
    <th>Wiek</th>
  </tr>
  <tr>
    <td>Jan</td>
    <td>Kowalski</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Nowak</td>
    <td>25</td>
  </tr>
</table>

Wynik powyższego kodu (z podstawowym stylem CSS dla obramowania):

Imię	Nazwisko	Wiek
Jan	Kowalski	30
Anna	Nowak	25

W powyższym przykładzie:

<table> rozpoczyna tabelę.
Pierwszy <tr> zawiera komórki nagłówkowe <th> (Imię, Nazwisko, Wiek).
Kolejne dwa <tr> zawierają wiersze danych, a w nich komórki danych <td>.
Każdy wiersz (<tr>) musi zawierać taką samą liczbę komórek (lub komórek rozciągniętych na odpowiednią liczbę kolumn - o tym później), aby tabela miała regularną strukturę.

Atrybut `border` (przestarzały)

W przykładzie użyliśmy atrybutu border="1" w znaczniku <table>, aby dodać widoczne obramowanie. Jest to jednak przestarzały atrybut i nie powinien być używany w nowoczesnym HTML. Stylizację tabel, w tym obramowania, odstępy i kolory, należy realizować wyłącznie za pomocą CSS.

Stylizacja obramowania za pomocą CSS:

table, th, td {
  border: 1px solid black; /* Dodaje obramowanie do tabeli i każdej komórki */
  border-collapse: collapse; /* Łączy sąsiadujące ramki w jedną */
}

th, td {
  padding: 8px; /* Dodaje wewnętrzny odstęp w komórkach */
  text-align: left; /* Wyrównuje tekst do lewej (domyślnie th jest centrowane) */
}

W pliku style.css tego kursu dodano klasę .basic-table z podobnymi stylami dla przykładów.

Semantyka tabeli: Nagłówki (`<th>`)

Używanie znacznika <th> dla komórek nagłówkowych jest ważne nie tylko dla wizualnego formatowania (pogrubienie, centrowanie), ale przede wszystkim dla semantyki i dostępności. Dzięki <th>:

Przeglądarki i wyszukiwarki lepiej rozumieją strukturę danych w tabeli.
Czytniki ekranu mogą poprawnie powiązać komórki danych z odpowiednimi nagłówkami, co ułatwia osobom niewidomym zrozumienie tabeli.

Nagłówki mogą opisywać zarówno kolumny (jak w przykładzie powyżej), jak i wiersze (np. umieszczając <th> jako pierwszą komórkę w każdym wierszu danych).

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz prostą tabelę HTML (bez użycia atrybutu border) przedstawiającą 3 produkty i ich ceny. Użyj odpowiednio znaczników <table>, <tr>, <th> i <td>. Dodaj podstawowe style CSS dla obramowania i paddingu.

Rozwiązanie:

HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Tabela Produktów</title>
    <style>
        table, th, td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Cennik Produktów</h1>
    
    <table>
        <tr>
            <th>Produkt</th>
            <th>Cena (PLN)</th>
        </tr>
        <tr>
            <td>Jabłka (kg)</td>
            <td>3.50</td>
        </tr>
        <tr>
            <td>Chleb</td>
            <td>4.20</td>
        </tr>
        <tr>
            <td>Mleko (litr)</td>
            <td>2.80</td>
        </tr>
    </table>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Stwórz tabelę z 4 kolumnami i 3 wierszami danych (plus wiersz nagłówkowy).
Zmodyfikuj style CSS, aby zmienić kolor tła nagłówków i dodać efekt "zebry" (naprzemienne kolory tła wierszy danych - poszukaj w CSS selektora :nth-child).
Stwórz tabelę, w której pierwsza kolumna zawiera nagłówki wierszy (użyj <th> w pierwszym <td> każdego wiersza danych).

Najczęściej zadawane pytania

Do czego służy znacznik <table> w HTML?

Znacznik <table> służy do tworzenia tabel w celu prezentacji danych tabelarycznych w formie wierszy i kolumn. Nie powinien być używany do tworzenia układu strony.

Jakie są podstawowe znaczniki do budowy tabeli?

Podstawowe znaczniki to: <table> (cała tabela), <tr> (wiersz tabeli), <th> (komórka nagłówkowa) i <td> (komórka danych).

Jaka jest różnica między <th> a <td>?

<th> (Table Header) definiuje komórkę nagłówkową, opisującą kolumnę lub wiersz. Tekst jest zwykle pogrubiony i centrowany. <td> (Table Data) definiuje standardową komórkę z danymi.

Czy można używać atrybutu border w <table>?

Atrybut border jest przestarzały i niezalecany. Do dodawania obramowań i stylizacji tabel należy używać wyłącznie CSS, np. właściwości border i border-collapse.

Dlaczego używanie <th> jest ważne dla dostępności?

Znacznik <th> nadaje komórce znaczenie semantyczne nagłówka. Czytniki ekranu wykorzystują te informacje, aby powiązać komórki danych z odpowiednimi nagłówkami, co ułatwia zrozumienie struktury tabeli osobom niewidomym.