Dokumentacja HTML z przykładami: Tabele

Q: Jak utworzyć tabelę w HTML?

Obejmij ją znacznikiem , napisz jeden na każdy wiersz, a w środku umieść komórki: dla komórek nagłówka i dla komórek danych. Każdy wiersz powinien mieć tyle samo komórek, chyba że niektóre komórki zajmują kilka kolumn.

Q: Czym różni się th od td?

to komórka nagłówka, która opisuje kolumnę lub wiersz, a to komórka danych. Przeglądarki pokazują pogrubione i wyśrodkowane, a czytniki ekranu czytają pasujący nagłówek przed każdą komórką danych, żeby liczby miały sens.

Q: Dlaczego moja tabela HTML nie ma obramowania?

Tabele domyślnie nie mają obramowania. Dodaj je w CSS: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. Stary atrybut border="1" jest przestarzały.

Q: Jak zrobić responsywną tabelę HTML?

Umieść tabelę w kontenerze z overflow-x: auto. Na wąskim ekranie tabela przewija się na boki wewnątrz kontenera, zamiast poszerzać całą stronę.

Jak zrobić tabelę w HTML

Tabela to element <table> złożony z wierszy (<tr>), a każdy wiersz składa się z komórek: <th> dla komórek nagłówka i <td> dla komórek danych.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table</title>
  <style>
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Language</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Ada</td>
      <td>Python</td>
      <td>2023</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>C</td>
      <td>2021</td>
    </tr>
  </table>
</body>
</html>

Tabela nie ma własnego obramowania; dodaje je jedyna reguła CSS, żeby było widać komórki. Kolumny wynikają z komórek: pierwsza komórka każdego wiersza to kolumna pierwsza, druga to kolumna druga i tak dalej. Każdy wiersz powinien mieć tyle samo komórek. Usuń <td>, a ten wiersz skończy się wcześniej i zostawi lukę.

Komórki <th> są domyślnie pogrubione i wyśrodkowane. To tylko wygląd; ważne jest to, że są etykietami, o czym mówi następna sekcja.

Elementy tabeli

Element	Czym jest
`<table>`	Tabela
`<caption>`	Tytuł tabeli, pierwsze dziecko `<table>`
`<thead>`	Grupa wierszy nagłówka
`<tbody>`	Grupa wierszy treści (tabela może mieć ich kilka)
`<tfoot>`	Grupa wierszy stopki, na przykład z sumami
`<tr>`	Wiersz
`<th>`	Komórka nagłówka
`<td>`	Komórka danych
`<colgroup>`, `<col>`	Kolumny, do stylowania całej kolumny (szerokości, tło)

Obramowanie opisuje strona obramowanie tabeli w HTML, a komórki zajmujące kilka kolumn lub wierszy strona colspan i rowspan.

Komórki nagłówka, scope i caption

Tabela z nagłówkami u góry i z boku musi mówić, w którą stronę wskazuje każdy nagłówek. scope="col" opisuje kolumnę poniżej, scope="row" opisuje wiersz obok. <caption> nadaje tabeli widoczny tytuł:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headers and caption</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    caption { font-weight: bold; padding-bottom: 6px; }
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
    thead th { background: #e5e7eb; }
    tbody th { text-align: start; }
  </style>
</head>
<body>
  <table>
    <caption>Opening hours</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Opens</th>
        <th scope="col">Closes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00</td>
        <td>17:00</td>
      </tr>
      <tr>
        <th scope="row">Saturday</th>
        <td>10:00</td>
        <td>14:00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Z takim kodem czytnik ekranu na komórce 14:00 może ogłosić "Saturday, Closes, 14:00", więc liczba nigdy nie jest czytana w oderwaniu. W prostej tabeli z jednym wierszem nagłówka przeglądarki zwykle same ustalają nagłówki bez scope, ale jego dopisanie nic nie kosztuje i eliminuje zgadywanie.

Podpis to też to, co czytnik ekranu ogłasza, gdy dojdzie do tabeli. Wybieraj go zamiast nagłówka umieszczonego nad tabelą, który nie jest z nią połączony.

thead, tbody i tfoot

Te trzy grupy dzielą wiersze na nagłówek, treść i stopkę. Stopka to miejsce na sumy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>thead tbody tfoot</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
    thead th { border-bottom: 2px solid #111827; text-align: start; }
    tfoot td, tfoot th { border-top: 2px solid #111827; font-weight: bold; }
    .num { text-align: end; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col" class="num">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td class="num">4.50</td></tr>
      <tr><td>Pens (10)</td><td class="num">11.20</td></tr>
      <tr><td>Backpack</td><td class="num">39.00</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Total</th><td class="num">54.70</td></tr>
    </tfoot>
  </table>
</body>
</html>

Dwa szczegóły poprawiają czytelność liczb: text-align: end wyrównuje przecinki dziesiętne (każda cena ma dwa miejsca po przecinku), a font-variant-numeric: tabular-nums nadaje każdej cyfrze tę samą szerokość.

Jeśli napiszesz <tr> bezpośrednio w <table>, jak w pierwszym przykładzie, przeglądarka i tak doda <tbody> wokół wierszy. Dlatego selektor CSS taki jak table > tr nigdy niczego nie znajduje: na stronie wiersze są w tbody. Użyj table tr albo sam napisz <tbody>.

Stylowanie tabeli: paski, hover i szerokość

:nth-child nadaje paski co drugiemu wierszowi, :hover wyróżnia wiersz pod kursorem, a width: 100% rozciąga tabelę na szerokość kontenera:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped table</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 8px 12px; text-align: start; }
    thead th { background: #2563eb; color: #fff; }
    tbody tr:nth-child(even) { background: #f3f4f6; }
    tbody tr:hover { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Course</th><th scope="col">Lessons</th><th scope="col">Level</th></tr>
    </thead>
    <tbody>
      <tr><td>HTML</td><td>40</td><td>Beginner</td></tr>
      <tr><td>CSS</td><td>55</td><td>Beginner</td></tr>
      <tr><td>JavaScript</td><td>120</td><td>Beginner</td></tr>
      <tr><td>React</td><td>60</td><td>Intermediate</td></tr>
    </tbody>
  </table>
</body>
</html>

text-align: start wyrównuje tekst nagłówka z danymi pod nim; w przeciwnym razie th jest wyśrodkowane. start zamiast left utrzymuje poprawne wyrównanie w językach pisanych od prawej do lewej.

Responsywne tabele z przewijaniem

Tabela nie może być węższa niż jej treść. Na telefonie szeroka tabela wypycha całą stronę na boki. Obejmij ją kontenerem, który się przewija:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrolling table</title>
  <style>
    .scroll { max-width: 300px; overflow-x: auto; border: 1px solid #e5e7eb; }
    table { border-collapse: collapse; white-space: nowrap; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; }
  </style>
</head>
<body>
  <div class="scroll" tabindex="0" role="region" aria-label="Plans">
    <table>
      <thead>
        <tr><th scope="col">Plan</th><th scope="col">Price</th><th scope="col">Courses</th><th scope="col">Certificates</th><th scope="col">Support</th></tr>
      </thead>
      <tbody>
        <tr><td>Free</td><td>0</td><td>Some</td><td>No</td><td>Community</td></tr>
        <tr><td>Pro</td><td>12 per month</td><td>All</td><td>Yes</td><td>Email</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Kontener ma tu limit 300 pikseli, żeby udawać ekran telefonu; przewiń go na boki. tabindex="0" pozwala użytkownikom klawiatury ustawić fokus na kontenerze i przewijać go strzałkami, a role="region" z aria-label nadaje temu przystankowi nazwę.

Tabele są do danych

Używaj tabeli, gdy treść naprawdę ma wiersze i kolumny: ceny, harmonogramy, porównania, wyniki. Nie używaj jej do ustawiania rzeczy obok siebie na stronie. Tabele do układu mylą czytniki ekranu, które ogłaszają wiersze i kolumny bez żadnego znaczenia, i nie dopasowują się do małych ekranów. Układem zajmują się flexbox i grid w CSS.

Częste błędy

Wiersze z różną liczbą komórek. Krótsze wiersze kończą się wcześniej, a kolumny przestają się wyrównywać.
<td> z pogrubionym tekstem jako nagłówki. Użyj <th>, żeby nagłówki były prawdziwymi etykietami.
Przestarzałe atrybuty border, cellpadding, cellspacing, bgcolor i align. Użyj CSS.
Treść bezpośrednio w <tr> lub <table>, poza jakąkolwiek komórką. Przeglądarki przenoszą ją poza tabelę, zwykle nad nią.
Nagłówek nad tabelą zamiast <caption>.
table > tr w CSS. Przeglądarka wstawiła <tbody>; pisz table tr albo tbody tr.

Najczęściej zadawane pytania

Jak utworzyć tabelę w HTML?

Obejmij ją znacznikiem <table>, napisz jeden <tr> na każdy wiersz, a w środku umieść komórki: <th> dla komórek nagłówka i <td> dla komórek danych. Każdy wiersz powinien mieć tyle samo komórek, chyba że niektóre komórki zajmują kilka kolumn.

Czym różni się th od td?

<th> to komórka nagłówka, która opisuje kolumnę lub wiersz, a <td> to komórka danych. Przeglądarki pokazują <th> pogrubione i wyśrodkowane, a czytniki ekranu czytają pasujący nagłówek przed każdą komórką danych, żeby liczby miały sens.

Co robią thead, tbody i tfoot?

Grupują wiersze w nagłówek, treść i stopkę (sumy) tabeli. Czynią strukturę jasną dla technologii wspomagających, dają CSS punkt zaczepienia, a przy drukowaniu długiej tabeli przeglądarki mogą powtarzać <thead> na każdej stronie.

Dlaczego moja tabela HTML nie ma obramowania?

Tabele domyślnie nie mają obramowania. Dodaj je w CSS: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. Stary atrybut border="1" jest przestarzały.

Jak zrobić responsywną tabelę HTML?

Umieść tabelę w kontenerze z overflow-x: auto. Na wąskim ekranie tabela przewija się na boki wewnątrz kontenera, zamiast poszerzać całą stronę.

Powiązane zagadnienia