<td>
Zwykła komórka tabeli z danymi.
- Wyświetlanie
- table-cell
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu (flow content)
Przykład
#<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 10px; }
</style>
<table>
<tr>
<th scope="col">Godzina</th>
<th scope="col">Poniedziałek</th>
<th scope="col">Wtorek</th>
</tr>
<tr>
<th scope="row">16:00</th>
<td rowspan="2">Warsztaty HTML</td>
<td>Quiz z CSS</td>
</tr>
<tr>
<th scope="row">17:00</th>
<td>Konsultacje</td>
</tr>
<tr>
<th scope="row">18:00</th>
<td colspan="2">Wspólne kodowanie online</td>
</tr>
</table>Definicja i zastosowanie
#Element <td> (od table data) to komórka z danymi. Stoi wewnątrz wiersza <tr> i może zawierać dowolną treść przepływu: tekst, liczby, linki, obrazy, a nawet listę czy przycisk.
Komórka może rozciągać się na kilka kolumn (colspan) lub wierszy (rowspan). Pamiętaj wtedy, że w kolejnych wierszach pomijasz komórki w miejscach zajętych przez tę rozciągniętą.
Tekst w komórkach jest domyślnie wyrównany do początku wiersza i wyśrodkowany w pionie. Oba ustawienia zmienisz w CSS właściwościami text-align i vertical-align.
Składnia
#<td>dane</td>Atrybuty
#liczba dodatnia (domyślnie 1)
Liczba kolumn, które zajmuje komórka. W wierszu z taką komórką zapisujesz odpowiednio mniej elementów<td>.liczba nieujemna (domyślnie 1)
Liczba wierszy, które zajmuje komórka. W kolejnych wierszach pomijasz komórkę w tej kolumnie, bo jej miejsce jest już zajęte.lista identyfikatorów
Identyfikatory komórek<th>, które opisują tę komórkę, rozdzielone spacjami. Stosuje się go w złożonych tabelach, w którychscopenie wystarcza, na przykład gdy nagłówki mają kilka poziomów.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#colspan
liczba dodatnia (domyślnie 1)Liczba kolumn, które zajmuje komórka. W wierszu z taką komórką zapisujesz odpowiednio mniej elementów <td>.
<style>
table { border-collapse: collapse; }
td { border: 1px solid #8886; padding: 4px 10px; text-align: center; }
</style>
<table>
<tr><td>HTML</td><td>CSS</td><td>JavaScript</td></tr>
<tr><td colspan="3">Wszystkie trzy kursy w jednym pakiecie</td></tr>
</table>rowspan
liczba nieujemna (domyślnie 1)Liczba wierszy, które zajmuje komórka. W kolejnych wierszach pomijasz komórkę w tej kolumnie, bo jej miejsce jest już zajęte.
<style>
table { border-collapse: collapse; }
td { border: 1px solid #8886; padding: 4px 10px; }
</style>
<table>
<tr><td rowspan="2">Tydzień 1</td><td>Struktura strony</td></tr>
<tr><td>Tekst i linki</td></tr>
<tr><td>Tydzień 2</td><td>Obrazy</td></tr>
</table>headers
lista identyfikatorówIdentyfikatory komórek <th>, które opisują tę komórkę, rozdzielone spacjami. Stosuje się go w złożonych tabelach, w których scope nie wystarcza, na przykład gdy nagłówki mają kilka poziomów.
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 4px 10px; }
</style>
<table>
<tr>
<td></td>
<th id="quiz1">Quiz 1</th>
<th id="quiz2">Quiz 2</th>
</tr>
<tr>
<th id="ola">Ola</th>
<td headers="ola quiz1">9/10</td>
<td headers="ola quiz2">10/10</td>
</tr>
</table>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
td {
display: table-cell;
padding: 1px;
vertical-align: inherit;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Pustą komórkę zostaw jako
<td></td>, ale nie usuwaj jej z wiersza. Brakujące komórki rozsypują układ kolumn. - Kwoty i liczby łatwiej porównać, gdy są wyrównane do prawej:
td.amount { text-align: right; }. Pomaga teżfont-variant-numeric: tabular-nums, które nadaje wszystkim cyfrom równą szerokość.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.