<table>
Tabela z danymi ułożonymi w wiersze i kolumny.
- Wyświetlanie
- table
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Opcjonalnie
<caption>, potem<colgroup>,<thead>,<tbody>lub wiersze<tr>i na końcu<tfoot>
Przykład
#<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #8886; padding: 6px 12px; text-align: left; }
</style>
<table>
<caption>Postępy w kursach</caption>
<thead>
<tr>
<th scope="col">Kurs</th>
<th scope="col">Ukończone lekcje</th>
<th scope="col">Wynik testu</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML i CSS</th>
<td>24 z 24</td>
<td>92%</td>
</tr>
<tr>
<th scope="row">JavaScript</th>
<td>11 z 32</td>
<td>78%</td>
</tr>
</tbody>
</table>Definicja i zastosowanie
#Element <table> służy do prezentowania danych tabelarycznych: planu zajęć, cennika, wyników, porównania funkcji. Tabela składa się z wierszy <tr>, a te z komórek: nagłówkowych <th> i zwykłych <td>. Wiersze możesz pogrupować w <thead>, <tbody> i <tfoot>, a całość opisać podpisem <caption>.
Dawniej tabelami budowano układ całych stron. Dziś to zły pomysł: do układu służą CSS Grid i Flexbox, a tabela powinna zawierać tylko dane, które naprawdę mają wiersze i kolumny. Czytniki ekranu pozwalają poruszać się po tabeli komórka po komórce i odczytują przy tym nagłówki, więc tabela użyta do układu mocno utrudnia im pracę.
Domyślnie tabela nie ma żadnych obramowań. Linie, odstępy i kolory nadajesz w CSS, najczęściej zaczynając od border-collapse: collapse, które łączy podwójne krawędzie sąsiednich komórek w jedną linię.
Składnia
#<table>
<tr>
<th>Nagłówek</th>
</tr>
<tr>
<td>Dane</td>
</tr>
</table>Atrybuty
#1 (przestarzały)
Przestarzały atrybut, który dawniej rysował obramowanie tabeli i komórek. Przeglądarki nadal go rozumieją, dlatego wciąż pojawia się w starych poradnikach, ale obramowanie ustawiaj w CSS. Tak samo przestarzałe sącellpadding,cellspacing,width,alignibgcolor. Przykład pokazuje, jak uzyskać ten sam efekt w CSS.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#border
1 (przestarzały)Przestarzały atrybut, który dawniej rysował obramowanie tabeli i komórek. Przeglądarki nadal go rozumieją, dlatego wciąż pojawia się w starych poradnikach, ale obramowanie ustawiaj w CSS. Tak samo przestarzałe są cellpadding, cellspacing, width, align i bgcolor. Przykład pokazuje, jak uzyskać ten sam efekt w CSS.
<style>
.scores { border-collapse: collapse; }
.scores th, .scores td { border: 1px solid #8886; padding: 4px 10px; }
</style>
<table class="scores">
<tr><th>Uczeń</th><th>Punkty</th></tr>
<tr><td>Ola</td><td>980</td></tr>
<tr><td>Kuba</td><td>870</td></tr>
</table>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
table {
display: table;
box-sizing: border-box;
border-collapse: separate;
border-spacing: 2px;
text-indent: initial;
}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
#- Szeroką tabelę owiń w
<div>zoverflow-x: auto. Na telefonie przewinie się w poziomie, zamiast rozpychać całą stronę. - Nagłówki kolumn i wierszy zapisuj w
<th>z atrybutemscope, a nie w pogrubionych<td>. Dzięki temu czytnik ekranu powie, czego dotyczy każda wartość. - Nie używaj tabel do układu strony. Kolumny i siatki buduj w CSS Grid albo we Flexboxie.
Powiązane hasła
#- <tr>Wiersz tabeli, który zawiera komórki `<th>` i `<td>`.
- <th>Komórka nagłówkowa tabeli: nazwa kolumny lub wiersza.
- <td>Zwykła komórka tabeli z danymi.
- <caption>Tytuł tabeli, umieszczany jako pierwszy element wewnątrz `<table>`.
- <thead>Grupa wierszy z nagłówkami kolumn tabeli.
- <tbody>Główna część tabeli: grupa wierszy z danymi.
Widzisz błąd albo brakuje przykładu? Napisz do nas.