Prawidłowe nagłówki wierszy i kolumn
Powiąż każdą komórkę z właściwymi nagłówkami.
Prawidłowe nagłówki wierszy i kolumn to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Większość tabel ma dwa typy nagłówków
Rzeczywiste dane zwykle mają nagłówki u góry i z boku. Każda komórka danych znajduje się na przecięciu nagłówka kolumny i nagłówka wiersza.
Każda komórka potrzebuje obu
Wartość 92 sama w sobie niewiele znaczy. Powiąż ją z Ada i Score, a otrzymasz Ada, Score, 92. To powiązanie jest budowanym przez Ciebie skojarzeniem.
Nagłówki kolumn u góry
Pierwszy wiersz zawiera nagłówki scope=col. Gdy użytkownik porusza się strzałkami w dół kolumny, czytnik ekranu nadal ogłasza nagłówek kolumny jako kontekst.
<tr>
<th scope="col">Student</th>
<th scope="col">Score</th>
</tr>Nagłówki wierszy z boku
Pierwsza komórka każdego wiersza treści staje się nagłówkiem scope=row. Nazywa wiersz, dzięki czemu podczas czytania w poprzek wartości zyskują informację o osobie lub czasie.
<tr>
<th scope="row">Ada</th>
<td>92</td>
</tr>Komórka narożna
Komórka w lewym górnym rogu często znajduje się nad nagłówkami wierszy i obok nagłówków kolumn. Pozostawienie jej jako pustego th jest w porządku i zachowuje logiczną strukturę siatki.
<tr><th></th><th scope="col">Score</th></tr>Domyślny scope jest pułapką
Przeglądarki próbują odgadnąć scope, ale w przypadku czegokolwiek bardziej złożonego niż najprostsza siatka ich przypuszczenia są zawodne. Zawsze ustawiaj scope samodzielnie, aby mieć pewność.
Używaj thead i tbody
Umieszczaj wiersze nagłówkowe w thead, a wiersze danych w tbody. Wyjaśnia to strukturę technologiom asystującym i znacznie ułatwia czytanie kodu.
<thead>
<tr><th scope="col">Name</th></tr>
</thead>
<tbody>
<tr><th scope="row">Ada</th></tr>
</tbody>Jak odczytuje to czytnik ekranu
Przejdź do komórki danych, a użytkownik usłyszy najpierw nagłówek wiersza, następnie nagłówek kolumny, a potem wartość. To właściwy scope sprawia, że to ogłoszenie jest dokładne.
Jedna komórka nagłówkowa, jedna funkcja
Ogranicz th do jednej roli: nagłówka kolumny albo nagłówka wiersza. Łączenie danych i etykiet w jednej komórce zaciemnia powiązanie dla wszystkich.
Przetestuj, odczytując jedną komórkę
Wybierz losową komórkę danych i zapytaj: czy jej nagłówki w pełni ją wyjaśniają? Jeśli na podstawie nagłówków nie potrafisz stwierdzić, co oznacza liczba, Twój scope jest nieprawidłowy.
Przykład dwuosiowy
Nagłówki kolumn u góry, nagłówki wierszy po lewej, a dane pośrodku. Taki kształt macierzy obejmuje zdecydowaną większość tabel, które będziesz tworzyć.
<tr><th scope="row">Ada</th><td>92</td><td>88</td></tr>Szybkie sprawdzenie
Użytkownik przechodzi strzałkami do komórki danych znajdującej się głęboko wewnątrz dobrze oznaczonej tabeli.
Podsumowanie: dwie osie, dwa zakresy
Nagłówki kolumn używają scope=col, nagłówki wierszy używają scope=row, a każda komórka danych znajduje się na ich przecięciu. Ustawiaj scope samodzielnie i nigdy nie ufaj domysłom przeglądarki.
Często zadawane pytania
Czy lekcja „Prawidłowe nagłówki wierszy i kolumn” jest bezpłatna?
Tak — pełny tekst „Prawidłowe nagłówki wierszy i kolumn” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Prawidłowe nagłówki wierszy i kolumn”?
Powiąż każdą komórkę z właściwymi nagłówkami. Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Prawidłowe nagłówki wierszy i kolumn”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- th, scope i element caption
- Prawidłowe nagłówki wierszy i kolumn
- Złożone tabele: parowanie headers i id
- Tabele układu to pułapka