HTML పట్టికలు టేబిులర్ డేటా (సంబంధిత డేటా యొక్క అడ్డు వరుసలు మరియు నిలువు వరుసలు) ను సూచిస్తాయి — లేఅవుట్ కాదు. అ్యాక్సెసయోగ్య పట్టిక సరైన నిర్మాణాన్ని ఉపయోగిస్తుంది, తద్వారా స్క్రీన్ రీడర్లు ప్రతిটి సెల్ కోసం హెడర్లను ఘోషించవచ్చు.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> with scope — హెడర్ సెల్లను గుర్తించండి. కాలమ్ హెడర్ల కోసం scope="col", అడ్డు వరుస హెడర్ల కోసం scope="row"। స్క్రీన్ రీడర్లు సెల్లను సందర్భం లేకుండా చదవడానికి బదులుగా "ఉత్తరం, రాబడి: $12,000" ను ఘోషిస్తాయి.<caption> — మొత్తం పట్టిక కోసం శీర్షిక, <table> యొక్క మొదటి సంతానం; వినియోగదారులను సమన్వయం చేయడానికి చదవబడుతుంది.<thead>/<tbody>/<tfoot> — హెడర్, బాడీ మరియు సారాంశ వరుసలను సమూహీకరించండి; నావిగేషన్కు సహాయం చేసి, ప్రింట్ చేసేటప్పుడు హెడర్ పునరావృతం చేయడానికి అనుమతిస్తుంది.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
లేఅవుట్ పట్టికలు స్క్రీన్ రీడర్లను గందరగోళానికి గురి చేస్తాయి (అవి డేటా-టేబిల్ సెమాంటిక్లను ఘోషిస్తాయి) మరియు నమ్యత లేనివి. పేజీ లేఅవుట్ కోసం CSS Grid/Flexbox ను ఉపయోగించండి.
సరైన పట్టిక సెమాంటిక్లు (<th scope>, <caption>, సెక్షనింగ్) డేటా పట్టికలను స్క్రీన్ రీడర్ వినియోగదారుల కోసం ఉపయోగించదగ్గవిగా చేస్తాయి — అవి ప్రతిটి విలువను దాని అడ్డు వరుస మరియు నిలువు వరుస హెడర్లకు అనుసంధానం చేస్తాయి.
<table> ను కఠినంగా నిజమైన టేబిులర్ డేటా కోసం ఒதుకుపెట్టండి.