Tebulin HTML yana gabatar da data mai tsari (layukan da ginsu na data masu alaka) — ba layout ba. Tebulin mai kyau yana amfani da tsari daidai ta yadda screen readers su iya bayyana jerin gwamnati tare da kowane cell.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> da scope — yana yin nuni wa cell na gwamnati. scope="col" don gwamnatin jeri, scope="row" don gwamnatin layuka. Screen readers sai su bayyana "Arewa, Kudaden shigegi: $12,000" maimakon karantawa cells ba tare da halin jiya ba.<caption> — jiya don duk tebulin, yaranyar farko na <table> ; ana karantawa su don juyawa masu amfani.<thead>/<tbody>/<tfoot> — yin tara layuka na jiya, jiki, da taƙaitaccen layuka; taimakawa navigations da ba da izini wa jiya don sake dawowa lokacin bugi.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Tebulin layout suna haifar da rudani ga screen readers (suna bayyana data-table semantics) kuma suna da ƙalakale. Yi amfani da CSS Grid/Flexbox don layout na shafin.
Daidaituwar tebulin semantics (<th scope>, <caption>, tsarawa) shine abin da ke sa tebulin data mai aiki ga mai amfani da screen reader — suna haɗa kowane ƙima da gwamnatin layuka da jeri.
Ajiye <table> kawai don ainihin data mai tsari.