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 .

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:

Kolekcjonerzy misia:
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
Poprzedni: Koncepcje tabel
Dalej: Dwa nagłówki

Na podstawie:
https://www.w3.org/WAI/tutorials/tables/one-header/

Popularne posty z tego bloga

Struktura strony

Formatowanie menu

Regiony strony