Satır ve Sütun Başlıklarını Doğru Kullanma
Her hücreyi doğru başlıklarla ilişkilendirin.
Satır ve Sütun Başlıklarını Doğru Kullanma, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Most Tables Have Two Header Types
Real data usually has headers along the top and down the side. Each data cell sits at the crossing of a column header and a row header.
Every Cell Needs Both
The value 92 means little alone. Tie it to Ada and to Score and it becomes Ada, Score, 92. That pairing is the association you are building.
Column Headers Across the Top
The first row holds scope=col headers. As a user arrows down a column, the screen reader keeps announcing that column header for context.
<tr>
<th scope="col">Student</th>
<th scope="col">Score</th>
</tr>Row Headers Down the Side
The first cell in each body row becomes a scope=row header. It names the row so values get a who or a when as the user reads across.
<tr>
<th scope="row">Ada</th>
<td>92</td>
</tr>The Corner Cell
The top-left cell often sits above row headers and beside column headers. Leaving it as an empty th is fine and keeps the grid honest.
<tr><th></th><th scope="col">Score</th></tr>Default scope Is a Trap
Browsers try to guess scope, but the guess is unreliable for anything beyond the simplest grid. Always set scope yourself to be sure.
Use thead and tbody
Wrap header rows in thead and data rows in tbody. It clarifies structure for assistive tech and makes your markup far easier to read.
<thead>
<tr><th scope="col">Name</th></tr>
</thead>
<tbody>
<tr><th scope="row">Ada</th></tr>
</tbody>How a Screen Reader Reads It
Move to a data cell and the user hears the row header, the column header, then the value. Good scope is what makes that announcement accurate.
One Header Cell, One Job
Keep a th to a single role: a column header or a row header. Mixing data and labels in one cell muddies the association for everyone.
Test by Reading One Cell
Pick a random data cell and ask: do its headers fully explain it? If you cannot tell what a number means from its headers, your scope is wrong.
A Two-Axis Example
Column headers on top, row headers on the left, data in the middle. This matrix shape covers the vast majority of tables you will build.
<tr><th scope="row">Ada</th><td>92</td><td>88</td></tr>Quick Check
A user arrows onto a data cell deep inside a well-marked table.
Recap: Two Axes, Two Scopes
Column headers use scope=col, row headers use scope=row, and every data cell sits where they cross. Set scope yourself and never trust the guess.
Sıkça Sorulan Sorular
“Satır ve Sütun Başlıklarını Doğru Kullanma” dersi ücretsiz mi?
Evet — “Satır ve Sütun Başlıklarını Doğru Kullanma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Satır ve Sütun Başlıklarını Doğru Kullanma” dersinde ne öğreneceğim?
Her hücreyi doğru başlıklarla ilişkilendirin. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Satır ve Sütun Başlıklarını Doğru Kullanma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- th, scope ve caption Öğesi
- Satır ve Sütun Başlıklarını Doğru Kullanma
- Karmaşık Tablolar: headers ve id Eşleştirmesi
- Düzen Tabloları Bir Tuzaktır