Tabele z jednym nagłówkiem
Ta strona obejmuje tabele zawierające jeden prosty nagłówek wierszy lub jeden prosty nagłówek kolumn. Dane w tych tabelach są opisane w sposób jednoznaczny.
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 .
Uwaga: Niektórzy czytniki ekranu odczytują "Data - Zdarzenie - Miejsce" w komórce "Miejsce", ponieważ kierunek elementów <th> jest niejednoznaczny.
PRZYKŁAD:
Koncerty:
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>
PRZYKŁAD:
Koncerty:
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>
PRZYKŁAD:
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:
Dalej: Dwa nagłówki
Na podstawie:
https://www.w3.org/WAI/tutorials/tables/one-header/
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/