Tabele z dwoma nagłówkami
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:
| 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:
| 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
Dalej: Nieregularne nagłówki
Na podstawie:
https://www.w3.org/WAI/tutorials/tables/two-headers/
