Tagi HTML: td

Element <td> to podstawowy budulec każdej tabeli HTML, definiujący standardową komórkę danych. W przeciwieństwie do komórek nagłówkowych <th>, <td> służy do umieszczania zwykłych danych (tekst, liczby, obrazy) w strukturze zbudowanej z <table> i <tr>.

Tag <td> musi znajdować się wewnątrz <tr> (wiersza tabeli), tworząc siatkę komórek. To kluczowy element do prezentacji danych w formie tabularnej, przydatny w zestawieniach, harmonogramach i porównaniach. W tym wpisie omówimy strukturę, atrybuty, przykłady użycia, stylizację CSS oraz najlepsze praktyki dostępności (WCAG).

Podstawowa struktura elementu <td>

Element <td> obsługuje elementy treści ogólne jako potomne: tekst, obrazy, linki czy nawet zagnieżdżone tabele. Znacznik zamykający </td> można opcjonalnie pominąć, jeśli za nim następuje inny <td>, <th> lub jest to ostatnia komórka w wierszu.

Oto prosty przykład pojedynczej komórki:

<table>
<tr>
<td>Komórka danych</td>
</tr>
</table>

Podstawowa tabela 2×2 wygląda następująco:

<table>
<tr>
<td>wiersz 1, kolumna 1</td>
<td>wiersz 1, kolumna 2</td>
</tr>
<tr>
<td>wiersz 2, kolumna 1</td>
<td>wiersz 2, kolumna 2</td>
</tr>
</table>

Struktura tabeli opiera się na zagnieżdżeniu: <table> → <tr> → <td>.

Kluczowe atrybuty elementu <td>

<td> obsługuje atrybuty globalne (np. id, class, style) i atrybuty zdarzeniowe (np. onclick). Najczęściej używane atrybuty tabelaryczne w komórkach danych to:

Uwaga: wartości colspan="0" lub rowspan="0" w niektórych przeglądarkach rozciągają komórkę do końca sekcji tabeli, ale wsparcie nie jest uniwersalne.

Tak zrealizujesz scalanie komórek w poziomie i pionie:

<table border="1">
<tr>
<th colspan="2">Nagłówek kolumn 1 i 2</th>
<th>Nagłówek kolumny 3</th>
</tr>
<tr>
<td rowspan="2">Scalona komórka 1</td>
<td>Komórka 2</td>
<td>Komórka 3</td>
</tr>
<tr>
<td>Komórka 4</td>
<td>Komórka 5</td>
</tr>
</table>

Przykład powiązania danych z nagłówkami dla czytników ekranu:

<table class="kolorowa">
<tr>
<th id="name">Imię</th>
<th id="tel">Telefon</th>
</tr>
<tr>
<td headers="name">Jan</td>
<td headers="tel">123-456-789</td>
</tr>
</table>

Atrybut headers łączy dane z odpowiednimi nagłówkami, co jest kluczowe dla czytników ekranu (WCAG 2.1).

Zaawansowane struktury tabel z <td>

Tabele HTML mogą być grupowane za pomocą <thead>, <tbody> i <tfoot>, co ułatwia stylizację i operacje w JavaScript. Oto pełniejszy przykład z grupami:

<table class="table1">
<caption>Moja tabelka testowa</caption>
<thead>
<tr>
<th>LP.</th>
<th colspan="2">Imię i nazwisko</th>
<th>Lubiany napój</th>
<th>Lubiany posiłek</th>
</tr>
</thead>
<tfoot class="tfoot1">
<tr><td colspan="5">Suma: 5</td></tr>
</tfoot>
<tbody class="tbody1">
<tr><td>1</td><td>Jan</td><td>Kowal</td><td>Kawa</td><td>Pizza</td></tr>
<tr><td>2</td><td>Marek</td><td>Koleś</td><td>Cola</td><td>Czekolada</td></tr>
<!-- Więcej wierszy... -->
</tbody>
</table>

Dodatkowo do stylizacji kolumn przyda się <colgroup>.

Stylizacja <td> za pomocą CSS

Domyślne właściwości to m.in. display: table-cell; i vertical-align: inherit;. Przykładowe reguły CSS dla czytelnego wyglądu tabeli:

table, th, td {
border: 1px solid #000;
padding: 10px;
border-collapse: collapse;
}
th { font-weight: bold; }
.td-blue { background-color: lightblue; }

Tak możesz zastosować prostą stylizację w dokumencie:

<style>
table, th, td { border: solid thin #000; padding: 3px; }
th { font-size: small; }
.tfoot1 { font-weight: bold; color: green; }
.tbody1 { color: blue; }
</style>
<!-- Tabela jak w przykładzie powyżej -->

Spójne marginesy, obramowania i kontrasty znacząco poprawiają czytelność danych w komórkach <td>.

Dostępność i najlepsze praktyki (WCAG)

Stosuj poniższe zasady, aby zapewnić dostępność i prawidłową semantykę tabel:

• semantyka – używaj <th> dla nagłówków i <td> dla danych;
• powiązania nagłówków – w złożonych tabelach dodawaj headers oraz scope dla jasnych relacji;
• prosty układ – unikaj zagnieżdżonych tabel; do layoutów stosuj CSS Grid lub Flexbox;
• testy dostępności – sprawdzaj działanie z czytnikami ekranu (np. NVDA);
• czysty HTML – unikaj przestarzałych atrybutów (np. abbr, height), zastępując je CSS.

Błędy do uniknięcia – brak zamknięcia </td> w złożonych strukturach lub nadużywanie colspan/rowspan bez uzasadnienia semantycznego.

Integracja z JavaScript

<td> łatwo manipulować skryptami – przykład interaktywnego podświetlania po kliknięciu:

document.querySelectorAll('td').forEach((cell) => {
cell.addEventListener('click', () => {
cell.style.backgroundColor = 'yellow';
});
});

Takie podejście ułatwia tworzenie dynamicznych tabel, np. z sortowaniem lub edycją w miejscu.

Element <td> pozostaje kluczowy w HTML5 – opanuj jego atrybuty i praktyki dostępności, aby tworzyć czytelne, skalowalne i przyjazne dla użytkownika tabele.