HTML કોષ્ટકો ટેબ્યુલર ડેટા (સંબંધિત ડેટાની પંક્તિઓ અને સ્તંભો) રજૂ કરે છે — લેઆઉટ નહીં. એક અ્যાક્સેસયોગ્ય કોષ્ટક યોગ્ય માળખો વાપરે છે જેથી સ્ક્રીન રીડર્સ દરેક સેલ સાથે હેડર્સ ઘોષણા કરી શકે.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> સાથે scope — હેડર સેલ્સ મા wka કરે. સ્તંભ હેડર્સ માટે 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> ને સજજ ટેબ્યુલર ડેટા માટે આરક્ષિત રાખો.