Tabele z dwoma nagłówkami

Ta strona opisuje tabele, które mają prosty nagłówek wiersza i prosty nagłówek kolumny. W takich tabelach związek między nagłówkami a komórkami danych staje się szybko niejasny. W przypadku takich tabel należy użyć elementu <th>, aby zidentyfikować komórki nagłówka i atrybut scope w celu zadeklarowania kierunku każdego nagłówka. Atrybut scope może mieć wartość row lub col aby oznaczać, że nagłówek dotyczy odpowiednio całego wiersza lub kolumny.
Ponadto można użyć elementu <caption>, aby zidentyfikować tabelę w dokumencie. Jest to szczególnie użyteczne dla użytkowników czytników ekranu, którzy przeglądają stronę internetową w "trybie tabeli", gdzie mogą poruszać się między nimi. Więcej informacji i wytycznych dotyczących używania elementu <caption> znajduje się na stronie  Caption & Summary.

Podejście 1: Tabela z komórkami nagłówkowymi w górnym rzędzie i pierwszej kolumnie

Poniższa tabela Godziny otwarcia zawiera informacje nagłówka zarówno w górnym rzędzie, jak iw pierwszej kolumnie. Wszystkie komórki nagłówków są oznaczone jako komórki <th> z dodanymi atrybutami scope.
W wierszu nagłówka wartość col dla scope łączy każdą komórkę nagłówka z komórkami danych w kolumnie. W kolumnie Nagłówek wartość row łączy poszczególne nagłówki z ich wierszami. Bez tych informacji niektórzy użytkownicy nie byliby w stanie zrozumieć relacji między nagłówkiem a komórkami danych. W poniższym przykładzie etykiety "Otwarte" i "Zamknięte" są przydatne, jeśli mogą być przypisane do określonego dnia.

PRZYKŁAD:

Godziny otwarcia:
Poniedziałek Wtorek Środa
09.00 - 11.00 Zamknięte Otwarte Otwarte
11.00 - 13.00 Otwarte Otwarte Zamknięte
13.00 - 15.00 Otwarte Otwarte Zamknięte

FRAGMENT KODU:

<table>
 <caption> Godziny otwarcia: </caption>
 <tr>
  <td></td>
  <th scope= "col" > Poniedziałek </th>
  <th scope= "col" > Wtorek </th>
  <th scope= "col" > Środa </th>
 </tr>
 <tr>
  <th scope= "row" > 09.00 - 11.00 </th>
  <td> Zamknięte </td>
  <td> Otwarte </td>
  <td> Otwarte </td>
  </tr>
 <tr>
  <th scope= "row" > 11.00 - 13.00 </th>
  <td> Otwarte </td>
  <td> Otwarte </td>
  <td> Zamknięte </td>
 </tr>
 <tr>
  <th scope= "row" > 13.00 - 15.00 </th>
  <td> Otwarte </td>
  <td> Otwarte </td>
  <td> Zamknięte </td>
 </tr>
</table>

Podejście 2: Tabela z przesuniętą kolumną komórek nagłówka

W tej tabeli komórki nagłówka wierszy znajdują się w drugiej, a nie w pierwszej kolumnie. Podejście jest podobne do powyższych przykładów: Zakres komórek nagłówka w górnym rzędzie jest col na col . Używając wartości row dla scope przypisuje komórki nagłówka w drugiej kolumnie do komórek danych po lewej i po prawej stronie poszczególnych komórek nagłówka.

PRZYKŁAD:

Godziny otwarcia:
Lp. OD - DO Poniedziałek Wtorek Środa
1. 09.00 - 11.00 Zamknięte Otwarte Otwarte
2. 11.00 - 13.00 Otwarte Otwarte Zamknięte
3. 13.00 - 15.00 Otwarte Otwarte Zamknięte

FRAGMENT KODU:

<table>
 <caption> Godziny otwarcia: </caption>
 <tr>
  <th scope= "col" > <abbr title="Liczba porządkowa">Lp.</abbr> </th>
  <th scope= "col" >OD - DO</th>
  <th scope= "col" > Poniedziałek </th>
  <th scope= "col" > Wtorek </th>
  <th scope= "col" > Środa </th>
 </tr>
 <tr>
  <td > 1. </td>
  <th scope= "row" > 09.00 - 11.00 </th>
  <td> Zamknięte </td>
  <td> Otwarte </td>
  <td> Otwarte </td>
  </tr>
 <tr>
  <td > 2. </td>
  <th scope= "row" > 11.00 - 13.00 </th>
  <td> Otwarte </td>
  <td> Otwarte </td>
  <td> Zamknięte </td>
 </tr>
 <tr>
  <td > 3. </td>
  <th scope= "row" > 13.00 - 15.00 </th>
  <td> Otwarte </td>
  <td> Otwarte </td>
  <td> Zamknięte </td>
 </tr>
</table>

Powiązane zasoby WCAG 2.0
Te samouczki zapewniają najlepsze praktyczne wskazówki dotyczące wdrażania dostępności w różnych sytuacjach. Na tej stronie zostały połączone następujące kryteria sukcesu WCAG 2.0 i techniki z różnych poziomów zgodności:
Techniki:
  • H51: używanie znaczników tabel do prezentowania danych tabelarycznych
  • H63: użycie atrybutu scope do powiązania komórek nagłówka i komórek danych w tabelach danych
Poprzedni: Jeden nagłówek
Dalej: Nieregularne nagłówki

Na podstawie:
https://www.w3.org/WAI/tutorials/tables/two-headers/

Popularne posty z tego bloga

Struktura strony

Formatowanie menu

Regiony strony