Tabele

Tabele HTML służą do wyświetlania danych tabelarycznych z wierszami i kolumnami. Decyzja o użyciu elementu <table> powinna zależeć od prezentowanych treści i potrzeb użytkowników w związku z tymi treściami. Jeśli dane są przedstawiane, porównywane, sortowane, obliczane lub porównywane, właściwym wyborem jest prawdopodobnie funkcja <table>. Jeśli chcesz po prostu starannie rozmieścić treści, które nie są tabelami, np. dużą grupę miniatur obrazów, lepiej użyć tabel, ale zamiast tego utwórz listę obrazów i ustal ich styl siatki za pomocą CSS.

W tej sekcji omówimy wszystkie elementy, które składają się na tabelę, a także funkcje ułatwień dostępu i łatwości obsługi, które warto wziąć pod uwagę podczas prezentacji danych w tabeli. Chociaż kurs „Learn HTML” nie jest zasadniczo związany z CSS. Jest to cały kurs poświęcony nauce arkuszy CSS. Omówimy jednak kilka właściwości CSS związanych z tabelami.

Elementy tabeli w kolejności

Tag <table> otacza zawartość tabeli, w tym wszystkie jej elementy. Domniemana rola ARIA elementu <table> to table. Technologie wspomagające osoby z niepełnosprawnością wiedzą, że jest to struktura tabeli zawierająca dane ułożone w wiersze i kolumny. Jeśli tabela zawiera stan zaznaczenia, umożliwia dwuwymiarową nawigację lub pozwala użytkownikowi zmienić kolejność komórek, ustaw role="grid". Jeśli wiersze z tabelą grid można rozwinąć i zwinąć, użyj funkcji role="treegrid".

<table> zawiera nagłówki (<thead>), treść tabeli (<tbody>) i opcjonalnie stopki tabeli (<tfoot>). Każdy z nich składa się z wierszy tabeli (<tr>). Wiersze zawierają nagłówek tabeli (<th>) i komórki z danymi tabeli (<td>), które z kolei zawierają wszystkie dane. Zanim w elemencie DOM znajdziesz 2 dodatkowe funkcje: podpis tabeli (<caption>) i grupy kolumn (<colgroup>). W zależności od tego, czy <colgroup> ma atrybut span, może zawierać zagnieżdżone elementy kolumny tabeli (<col>).

Elementy podrzędne tabeli są w kolejności:

1. Element <caption>
2. Elementy: <colgroup>
3. Elementy: <thead>
4. Elementy: <tbody>
5. Elementy: <tfoot>

Omówimy elementy podrzędne elementów <table> – są one opcjonalne, ale zalecane, a potem przyjrzyj się wierszom, komórkom w nagłówkach tabeli i komórkom z danymi tabeli. <colgroup> zostanie omówiony na końcu.

Podpis tabeli

Jako natywny element semantyczny <caption> jest preferowaną metodą nadawania nazwy tabeli. Element <caption> udostępnia opisowy, automatycznie powiązany tytuł tabeli. Jest on widoczny i domyślnie dostępny 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 jej tekstu. Aby podać nazwę z ułatwieniami dostępu, możesz też użyć operatora aria-label lub aria-labelledby w polu <table>. Element <caption> nie ma atrybutów związanych z elementami.

Podpis pojawi się poza tabelą. Lokalizację podpisu można ustawić za pomocą właściwości CSS caption-side. Jest to lepsza metoda niż używanie wycofanego atrybutu align. W ten sposób możesz ustawić napisy na górze i na dole. Pozycjonowanie po lewej i prawej stronie (inline-start i inline-end) nie jest jeszcze w pełni obsługiwane. Góra to domyślna prezentacja przeglądarki.

Najlepiej, aby tabele danych miały jasne nagłówki i podpisy, były na tyle proste, że ich nie objaśniają. Pamiętaj, że nie wszyscy użytkownicy mają takie same zdolności poznawcze. Jeśli tabela stanowi punkt odniesienia lub w inny sposób wymaga interpretacji, podaj krótkie podsumowanie głównego punktu lub funkcji tabeli. Miejsce, w którym zostanie umieszczone podsumowanie, zależy od jego długości i złożoności. Jeśli napis jest krótki, użyj go jako wewnętrznego tekstu napisów. Jeśli dłuższy tekst będzie dłuższy, podsumuj je w napisach i podaj podsumowanie w akapicie poprzedzającym tabelę, łącząc je z atrybutem aria-describedby. Możesz też umieścić tabelę w polu <figure>, a podsumowanie w polu <figcaption>.

Podział danych na sekcje

Zawartość tabel składa się z maksymalnie 3 sekcji: zero lub więcej nagłówków (<thead>), treść tabel (<tbody>) i stopki tabel (<tfoot>). Wszystkie elementy są opcjonalne, a nie obsługuje więcej niż 0 z nich.

Te elementy nie utrudniają ani nie utrudniają dostępności tabeli, ale są przydatne pod względem łatwości obsługi. Są tam haki montażowe. Na przykład zawartość nagłówka może być przyklejona, a zawartość <tbody> – przewijaną. Wiersze, które nie są zagnieżdżone w żadnym z tych 3 elementów, są niejawnie ujęte w funkcję <tbody>. Wszystkie 3 mają tę samą rolę (rowgroup). Żaden z tych elementów nie ma żadnych atrybutów związanych z elementami.

Dotychczasowe wyniki:

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

Ze względów ułatwień dostępu element <tfoot> został pierwotnie wskazany tuż po <thead>, a przed <tbody>. Dlatego w starszych bazach kodu może się pojawić ta nieintuicyjna kolejność źródłowa.

Zawartość tabeli

Tabele można dzielić na nagłówki, treść i stopki, ale nic z tego nie wyniknie, jeśli tabele nie zawierają wierszy, komórek ani zawartości tabel. Każdy wiersz tabeli <tr> zawiera co najmniej 1 komórkę. Jeśli komórka jest komórką nagłówka, użyj funkcji <th>. W przeciwnym razie użyj elementu <td>.

Arkusze stylów klienta użytkownika zazwyczaj wyświetlają zawartość komórki nagłówka tabeli <th> jako wyśrodkowaną i pogrubioną. Tymi stylami domyślnymi i wszystkimi stylami najlepiej zarządzać za pomocą CSS zamiast wycofanych atrybutów, które były dostępne w poszczególnych komórkach, wierszach, a nawet w <table>.

Istniały atrybuty, które dodajeły dopełnienie między komórkami i w obrębie komórek, obramowanie i wyrównywanie tekstu. Dopełnienie komórek i zakres komórek, które definiują 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. Ustawienie Border-spacing nie zadziała, jeśli ustawiona jest wartość border-collapse: collapse. Jeśli ustawisz właściwość border-collapse: separate;, możesz całkowicie ukryć puste komórki za pomocą empty-cells: hide;. Więcej informacji o tabelach stylów znajdziesz w interaktywnym prezentacji ze stylami CSS związanymi z tabelą.

W przykładach dodaliśmy obramowanie tabeli i każdej komórki z CSS, by zwiększyć czytelność niektórych funkcji:

W tym przykładzie mamy podpis, nagłówek i treść tabeli. Nagłówek ma jeden wiersz zawierający 3 komórki nagłówka (<th>) i tworzą 3 kolumny. Treść zawiera trzy wiersze danych. Pierwsza komórka jest komórką nagłówka wiersza, więc używamy <th> zamiast <td>.

Komórka <th> ma znaczenie semantyczne, z niejawnymi rolami ARIA: columnheader lub rowheader. Definiuje komórkę jako nagłówek kolumny lub wiersza komórek tabeli w zależności od wartości wyliczonego atrybutu scope. Jeśli zasada scope nie jest wyraźnie określona, przeglądarka przyjmuje domyślnie wartość col lub row. Użyliśmy znaczników semantycznych, więc komórka 1956 ma 2 nagłówki: Rok i Lou Minious. Powiązanie to informuje nas, że „1956” to „rok” ukończenia studiów z piosenką „Lou Minious”. W tym przykładzie, ponieważ widzimy całą tabelę, powiązanie jest wizualnie przejrzyste. Użycie właściwości <th> powoduje utworzenie powiązania nawet wtedy, gdy kolumna nagłówka lub wiersz przewiną się poza widok. Mogliśmy wyraźnie ustawić właściwości <th scope="col">Year</th> i <th scope="row">Lou Minious</th>, ale w takiej prostej tabeli wymienione wartości domyślne działają. 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 programach MS Excel, Arkusze Google i Numery, można złączać wiele komórek w jedną. Można to zrobić za pomocą kodu HTML. Atrybut colspan służy do scalenia co najmniej 2 sąsiadujących komórek w jednym wierszu. Atrybut rowspan służy do scalania komórek z wierszy i jest 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. W środkowej komórce znajduje się colspan="2". Spowoduje to scalenie dwóch sąsiadujących komórek. Pierwsza i ostatnia komórka zawierają rowspan="2". Spowoduje to scalenie komórki z komórką w sąsiednim wierszu, bezpośrednio pod nią.

Drugi wiersz w nagłówku tabeli zawiera dwie komórki; są to komórki drugiej i trzeciej kolumny w drugim wierszu. W pierwszej lub ostatniej kolumnie nie zadeklarowano żadnej komórki jako komórki w pierwszej i ostatniej kolumnie pierwszego wiersza obejmującego 2 wiersze.

Jeśli komórka jest zdefiniowana przez wiele komórek nagłówka z powiązaniami, których nie można ustawić tylko za pomocą atrybutów scope, dodaj atrybut headers z listą powiązanych nagłówków rozdzielonych spacjami. Ten przykład jest bardziej skomplikowaną tabelą, więc wyraźnie określamy zakres nagłówków za pomocą atrybutu scope. Aby zwiększyć czytelność, dodaliśmy do każdej komórki atrybut headers.

Atrybuty headers mogły nie być potrzebne w tak prostym przypadku użycia, ale ważne są, aby mieć je w pasku narzędzi, gdy tabele będą się komplikować. Tabele o złożonych strukturach, takie jak scalone nagłówki lub komórki albo 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 jawnie powiąż każdą komórkę danych z odpowiednią komórką nagłówka za pomocą listy rozdzielonych spacjami wartości id wszystkich powiązanych nagłówków jako wartości atrybutu headers.

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

Pamiętaj jednak, że złożone struktury tabel mogą być trudne do zrozumienia dla wszystkich użytkowników, nie tylko osób korzystających z czytników ekranu. Pod względem poznawczym i w zakresie obsługi czytników ekranu łatwiej jest zrozumieć prostsze tabele z niewieloma komórkami o rozpiętości lub bez nich, nawet bez dodawania zakresu i nagłówków. Łatwiej nimi też zarządzać.

Style tabel

Krótko wspomnieliśmy o 2 względnie mało znanych elementach: grupa kolumn <colgroup>, element i jego jedyny element podrzędny – pusty element kolumny <col>. Element <colgroup> służy do definiowania grup kolumn (elementów <col>) w tabeli.

Jeśli używane jest grupowanie kolumn, należy umieścić je w elemencie <table>, bezpośrednio po elemencie <caption>, a także przed danymi tabeli. Jeśli obejmują więcej niż jedną kolumnę, użyj atrybutu span.

Kolejność konspektu treści tabeli jest zwykle taka: <table> i <caption> to 2 elementy, które należy uwzględnić:

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

Ani <colgroup>, ani <col> nie ma znaczenia semantycznego pod kątem ułatwiania dostępu do tabeli, ale pozwalają na ograniczone style kolumn, w tym ustawienie szerokości kolumny za pomocą CSS.

Style <col> będą określać styl kolumny, o ile nie istnieją żadne style <td> ani <th>, które zastępują ten styl. Jeśli na przykład funkcja <colspan> służy do scalania komórek w niektórych wierszach tabeli, nie wiesz, czy selektor taki jak tr > *:nth-child(8), który wybiera 8 element podrzędny w każdym wierszu, podświetli w całości 8 kolumnę lub podświetli 8 kolumnę w kilku wierszach, ale w zależności od tego, jakie komórki zostały scalone, z podziałem na 9 i 10 komórek.

Obsługiwanych jest tylko kilka właściwości, style nie są dziedziczone do komórek, a jedynym sposobem korzystania z elementu <col> w komórkach kierowania jest użycie złożonego selektora zawierającego selektor relacyjny :has().

Jeśli <table> i <colgroup> mają kolor tła, background-color elementu <colgroup> znajduje się na górze. Kolejność rysowania jest następująca: tabela, grupy kolumn, kolumny, grupy wierszy, wiersze, z komórkami na końcu i na górze, zgodnie ze schematem warstw tabeli. Elementy <td> i <th> nie są potomnymi elementami <colgroup> ani <col> i nie dziedziczą ich stylu.

Do wyświetlania pasków w tabeli mogą Ci się przydać selektory strukturalne CSS. Na przykład funkcja tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} doda półprzezroczystą czerń do każdego nieparzystego wiersza w treści tabeli, aby były widoczne wszystkie efekty tła ustawione w interfejsie <colgroup>.

Domyślnie tabele nie są elastyczne. Zamiast tego mają domyślny rozmiar odpowiadający ich zawartości. Aby styl układu tabel działał wydajnie na różnych urządzeniach, potrzebne są dodatkowe środki. Jeśli zmieniasz właściwość CSS display elementów tabeli, uwzględnij atrybuty ARIA role. Może to wydawać się zbędne, ale właściwość CSS display może wpływać na drzewo ułatwień dostępu w niektórych przeglądarkach.

Prezentowanie danych

Elementy tabel mają znaczenie semantyczne, które są używane przez technologie wspomagające, aby umożliwiać nawigację po wierszach i kolumnach bez ich zagubienia. Elementu <table> nie należy używać do prezentacji. Jeśli potrzebujesz nagłówka na liście, użyj nagłówka i listy. Jeśli chcesz rozłożyć treść na wiele kolumn, użyj układu wielokolumnowego. Jeśli chcesz rozmieścić treści w formie siatki, użyj siatki CSS. Używaj tabeli tylko do danych. Spójrz na to w ten sposób: jeśli dane, które chcesz przedstawić na spotkaniu, wymagają arkusza kalkulacyjnego, użyj <table>. Jeśli chcesz korzystać z funkcji dostępnych w oprogramowaniu do prezentacji, takich jak Keynote czy PowerPoint, prawdopodobnie potrzebujesz listy opisów.

Sortowanie kolumn tabeli zajmuje się JavaScript, natomiast oznaczanie nagłówków, aby poinformować użytkowników, że kolumnę można sortować, należy do języka HTML. Poinformuj użytkowników, że kolumny w tabeli można sortować. Ikona przedstawiająca rosnącą, malejącą lub nieposortowaną ikonę. Obecnie posortowana kolumna powinna zawierać atrybut aria-sort z wyliczoną wartością kierunku sortowania. Element <caption> może uprzejmie informować o aktualizacjach, aby posortować za pomocą parametru aria-live oraz zakres, który jest dynamicznie aktualizowany i widoczny dla użytkowników czytników ekranu. Kolumna można sortować przez kliknięcie zawartości nagłówka, dlatego jej zawartość powinna mieć format <button>.

Jeśli nie prezentujesz danych tabelarycznych, nie używaj metody <table>. Jeśli do prezentacji używasz tabeli, ustaw role="none".

Wielu programistów używa tabel do układania formularzy, ale nie jest to konieczne. Ale musisz znać formularze HTML, więc omówimy je w następnej kolejności.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o tabelach.