Tabele

Tabele HTML służą do wyświetlania danych tabelarycznych w wierszach i kolumnach. Decyzja o użyciu <table> powinna być podyktowana treścią, którą prezentujesz, oraz potrzebami użytkowników w jej zakresie. Jeśli dane są prezentowane, porównywane, sortowane, obliczane lub porównywane ze sobą, <table> będzie prawdopodobnie odpowiednim wyborem. Jeśli chcesz po prostu uporządkować treści nietablicowe, na przykład dużą grupę miniatur, tabele nie są odpowiednie. Zamiast tego utwórz listę obrazów i narysuj siatkę za pomocą kodu CSS.

W tej sekcji omówimy wszystkie elementy tabeli oraz funkcje ułatwiające dostępność i użyteczność, które należy wziąć pod uwagę podczas przedstawiania danych tabelarycznych. Chociaż kurs „Nauka HTML” nie dotyczy bezpośrednio CSS, a istnieją też kursy poświęcone nauce CSS, omówimy niektóre właściwości CSS związane z tabelami.

Elementy tabeli w 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 uporządkowane w wiersze i kolumny. Jeśli tabela zachowuje stan zaznaczenia, ma dwuwymiarową nawigację lub umożliwia użytkownikowi zmianę kolejności komórek, ustaw wartość role="grid". Jeśli wiersze w elemencie grid można rozwijać i zwijać, użyj zamiast tego operatora role="treegrid".

W tabeli <table> znajdziesz nagłówki tabeli (<thead>), jej treść (<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, możesz znaleźć 2 dodatkowe elementy: nagłówek 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>).

Dzieci tabeli to kolejno:

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 oraz komórkom danych tabeli. Ostatnim punktem będzie <colgroup>.

Tabela

Element <caption> jest elementem natywnym i semantycznym, dlatego jest preferowaną metodą nadawania nazw tabelom. Tag <caption> zawiera opisowy tytuł tabeli powiązany programowo. Domyślnie jest widoczny i dostępny dla wszystkich użytkowników.

Element <caption> powinien być pierwszym elementem umieszczonym w elementach <table>. Dzięki temu wszyscy użytkownicy od razu wiedzą, do czego służy tabela, bez konieczności czytania otaczającego ją tekstu. Możesz też użyć atrybutu aria-label lub aria-labelledby w elemencie <table>, aby podać nazwę zrozumiałą dla osób z niepełnosprawnością. Element <caption> nie ma atrybutów specyficznych dla elementu.

Tekst nagłówka pojawi się poza tabelą. Lokalizację podpisu można ustawić za pomocą właściwości CSS caption-side, co jest lepszą praktyką niż używanie wycofanego atrybutu align. Może to spowodować, że podpis będzie widoczny u góry i na dole. Rozmieszczanie po lewej i prawej stronie za pomocą atrybutów inline-start i inline-end nie jest jeszcze w pełni obsługiwane. Górna część to domyślna prezentacja w przeglądarce.

Tabele danych powinny mieć czytelne nagłówki i tytuły oraz być na tyle proste, aby można było je zrozumieć bez dodatkowych wyjaśnień. Pamiętaj, że nie wszyscy użytkownicy mają takie same zdolności poznawcze. Jeśli tabela „przedstawia pewną tezę” lub wymaga interpretacji, podaj krótkie podsumowanie jej głównego przesłania lub funkcji. 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 w podpisie. Jeśli jest dłuższa, streszcz ją w podpisywaniu i uwzględnij to streszczenie w akapitach poprzedzających tabelę, powiązawszy je z atrybutem aria-describedby. Inną opcją jest umieszczenie tabeli w <figure>, a podsumowania w <figcaption>.

Dzielenie danych na sekcje

Treść tabel składa się z maksymalnie 3 sekcji: 0 lub więcej nagłówków tabeli (<thead>), 0 lub więcej części tabeli (<tbody>) i 0 lub więcej stopek tabeli (<tfoot>). Wszystkie są opcjonalne, a ich liczba może wynosić 0 lub więcej.

Te elementy nie ułatwiają ani nie utrudniają dostępności tabeli, ale są przydatne pod względem użyteczności. Zawierają one elementy stylizacyjne. Na przykład treści nagłówka mogą być przypięte, a treści <tbody> mogą być przewijane. Wiersze, które nie są zagnieżdżone w żadnym z tych 3 elementów zawierających, są domyślnie otoczone elementem <tbody>. Wszystkie 3 typy mają tę samą domyślną rolę rowgroup. Żaden z tych 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 tak, aby znajdował się bezpośrednio po elemencie <thead> i przed elementem <tbody> ze względów dostępności. Dlatego w starszych bazach kodu możesz natknąć się na nieintuicyjne źródło danych.

Zawartość tabeli

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

Stylesheety w usługach powiązanych z użytkownikiem zwykle wyświetlają zawartość w komórce nagłówka tabeli <th> jako wyśrodkowaną i pogrubioną. Te domyślne style, a także wszystkie style, najlepiej kontrolować za pomocą CSS zamiast atrybutów wycofanych, które były kiedyś dostępne w przypadku poszczególnych komórek, wierszy, a nawet <table>.

Właściwości te umożliwiały dodawanie wypełnień między komórkami i wewnątrz komórek, stosowanie obramowań oraz wyrównywanie tekstu. Wartości właściwości border-collapse i border-spacing, które określają odpowiednio odstęp między zawartością komórki a jej obramowaniem oraz między obramowaniami sąsiednich komórek. Ustawienie Border-spacing nie będzie miało zastosowania, jeśli border-collapse: collapse jest skonfigurowane. Jeśli opcja border-collapse: separate;jest ustawiona, można całkowicie ukryć puste komórki za pomocą opcji empty-cells: hide;. Aby dowiedzieć się więcej o stylach tabel, zapoznaj się z interaktywnymi prezentacjami stylów CSS związanych z tabelami.

Aby lepiej uwidocznić niektóre funkcje, w przykładach dodaliśmy obramowanie tabeli i każdej komórki za pomocą CSS:

W tym przykładzie mamy podpis, nagłówek tabeli i tekst tabeli. Nagłówek ma jeden wiersz zawierający 3 komórki nagłówka <th>, tworząc w ten sposób 3 kolumny. Treść zawiera 3 wiersze danych: pierwsza komórka to nagłówek wiersza, dlatego zamiast <td> używamy <th>.

Komórka <th> ma znaczenie semantyczne z ukrytymi 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 scope. Jeśli nie zostanie ustawiona wartość scope, przeglądarka będzie używać domyślnie wartości col lub row. Ponieważ użyliśmy znaczników semantycznych, komórka 1956 ma 2 nagłówki: Rok i Lou Minious. Z tego powiązania wynika, że „1956” to rok ukończenia studiów przez „Lou Minious”. W tym przykładzie widzimy całą tabelę, więc powiązanie jest widoczne. Użycie funkcji <th> zapewnia powiązanie nawet wtedy, gdy kolumna nagłówka lub wiersz nagłówka nie są widoczne. Moglibyśmy jawnie ustawić wartości <th scope="col">Year</th> i <th scope="row">Lou Minious</th>, ale w przypadku prostej tabeli takiej jak ta wystarczy użyć wymienionych wartości domyślnych. Inne wartości parametru scope to rowgroup i colgroup, które są przydatne w przypadku złożonych tabel.

Scalanie komórek

Podobnie jak w MS Excel, Arkuszach Google i Numbers, możesz połączyć kilka komórek w jedną. Można to zrobić za pomocą kodu HTML. Atrybut colspan służy do łączenia co najmniej 2 sąsiednich komórek w pojedynczym wierszu. Atrybut rowspan służy do scalania komórek w różnych wierszach. Jest on umieszczany w komórce w górnym wierszu.

W tym przykładzie nagłówek tabeli zawiera 2 wiersze. Pierwszy wiersz nagłówka zawiera 3 komórki obejmujące 4 kolumny: komórka środkowa ma wartość colspan="2". Spowoduje to połączenie dwóch sąsiadujących komórek. Pierwsza i ostatnia komórka zawiera 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ą 2 kolumnom w 2. wierszu. Nie ma deklaracji komórki dla pierwszej ani ostatniej kolumny, ponieważ komórki w pierwszej i ostatniej kolumnie w pierwszym wierszu zajmują 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 oddzielonych spacjami. Ponieważ jest to bardziej złożona tabela, zakres nagłówków definiujemy za pomocą atrybutu scope. Aby ułatwić Ci zrozumienie, dodaliśmy atrybut headers do każdej komórki.

W tak prostym przypadku atrybuty headers mogły nie być potrzebne, ale warto je mieć w swojej skrzynce z narzędziami, gdy Twoje tabele staną się bardziej złożone. Tabele o złożonej strukturze, np. tabele, w których nagłówki lub komórki są scalone lub mają więcej niż 2 poziomy nagłówków kolumn lub wierszy, wymagają wyraźnego wskazania powiązanych komórek nagłówka. W takich złożonych tabelach należy wyraźnie powiązać każdą komórkę danych z odpowiednią komórką nagłówka za pomocą listy wartości atrybutu id (oddzielonych spacjami) 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 elementach <th>.

Złożone struktury tabel mogą być trudne do zrozumienia nie tylko dla użytkowników czytników ekranu, ale wszystkich użytkowników. Z punktu widzenia obsługi czytników ekranu prostsze tabele z niewielką liczbą komórek lub bez nich, nawet bez dodawania zakresu i nagłówków, są łatwiejsze do zrozumienia. Łatwiej je też zarządzać.

Stylizowanie tabel

Są 2 mniej znane elementy, które zostały krótko omówione: grupa kolumn <colgroup> oraz jej jedyny element podrzędny, pusty element kolumny <col>. Element <colgroup> służy do definiowania grup kolumn, czyli elementów <col>, w tabeli.

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

Kolejność elementów w tabeli jest zazwyczaj taka: <table> i <caption> to 2 elementy, które powinny się znaleźć w tabeli:

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

Ani <colgroup>, ani <col> nie mają znaczenia semantycznego w sprawie ułatwiania dostępu do tabeli, ale umożliwiają ograniczone stylizowanie kolumny, w tym ustawianie jej szerokości za pomocą CSS.

Style <col> będą stylizować kolumnę, dopóki nie zostaną zastąpione przez style <td> lub <th>. Jeśli na przykład funkcja <colspan> służy do scalania komórek w niektórych wierszach tabeli, ale nie we wszystkich, nie masz pewności, że selektor, taki jak tr > *:nth-child(8), który wybiera 8. element podrzędny każdego wiersza, podświetli 8. kolumnę w pełni lub podświetli 8. kolumnę w kilku wierszach, ale z pewnym udziałem komórek 9. i 10. kolumny, w zależności od tego, które komórki wiersza lub kolumny zostały scalone.

Niestety obsługiwanych jest tylko kilka właściwości, style nie są dziedziczone w komórkach, a jedyny sposób użycia elementu <col> w komórkach kierowania to użycie złożonego selektora, w tym :has() selektora relacyjnego.

Jeśli zarówno element <table>, jak i element <colgroup> mają kolor tła, element background-color elementu <colgroup> będzie znajdować się na wierzchu. Kolejność wyświetlania elementów to: tabela, grupy kolumn, kolumny, grupy wierszy, wiersze, a komórki na końcu i na górze, jak pokazano na schemacie warstw tabeli. Elementy <td> i <th> nie są potomnymi elementów <colgroup> ani <col> i nie dziedziczą ich stylów.

Aby podzielić tabelę na kolumny, przydają się selektory strukturalne CSS. Na przykład tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} doda przezroczystą czerń do każdego nieparzystego wiersza w ciele tabeli, umożliwiając przenikanie efektów tła ustawionych w elemencie tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);}.<colgroup>

Tabele nie są domyślnie elastyczne. Zamiast tego rozmiary są domyślnie dobierane na podstawie treści. Aby stylizacja układu tabeli działała skutecznie na różnych urządzeniach, należy podjąć dodatkowe działania. Jeśli zmieniasz właściwość wyświetlania CSS elementów tabeli, uwzględnij atrybuty ARIA role. Może się to wydawać zbędne, ale właściwość CSS display może wpływać na drzewo ułatwień w niektórych przeglądarkach.

Prezentowanie danych

Elementy tabeli mają znaczenie semantyczne, które jest wykorzystywane przez technologie wspomagające do nawigacji po wierszach i kolumnach bez „gubienia się”. Elementu <table> nie należy używać do celów 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 projektu wielokolumnowego. Jeśli chcesz rozmieścić treści w siatce, użyj siatki CSS. Używaj tabeli tylko do danych. Pomyśl o tym w ten sposób: jeśli Twoje dane wymagają arkusza kalkulacyjnego, aby można je było przedstawić na spotkaniu, użyj funkcji <table>. Jeśli chcesz korzystać z funkcji dostępnych w oprogramowaniu do tworzenia prezentacji, takich jak Keynote lub PowerPoint, prawdopodobnie będziesz potrzebować listy opisów.

Jeśli nie przedstawiasz danych w postaci tabeli, nie używaj <table>. Jeśli używasz tabeli do prezentacji, ustaw role="none".

Wielu deweloperów używa tabel do układania formularzy, ale nie jest to konieczne. Musisz jednak wiedzieć, jak działają formularze HTML, więc omówimy to w następnym kroku.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o tabelach.