Tabele

Tabele HTML wyświetlają dane tabelaryczne w wierszach i kolumnach. <table> należy używać w zależności od wyświetlanych treści i potrzeb użytkowników w odniesieniu do tych treści. Jeśli dane są prezentowane, porównywane, sortowane, obliczane lub sprawdzane pod kątem zgodności, prawdopodobnie właściwym wyborem będzie <table>. Jeśli chcesz uporządkować treści, które nie mają formy tabeli, np. dużą grupę miniatur, tabele nie będą odpowiednie. Zamiast tego utwórz listę obrazów i sformatuj siatkę za pomocą CSS.

W tej sekcji omówimy wszystkie elementy, z których składa się tabela, a także niektóre funkcje ułatwień dostępu i użyteczności, które warto wziąć pod uwagę podczas prezentowania danych tabelarycznych. W tym module nie skupiamy się na CSS, ale omówimy niektóre właściwości CSS dotyczące tabel. Więcej informacji o CSS znajdziesz w artykule Poznaj CSS.

Elementy tabeli w odpowiedniej kolejności

Tag <table> otacza zawartość tabeli, w tym wszystkie jej elementy. Domyślna rola ARIA elementu <table> to table. Technologie wspomagające wiedzą, że ten element to struktura tabeli zawierająca dane ułożone w wierszach i kolumnach. Jeśli tabela zachowuje stan zaznaczenia, ma nawigację dwuwymiarową lub umożliwia użytkownikowi zmianę kolejności komórek, ustaw wartość role="grid". Jeśli wiersze elementu grid można rozwijać i zwijać, użyj elementu role="treegrid".

Wewnątrz elementu <table> znajdują się nagłówki tabeli (<thead>), treść tabeli (<tbody>) i opcjonalnie stopki tabeli (<tfoot>). Każdy z tych elementów składa się z wierszy tabeli (<tr>). Wiersze zawierają komórki nagłówka tabeli (<th>) i komórki danych tabeli (<td>), które z kolei zawierają wszystkie dane. W DOM przed tymi elementami mogą się znajdować 2 dodatkowe funkcje: podpis tabeli (<caption>) i grupy kolumn (<colgroup>). W zależności od tego, czy element <colgroup> ma atrybut span, może on zawierać zagnieżdżone elementy kolumny tabeli (<col>).

Elementy podrzędne tabeli to w kolejności:

1. Element <caption>
2. <colgroup> elementów
3. <thead> elementów
4. <tbody> elementów
5. <tfoot> elementów

Omówimy elementy podrzędne elementu <table>, które są opcjonalne, ale zalecane, a następnie przyjrzymy się wierszom, komórkom nagłówka tabeli i komórkom danych tabeli. <colgroup> omówimy na końcu.

Podpis tabeli

Preferowaną metodą nazywania tabeli jest element semantyczny <caption>. Element <caption> zawiera opisowy tytuł tabeli powiązany z nią programowo. Domyślnie jest widoczna i dostępna dla wszystkich użytkowników.

Element <caption> powinien być pierwszym elementem zagnieżdżonym w elemencie <table>. Dzięki temu wszyscy użytkownicy od razu poznają przeznaczenie tabeli bez konieczności czytania otaczającego ją tekstu. Możesz też użyć aria-label lub aria-labelledby w <table>, aby podać dostępną nazwę jako podpis. Element <caption> nie ma atrybutów specyficznych dla elementu.

Podpis pojawi się poza tabelą. Położenie podpisu można ustawić za pomocą właściwości CSS caption-side, co jest lepszym rozwiązaniem niż używanie wycofanego atrybutu align. Możesz ustawić podpis u góry i u dołu. Pozycjonowanie po lewej i prawej stronie za pomocą symboli inline-start i inline-end nie jest jeszcze w pełni obsługiwane. Góra to domyślny sposób wyświetlania przeglądarki.

Tabele danych powinny mieć czytelne nagłówki i podpis, a także być na tyle jasne, aby były niemal oczywiste. Pamiętaj, że nie wszyscy użytkownicy mają takie same zdolności poznawcze. Jeśli tabela „ma coś do przekazania” lub wymaga interpretacji, podaj krótkie podsumowanie głównego punktu lub funkcji tabeli. Miejsce umieszczenia podsumowania zależy od jego długości i złożoności. Jeśli jest krótki, użyj go jako tekstu wewnętrznego podpisu. Jeśli jest dłuższy, podsumuj go w podpisie i podaj podsumowanie w akapicie poprzedzającym tabelę, łącząc oba elementy za pomocą atrybutu aria-describedby. Inną opcją jest umieszczenie tabeli w sekcji <figure>, a podsumowania w sekcji <figcaption>.

Podział danych na sekcje

Treść tabel składa się z maksymalnie 3 sekcji: nagłówków tabeli (<thead>), treści tabeli (<tbody>) i stopek tabeli (<tfoot>). Wszystkie są opcjonalne i można ich użyć w dowolnej liczbie.

Nie ułatwiają one ani nie utrudniają dostępu do tabeli, ale są przydatne z punktu widzenia użyteczności. Zawierają punkty zaczepienia stylów. Na przykład zawartość nagłówka może być przyklejona, a <tbody> może być przewijana. Wiersze, które nie są zagnieżdżone w jednym z tych 3 elementów zawierających, są domyślnie opakowywane w element <tbody>. Wszystkie 3 elementy mają tę samą rolę domyślną rowgroup. Żaden z tych 3 elementów nie ma atrybutów specyficznych dla elementu.

Co mamy do tej pory:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

Element <tfoot> został pierwotnie określony jako element występujący bezpośrednio po elemencie <thead> i przed elementem <tbody> ze względu na ułatwienia dostępu. Z tego powodu w starszych bazach kodu możesz spotkać się z tym nieintuicyjnym porządkiem kodu źródłowego.

Zawartość tabeli

Tabele można podzielić na nagłówki, treść i stopki, ale żadna z tych części nie ma znaczenia, jeśli tabela nie zawiera wierszy, komórek i treści. Każdy wiersz tabeli <tr> zawiera co najmniej jedną komórkę. Jeśli komórka jest komórką nagłówka, użyj <th>. W przeciwnym razie użyj <td>.

Arkusz stylów klienta użytkownika zwykle wyświetla zawartość <th> jako wyśrodkowaną i pogrubioną. Tymi stylami domyślnymi i wszystkimi innymi stylami najlepiej zarządzać za pomocą CSS, a nie wycofanych atrybutów, które były dostępne w poszczególnych komórkach, wierszach, a nawet w elemencie <table>.

Były atrybuty do dodawania dopełnienia między komórkami i w komórkach, obramowań i wyrównania tekstu. Wartości atrybutów cellpadding i cellspacing, które określają odstęp między treścią komórki a jej obramowaniem oraz między obramowaniami sąsiednich komórek, należy ustawić za pomocą właściwości CSS border-collapse i border-spacing. Zasada Border-spacing nie ma zastosowania, jeśli skonfigurowana jest zasada border-collapse: collapse. Jeśli ustawiona jest wartość border-collapse: separate;, można całkowicie ukryć puste komórki za pomocą empty-cells: hide;. Aby dowiedzieć się więcej o stylizowaniu tabel, zapoznaj się z interaktywną prezentacją stylów CSS związanych z tabelami.

W przykładach dodaliśmy obramowanie tabeli i poszczególnych komórek za pomocą CSS, aby uwidocznić niektóre funkcje:

W tym przykładzie mamy podpis, nagłówek tabeli i treść tabeli. Nagłówek ma jeden wiersz zawierający 3 komórki nagłówka <th>, co tworzy 3 kolumny. Część główna zawiera 3 wiersze danych: pierwsza komórka to komórka nagłówka wiersza, więc używamy tagu <th> zamiast <td>.

Komórka <th> ma znaczenie semantyczne z niejawnymi rolami ARIA columnheader lub rowheader. Określa komórkę jako nagłówek kolumny lub wiersza komórek tabeli w zależności od wartości atrybutu wyliczeniowego scope. Jeśli parametr scope nie zostanie wyraźnie ustawiony, przeglądarka domyślnie przyjmie wartość col lub row. Ponieważ użyliśmy znaczników semantycznych, komórka 1956 ma 2 nagłówki: Rok i Lou Minious. To powiązanie informuje nas, że „1956” to „rok” ukończenia studiów przez „Lou Minious”. W tym przykładzie, ponieważ widzimy całą tabelę, powiązanie jest widoczne. Użycie polecenia <th> zapewnia powiązanie nawet wtedy, gdy kolumna lub wiersz nagłówka zostaną przewinięte poza widok. Moglibyśmy jawnie ustawić <th scope="col">Year</th> i <th scope="row">Lou Minious</th>, ale w przypadku takiej tabeli działają wyliczone wartości domyślne. Inne wartości parametru scope to rowgroup i colgroup, które są przydatne w przypadku złożonych tabel.

Scal komórki

Podobnie jak w przypadku MS Excel, Arkuszy Google i Numbers można połączyć kilka komórek w jedną. Możesz to zrobić za pomocą atrybutów HTML colspan i rowspan:

• colspan scala co najmniej 2 sąsiednie komórki w jednym wierszu.
• rowspan scala komórki w wierszach, gdy zostanie dodany do komórki w pierwszym z scalonych wierszy.

W tym przykładzie nagłówek tabeli zawiera 2 wiersze. Pierwszy wiersz nagłówka zawiera 3 komórki obejmujące 4 kolumny: środkowa komórka zawiera znak colspan="2". Spowoduje to scalenie dwóch sąsiadujących komórek. Pierwsza i ostatnia komórka zawierają znak rowspan="2". Spowoduje to scalenie komórki z komórką w sąsiednim wierszu, bezpośrednio pod nią.

Drugi wiersz nagłówka tabeli zawiera 2 komórki, które odpowiadają drugiej i trzeciej kolumnie w drugim wierszu. W przypadku pierwszej i ostatniej kolumny nie zadeklarowano żadnej komórki, ponieważ komórki w pierwszej i ostatniej kolumnie w pierwszym wierszu obejmują 2 wiersze.

W przypadkach, gdy komórka jest zdefiniowana przez wiele komórek nagłówka z powiązaniami, których nie można ustawić za pomocą samych atrybutów scope, uwzględnij atrybut headers z listą powiązanych nagłówków rozdzielonych spacjami. Ten przykład to bardziej złożona tabela, dlatego wyraźnie definiujemy zakres nagłówków za pomocą atrybutu scope. Aby jeszcze bardziej ułatwić zrozumienie, dodaliśmy do każdej komórki atrybut headers.

Atrybuty headers mogły nie być w tym przypadku konieczne, ale warto o nich pamiętać, ponieważ wraz ze wzrostem złożoności tabel będą one coraz ważniejsze. Tabele o złożonej strukturze, np. tabele, w których nagłówki lub komórki są scalone lub które mają więcej niż 2 poziomy nagłówków kolumn lub wierszy, wymagają wyraźnego wskazania powiązanych komórek nagłówka. W przypadku tak złożonych tabel wyraźnie powiąż każdą komórkę danych z odpowiednią komórką nagłówka za pomocą listy rozdzielonych spacjami id wartości wszystkich powiązanych nagłówków jako wartości atrybutu headers.

Atrybut headers występuje częściej w elementach <td>, ale jest też prawidłowy w przypadku elementu <th>.

Złożone struktury tabel mogą być jednak trudne do zrozumienia dla wszystkich użytkowników, nie tylko dla osób korzystających z czytników ekranu. Z punktu widzenia poznawczego i obsługi czytników ekranu prostsze tabele z niewielką liczbą lub bez scalonych komórek są lepiej zrozumiałe, nawet bez dodawania zakresu i nagłówków. Są też łatwiejsze w zarządzaniu.

Zmienianie stylu tabeli

Krótko wspomniano o dwóch stosunkowo mało znanych elementach: elemencie grupy kolumn <colgroup> i jego jedynym elemencie podrzędnym, pustym elemencie kolumny <col>. Element <colgroup> służy do definiowania grup kolumn lub elementów <col> w tabeli.

Jeśli używasz grupowania kolumn, powinno ono być zagnieżdżone w elemencie <table>, bezpośrednio po elemencie <caption> i przed danymi tabeli. Jeśli obejmują więcej niż 1 kolumnę, użyj atrybutu span.

Kolejność elementów w tabeli treści jest zwykle następująca, przy czym <table> i <caption> to 2 elementy, które powinny być uwzględnione:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

Znaki <colgroup> i <col> nie mają znaczenia semantycznego, co mogłoby wpłynąć na dostępność tabeli. Pomagają jednak w określaniu stylów kolumn za pomocą CSS, np. w ustawianiu szerokości.

Style powiązane z <td> i <th> zastępują style <col>. W CodePen ustawiliśmy colspan, aby scalić niektóre wiersze tabeli, ale nie wszystkie. Jeśli selektor CSS nth-child zostanie zastosowany do elementu <tr>, w zależności od tego, który wiersz lub która kolumna została scalona, może to wpłynąć na styl.

Niestety obsługiwanych jest tylko kilka właściwości. Style nie są dziedziczone w komórkach, a jedynym sposobem kierowania na komórki za pomocą elementu <col> jest użycie złożonego selektora, takiego jak :has() selektor relacyjny.

Jeśli zarówno tag <table>, jak i <colgroup> mają kolor tła, background-color tagu <colgroup> jest na wierzchu. Kolejność rysowania jest następująca: tabela, grupy kolumn, kolumny, grupy wierszy, wiersze, przy czym komórki są rysowane na końcu i na wierzchu, jak pokazano na schemacie warstw tabeli. Elementy <td> i <th> nie są elementami podrzędnymi elementów <colgroup> ani <col> i nie dziedziczą ich stylów.

Aby naprzemiennie kolorować wiersze tabeli, przydadzą się selektory strukturalne CSS. Na przykład tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} dodaje półprzezroczystą czerń do każdego nieparzystego wiersza w treści tabeli, umożliwiając jednocześnie prześwitywanie efektów tła ustawionych na <colgroup>.

Tabele nie są domyślnie elastyczne. Domyślnie są one dopasowywane do treści. Aby stylizacja układu tabeli działała skutecznie na różnych urządzeniach, konieczne są dodatkowe środki. Jeśli zmieniasz właściwość CSS display dla elementów tabeli, dodaj atrybuty ARIA role. Może się to wydawać zbędne, ale właściwość CSS display może wpływać na drzewo dostępności w niektórych przeglądarkach.

Prezentowanie danych

Elementy tabeli mają znaczenie semantyczne, które jest wykorzystywane przez technologie wspomagające, aby ułatwić użytkownikom poruszanie się po wierszach i kolumnach bez gubienia się. Element <table> nie powinien być używany do prezentacji. Jeśli potrzebujesz nagłówka nad listą, użyj nagłówka i listy. Jeśli chcesz rozmieścić treści w wielu kolumnach, użyj układu wielokolumnowego. Jeśli chcesz ułożyć treści w siatce, użyj siatki CSS.

Używaj tabeli tylko do danych.

Pomyśl o tym w ten sposób: jeśli dane wymagają arkusza kalkulacyjnego, aby można je było zaprezentować na spotkaniu, użyj <table>. Jeśli chcesz korzystać z funkcji dostępnych w programach do tworzenia prezentacji, takich jak Prezentacje Google czy PowerPoint, prawdopodobnie potrzebujesz listy opisowej.

Krótko mówiąc: jeśli nie prezentujesz danych w formie tabeli, nie używaj tagu <table>. Jeśli używasz tabeli do prezentacji, ustaw role="none".

Wielu deweloperów używa tabel do tworzenia formularzy, ale nie jest to konieczne. Musisz znać formularze HTML.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o tabelach.