Tabele

Tabele HTML służą do wyświetlania danych tabelarycznych z wierszami i kolumnami. Decyzja o użyciu <table> powinna być podjęta na podstawie prezentowanych treści i zainteresowań użytkowników do tych treści. Jeśli dane są prezentowane, porównywane, sortowane, obliczone lub krzyżowe, to <table> będzie prawdopodobnie odpowiednim wyborem. Jeśli chcesz po prostu porządnie rozmieścić treści inne niż tabela, np. dużej grupy miniatur, tabele nie są odpowiednie: zamiast tego utwórz listę obrazów i styl siatki za pomocą CSS.

W tej sekcji przyjrzymy się wszystkim elementom, które składają się na tabelę, a także niektóre funkcje ułatwień dostępu i łatwości obsługi. które warto rozważyć podczas prezentacji danych w tabeli. Choć nauka HTML to nie jest tak naprawdę CSS, a cały kurs do nauki CSS, omówimy niektóre właściwości CSS związane z tabelami.

Elementy tabeli w kolejności

Tag <table> umieszcza zawartość tabeli, w tym wszystkie jej elementy. Pośrednia rola ARIA elementu <table> to table. technologii wspomagających osoby z niepełnosprawnością wiedzą, że ten element to struktura tabeli zawierająca dane uporządkowane wiersze i kolumny. Jeśli tabela zawiera stan wyboru, umożliwia nawigację dwuwymiarową lub umożliwia użytkownikowi zmianę kolejności komórek, ustaw wartość role="grid". Jeśli wiersze obiektu grid można rozwijać i zwijać, użyj tabeli role="treegrid".

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

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

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

Omówimy: <table> dzieci, które są opcjonalne, ale zalecane, przyjrzyj się wierszom, komórkom nagłówków tabel i komórek danych tabeli. <colgroup> zostanie omówione na końcu.

Podpis tabeli

Jako natywny element semantyczny, <caption> jest preferowany nadanie nazwy tabeli. <caption> podaje opisowy, automatycznie powiązany tytuł tabeli. Jest widoczne i domyślnie dostępne dla wszystkich użytkowników.

Element <caption> powinien być pierwszym elementem umieszczonym w elemencie <table>. Dzięki temu wszyscy użytkownicy będą wiedzieć, funkcji tabeli bez konieczności czytania otaczającego tekstu. Możesz też użyć aria-label lub aria-labelledby w tabeli <table>, aby dodać w napisach nazwę na potrzeby ułatwień dostępu. Element <caption> nie ma określonych atrybutów.

Podpis pojawi się poza tabelą. Lokalizacja podpisu można ustawić za pomocą właściwości CSS caption-side, która jest lepszą praktyką niż używanie wycofanego atrybutu align. W ten sposób napisy mogą wyświetlać się na górze i na dole. To lewa i prawa strona pozycjonowanie na boku (inline-start i inline-end) nie jest jeszcze w pełni obsługiwane. Góra to domyślna prezentacja przeglądarki.

Najlepiej, gdy tabele danych mają jasne nagłówki i podpisy oraz są na tyle proste, aby nie wymagały wyjaśnień. Pamiętaj, że: nie wszyscy użytkownicy mają takie same zdolności poznawcze. Jeśli tabela „przedstawia coś” 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 będzie krótki, użyj go jako wewnętrznego tekstu podpisu. Jeśli będzie dłuższy, streść je w podpisie i podaj podsumowanie w polu poprzedzający tabelę, wiążąc je z tabelą aria-describedby. . Inną opcją jest umieszczenie tabeli w elemencie <figure> i umieszczenie podsumowania w elemencie <figcaption>.

Sekcje danych

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

Te elementy nie ułatwiają ani nie utrudniają dostępu do tabeli, ale są przydatne pod względem użyteczności. Oferuje atrakcyjność stylizacji. Na przykład zawartość nagłówka możesz ustawić jako przyklejoną, a treści <tbody> mogą przewijać. Wiersze, które nie są zagnieżdżone w jednym z tych 3 elementów zawierających, są domyślnie zagnieżdżone. oraz dane umieszczone w komponencie <tbody>. Wszystkie 3 mają tę samą domyślną rolę rowgroup. Żaden z tych elementów nie ma określonych atrybutów.

Do tej pory:

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

Ze względu na ułatwienia dostępu element <tfoot> został pierwotnie określony tak, aby pojawiał się tuż po elemencie <thead> i przed <tbody>. dlatego w starszych bazach kodu możesz natrafić na nieintuicyjne porządkowanie kodu.

Zawartość tabeli

Tabele można dzielić na nagłówki, treść i stopki tabeli, ale żaden z tych elementów nie ma żadnego efektu, jeśli zawierają wiersze, komórki i zawartość tabeli. 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>.

W arkuszach stylów klienta użytkownika treść w komórce nagłówka tabeli <th> jest zazwyczaj wyśrodkowana i pogrubiona. Te style domyślne, i stylu, najlepiej kontrolować za pomocą CSS zamiast wycofanych atrybutów, które były dostępne w poszczególnych komórkach, wiersze, a nawet <table>.

Istnieją atrybuty dodające dopełnienie między komórkami i w komórkach, dla obramowań oraz wyrównania tekstu. Dopełnienie komórek i tempo odstępu między komórkami, określające odstęp między zawartością komórki a jej granicą oraz między krawędziami sąsiednich komórek, należy ustawić z funkcjami CSS: maksymalnie graniczny i border-spacing usług. Jeśli jest skonfigurowana border-collapse: collapse, zasada Border-spacing nie będzie działać. Jeśli border-collapse: separate; jest ustawiona, za pomocą empty-cells: hide; można całkowicie ukryć puste komórki. Więcej informacji o stylizowaniu tabel znajdziesz w tym artykule interaktywnej prezentacji stylów CSS związanych z tabelami.

W przykładach dodaliśmy obramowanie tabeli oraz poszczególnych komórek za pomocą CSS, aby niektóre funkcje były bardziej widoczne:

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

Komórka <th> ma znaczenie semantyczne z niejawnymi rolami ARIA jako nagłówek kolumny lub nagłówek wiersza. Definiuje komórkę jako nagłówek kolumny lub wiersza komórek tabeli, w zależności od wartości wskazanego atrybutu scope. Jeśli zasada scope nie jest wyraźnie ustawiona, przeglądarka przyjmuje domyślnie wartość col lub row. Ponieważ użyliśmy znaczników semantycznych, komórka 1956 ma dwa nagłówki: Rok i Lou Minious. Powiązanie to mówi nam, że „1956” to „year” z okazji ukończenia szkoły „Lou Minious”. W tym przykładzie, ponieważ widzimy całą tabelę, powiązanie jest widoczne wizualnie. Zastosowanie <th> powoduje utworzenie powiązania nawet wtedy, gdy kolumna lub wiersz nagłówka przewinie się poza widok. Mogliśmy mieć wyraźnie określone <th scope="col">Year</th> i <th scope="row">Lou Minious</th>, ale w przypadku takiej prostej tabeli podane wartości domyślne działają. Inne wartości w polu scope to rowgroup i colgroup, które są przydatne w przypadku złożonych tabel.

Scalanie komórek

Podobnie jak w przypadku programów MS Excel, Arkuszy Google i Numerów, można złączać wiele komórek w jedną. Odbywa się to w języku HTML. Atrybut colspan służy do scalania co najmniej dwóch sąsiednich komórek w jednym wierszu. Atrybut rowspan służy do scalania komórek w wierszach. jest umieszczany w komórce w górnym wierszu.

W tym przykładzie nagłówek tabeli zawiera 2 wiersze. Pierwszy wiersz nagłówka zawiera trzy komórki obejmujące 4 kolumny: środkową ma colspan="2". Spowoduje to scalenie dwóch sąsiednich komórek. Pierwsza i ostatnia komórka zawiera rowspan="2". Spowoduje to scalenie komórki z komórką w sąsiednim wierszu, tuż pod nim.

Drugi wiersz nagłówka tabeli zawiera dwie komórki; są to komórki drugiej i trzeciej kolumny w drugim wierszu. W pierwszej ani ostatniej kolumnie nie zadeklarowano żadnej komórki, ponieważ komórka w pierwszej i ostatniej kolumnie obejmuje 2 wiersze.

Jeśli komórka jest zdefiniowana przez wiele komórek nagłówka z powiązaniami, których nie można ustawić przez same atrybuty scope, umieść atrybut headers z listą powiązanych nagłówków rozdzielonych spacjami. Ten przykład jest bardziej złożona, więc jasno definiujemy zakres nagłówków z atrybutem scope. Aby podkreślić, że do każdej komórki dodaliśmy atrybut headers.

W tak prostym przypadku użycia atrybuty headers być może nie były konieczne, ale warto je mieć w pasku narzędzi jako: zwiększają złożoność tabel. tabele o złożonych strukturach, np. tabele z nagłówkami lub komórkami scalonymi z niż dwa poziomy nagłówków kolumn lub wierszy, wymagają jednoznacznej identyfikacji powiązanych komórek nagłówka. W tak złożonych tabelach wyraźnie powiąż każdą komórkę danych z każdą odpowiadającą komórką nagłówka z listą rozdzielonych spacjami wartości id wszystkich powiązanych nagłówków jako wartość atrybutu headers.

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

Z tego powodu złożone struktury tabel mogą być trudne do zrozumienia dla wszystkich użytkowników, nie tylko dla użytkowników czytników ekranu. Funkcje poznawcze Jeśli chodzi o obsługę czytnika ekranu, łatwiej jest znaleźć prostsze tabele z niewielką liczbą komórek rozpiętych lub bez nich, nawet bez dodawania zakresu i nagłówków. zrozumiano. Łatwiej nimi zarządzać.

Określanie stylu tabel

Są dwa dość mało znane elementy, o których wspomniano pokrótce: grupa kolumn <colgroup>, element i jego jedynym elementem potomnym, czyli pustym elementem <col>. Element <colgroup> służy do definiowania grup kolumn (elementów <col>) w tabeli.

Jeśli grupowanie kolumn jest używane, powinno ono być umieszczone w elemencie <table> bezpośrednio po <caption> i przed danymi w tabeli. Jeśli obejmują więcej niż jedną kolumnę, użyj atrybutu span.

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

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

Ani <colgroup>, ani <col> nie mają znaczenia semantycznego w kontekście zwiększenia dostępności tabeli, ale pozwalają na w przypadku ograniczonego stylu kolumny, w tym dla ustawienia szerokości kolumny za pomocą CSS.

Style w kolumnie <col> będą miały styl kolumny, o ile nie będą żadne style <td> ani <th>, które zastąpią ten styl. Na przykład, gdy Funkcja <colspan> służy do scalania komórek w niektórych wierszach tabeli, ale nie we wszystkich. Nie możesz więc mieć pewności, że selektor taki jak tr > *:nth-child(8), która wybiera ósmy element podrzędny każdego wiersza, podświetla w całości 8 kolumnę lub podświetla 8 kolumnę w kilku wierszach, ale z kilkoma komórkami z 9. i 10. kolumny, w zależności od tego, które komórki wiersza lub kolumny zostały scalone.

Niestety tylko kilka właściwości jest obsługiwanych, style nie są dziedziczone do komórek i jedynym sposobem użycia funkcji <col> element w komórkach kierowania ma złożony selektor zawierający selektor relacyjny :has().

Jeśli zarówno element <table>, jak i element <colgroup> mają kolor tła, na górze będzie znajdować się background-color z <colgroup>. Kolejność rysowania jest taka: tabela, grupy kolumn, kolumny, grupy wierszy, wiersze, komórki jako ostatnie i na górze, zgodnie ze schematem tabeli warstwach. Elementy <td> i <th> nie są potomkami elementów <colgroup> ani <col> i nie dziedziczą ich stylu.

Do rozmawania tabeli mogą przydać się selektory strukturalne CSS. Na przykład: tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} spowoduje dodanie półprzezroczystej czerni do każdego nieparzystego wiersza w treści tabeli, umożliwiając prześwietlenie wszelkich efektów tła ustawionych w elemencie <colgroup>.

Tabele domyślnie nie są elastyczne. Są one natomiast domyślnie dopasowywane do ich zawartości. Aby uzyskać tabelę, potrzebne są dodatkowe wskaźniki aby dobrze wyświetlały się na różnych urządzeniach. Jeśli zmieniasz właściwość wyświetlania CSS elementów tabeli, zawierają atrybuty ARIA role. Choć może to wydawać się zbędne, w niektórych przeglądarkach właściwość CSS display może wpływać na drzewo ułatwień dostępu.

Prezentujemy dane

Elementy tabeli mają znaczenie semantyczne, które są używane przez technologie wspomagające do poruszania się po wierszach i kolumnach bez obawy, że się zgubią. Elementu <table> nie należy używać do prezentacji. Jeśli chcesz utworzyć nagłówek nad listą, użyj nagłówka. i listę. Jeśli chcesz rozłożyć treść w wielu kolumnach, użyj układu wielokolumnowego. Jeśli chcesz rozłożyć treści w siatce, użyj siatki CSS. Używaj tabeli tylko do przechowywania danych. Spójrz na to w ten sposób: jeśli Twoje dane wymagają arkusza kalkulacyjnego do przedstawienia podczas spotkania, użyj narzędzia <table>. Jeśli chcesz korzystać z funkcji dostępnych w oprogramowaniu do prezentacji, takim jak Keynote lub PowerPoint, prawdopodobnie potrzebujesz listy opisów.

Sortowanie kolumn tabeli jest zakresem języka JavaScript, ale oznaczanie nagłówków w celu poinformowania użytkowników, że kolumnę można sortować, jest zakresem języka HTML. Poinformuj użytkowników, że kolumny tabeli można sortować, korzystając z ikon rosnących, malejących i nieposortowanych. Obecnie posortowana kolumna powinna dodaj atrybut aria-sort z wartością wyliczaną kierunku sortowania. <caption> może uprzejmie informować o aktualizacjach i sortować w kolejności za pomocą parametru aria-live oraz dynamicznie aktualizowany i widoczny dla użytkowników czytników ekranu. Zawartość kolumny można sortować po kliknięciu zawartości nagłówka, więc jej zawartość powinna mieć typ <button>.

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

Wielu programistów używa tabel do układania formularzy, ale nie ma takiej potrzeby. Formularze HTML są jednak niezbędne, więc omówimy je w dalszej części tego procesu.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o tabelach.