HTML ਟੇਬਲ ਟੇਬਿਊਲਰ ਡਾਟਾ (ਸੰਬੰਧਿਤ ਡਾਟਾ ਦੀਆਂ ਕਤਾਰਾਂ ਅਤੇ ਕਾਲਮ) ਪ੍ਰਸਤੁਤ ਕਰਦੇ ਹਨ — ਖਾਕਾ ਨਹੀਂ। ਇੱਕ ਪਹੁੰਚਯੋਗ ਟੇਬਲ ਸਹੀ ਢਾਂਚਾ ਵਰਤਦਾ ਹੈ ਤਾਂ ਕਿ ਸਕ੍ਰੀਨ ਰੀਡਰ ਹਰ ਸੈੱਲ ਦੇ ਨਾਲ ਸਿਰਲੇਖ ਦਾ ਘੋਸ਼ਣਾ ਕਰ ਸਕਣ।
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> ਵਿੱਚ scope — ਸਿਰਲੇਖ ਸੈੱਲਾਂ ਨੂੰ ਚਿੰਨ੍ਹਿਤ ਕਰਦਾ ਹੈ। ਕਾਲਮ ਸਿਰਲੇਖਾਂ ਲਈ scope="col", ਕਤਾਰ ਸਿਰਲੇਖਾਂ ਲਈ scope="row"। ਸਕ੍ਰੀਨ ਰੀਡਰ ਫਿਰ "North, Revenue: $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> ਨੂੰ ਸਖਤੀ ਨਾਲ ਪ੍ਰਮਾਣਿਕ ਟੇਬਿਊਲਰ ਡਾਟਾ ਲਈ ਸੁਰੱਖਿਤ ਰੱਖੋ।