0Pricing
HTML Academy · Lekcja

table, tr, td i th

Tworzyć podstawowe tabele za pomocą wierszy, komórek danych i komórek nagłówkowych.

table, tr, td i th to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Tabele HTML

Tabele prezentują dane w wierszach i kolumnach. Należy używać ich do danych tabelarycznych — nie do układu strony.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
  </tr>
</table>

Elementy table, tr, td

Podstawowe elementy tabel:

  • <table> — kontener tabeli
  • <tr> — wiersz tabeli
  • <td> — komórka danych tabeli
  • <th> — komórka nagłówka tabeli (domyślnie pogrubiona i wyśrodkowana)

th a td

Używaj <th> dla komórek nagłówków — mają znaczenie semantyczne:

<table>
  <tr>
    <th>Language</th>    <!-- header: bold + centered by default -->
    <th>Year Created</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>HTML</td>         <!-- data cell -->
    <td>1991</td>
    <td>Markup</td>
  </tr>
</table>

Podstawowa struktura tabeli

Minimalna, ale kompletna tabela:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Widget Pro</td>
    <td>$49.99</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Widget Lite</td>
    <td>$19.99</td>
    <td>Out of Stock</td>
  </tr>
</table>

Obramowania tabel za pomocą CSS

Przeglądarki domyślnie renderują tabele bez obramowań. Dodaj je za pomocą CSS:

table {
  border-collapse: collapse;  /* merge double borders into one */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 600;
}

Tabele nie służą do układu strony

W latach 90. używano tabel do tworzenia układu stron. To przestarzałe i szkodliwe podejście:

  • Czytniki ekranu interpretują tabele jako dane — tabele układu wprowadzają użytkowników w błąd
  • Tabele są nieelastyczne na małych ekranach
  • CSS Grid i Flexbox zastąpiły wszystkie zastosowania tabel do tworzenia układu
  • Używaj <table> wyłącznie do rzeczywistych danych tabelarycznych

Responsywne tabele

Na małych ekranach tabele wychodzą poza obszar. Umieść je w kontenerze umożliwiającym przewijanie w poziomie:

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    <!-- table content -->
  </table>
</div>

/* Or use CSS: */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Puste komórki

Puste komórki należy obsługiwać świadomie:

<tr>
  <td>Alice</td>
  <td>95</td>
  <td></td>          <!-- Empty: renders blank -->
</tr>

/* CSS to style empty cells */
td:empty::before {
  content: '—';
  color: #999;
}

Zapowiedź thead i tbody

Tabele powinny używać <thead> i <tbody>, aby oddzielać wiersze nagłówków od wierszy danych — temat ten zostanie omówiony w następnej lekcji:

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

col i colgroup do stylizowania kolumn

Stosuj style do całych kolumn za pomocą <colgroup> i <col>:

<table>
  <colgroup>
    <col style="width: 200px; background: #f9f9f9;">
    <col style="width: 100px;">
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Grade</th>
  </tr>
</table>

Naprzemienne kolory wierszy za pomocą CSS

Naprzemienne kolory wierszy poprawiają czytelność:

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e3f2fd;
}

/* nth-child(even) for even rows instead */

Szybkie sprawdzenie

Jaka jest różnica między td a th w tabeli?

Podsumowanie: table tr td th

Podstawy tabel:

  • <table> — kontener tabeli
  • <tr> — wiersz tabeli
  • <td> — komórka danych
  • <th> — komórka nagłówka (semantyczna, domyślnie pogrubiona)
  • Używaj border-collapse: collapse, aby uzyskać estetyczne obramowania
  • Tabele służą wyłącznie do danych — nie do układu strony

Często zadawane pytania

Czy lekcja „table, tr, td i th” jest bezpłatna?

Tak — pełny tekst „table, tr, td i th” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „table, tr, td i th”?

Tworzyć podstawowe tabele za pomocą wierszy, komórek danych i komórek nagłówkowych. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „table, tr, td i th”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. table, tr, td i th
  2. Struktura thead, tbody i tfoot
  3. colspan i rowspan do łączenia komórek
  4. Dostępność tabel: scope, summary i caption
← Powrót do HTML Academy