Tabele z jednym nagłówkiem
Jeśli zawartość tabeli jest niejednoznaczna lub zawiera nagłówki kolumn i wierszy, należy użyć atrybutu scope, aby uniknąć zamieszania. Więcej informacji na temat takich tabel można znaleźć w tabelach zawierających dwa nagłówki .
Podejście 1: Tabela z komórkami nagłówka w górnym rzędzie
Następująca tabela koncertów zawiera komórki w pierwszym rzędzie, oznaczone przy użyciu elementu <th>. Jest to dopuszczalne tylko dlatego, że jest to taki mała tabela, a same dane są wyraźnie różne w każdej kolumnie, tak że związek między nagłówkiem a komórkami danych jest oczywisty.Uwaga: Niektórzy czytniki ekranu odczytują "Data - Zdarzenie - Miejsce" w komórce "Miejsce", ponieważ kierunek elementów <th> jest niejednoznaczny.
PRZYKŁAD:
Koncerty:
| Data | Zdarzenie | Miejsce |
|---|---|---|
| 12 lutego | Waltz z Straussem | Hala główna |
| 24 marca | Obeliski | Zachodnie skrzydło |
| 14 kwietnia | Co | Hala główna |
FRAGMENT KODU:
<table>
<tr>
<th> Data </th>
<th> Zdarzenie </th>
<th> Miejsce </th>
</tr>
<tr>
<td> 12 lutego </td>
<td> Walc z Straussem </td>
<td> Hala główna </td>
</tr>
[…]
</table>
Podejście 2: Tabela z nagłówkami w pierwszej kolumnie
Poniższa tabela zawiera dane z poprzedniego przykładu z kolumną nagłówka po lewej stronie. Również w tej sytuacji akceptowalne jest użycie tego kodu, ponieważ jest to taka mała i prosta tabela. Następne strony w tym samouczku wyjaśniają, jak skompilować bardziej złożone tabele.PRZYKŁAD:
Koncerty:
| Data | 12 lutego | 24 marca | 14 kwietnia |
|---|---|---|---|
| Zdarzenie | Walc z Straussem | Obeliski | Co |
| Miejsce | Hala główna | Zachodnie skrzydło | Hala główna |
FRAGMENT KODU:
<table>
<tr>
<th> Data </th>
<td> 12 lutego </td>
<td> 24 marca </td>
<td> 14 kwietnia </td>
</tr>
<tr>
<th> Zdarzenie </th>
<td> Walc z Straussem </td>
<td> Obeliski </td>
<td> Co </td>
</tr>
<tr>
<th> Miejsce </th>
<td> Hala główna </td>
<td> Zachodnie skrzydło </td>
<td> Hala główna </td>
</tr>
</table>
Podejście 3: Tabela z niejednoznacznymi danymi
W tym przykładzie dane (imię, nazwisko i miasto) nie mogą być od siebie odróżniane bez znajomości nagłówka. Atrybut scope z wartością col definiuje kierunek komórek nagłówka i łączy je z odpowiednimi komórkami danych. Atrybut scope jest także potrzebny w przypadku dużych tabel z jednym wierszem nagłówka lub kolumny.PRZYKŁAD:
| Nazwisko | Pierwsze imię | Miasto |
|---|---|---|
| Phoenix | Imari | Henry |
| Zeki | Rome | Min |
| Apirka | Kelly | Brynn |
FRAGMENT KODU:
<table>
<caption> Kolekcjonerzy misia: </caption>
<tr>
<th scope= "col" > Nazwisko </th>
<th scope= "col" > Pierwsze imię </th>
<th scope= "col" > Miasto </th>
</tr>
<tr>
<td> Phoenix </td>
<td> Imari </td>
<td> Henry </td>
</tr>
<tr>
<td> Zeki </td>
<td> Rome </td>
<td> Min </td>
</tr>
<tr>
<td> Apirka </td>
<td> Kelly </td>
<td> Brynn </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: Dwa nagłówki
Na podstawie:
https://www.w3.org/WAI/tutorials/tables/one-header/
