Table Types

♿ Accessible Tables — Sabke Liye Table

<th scope="col">Name</th> <caption>Student List</caption>

Accessible table jaise braille textbook — visually impaired person bhi padh sakta hai. Web pe zyada tables screen readers ke liye broken hain kyunki developers 3 simple attributes skip karte hain.

Teen cheezein tables accessible banati hain: <caption> title deta hai (sighted users ko invisible, screen readers padhte hain), scope="col" <th> pe screen readers ko batata hai ki header kis column se belong karta hai, aur proper th/td separation se headers alag announce hote hain.

🛺

Braille Analogy: Regular table jaise book bina chapter titles ke — confusing. Accessible table caption + scope jaise well-organized book jaise table of contents — koi bhi navigate kar sakta hai, sighted ya nahi.

Code Example

HTML — Accessible Tables — Sabke Liye Table

<!-- Accessible table -->
<table>
  <caption>
    Student Performance Report — Class 10A, 2025
  </caption>
  <thead>
    <tr>
      <th scope="col">Student Name</th>
      <th scope="col">Maths</th>
      <th scope="col">Science</th>
      <th scope="col">English</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Amit</th>
      <td>92</td>
      <td>85</td>
      <td>78</td>
      <td>255</td>
    </tr>
    <tr>
      <th scope="row">Priya</th>
      <td>88</td>
      <td>95</td>
      <td>90</td>
      <td>273</td>
    </tr>
    <tr>
      <th scope="row">Rahul</th>
      <td>75</td>
      <td>82</td>
      <td>70</td>
      <td>227</td>
    </tr>
  </tbody>
</table>

<!-- scope="colgroup" for column headers -->
<table>
  <caption>Weekly Schedule</caption>
  <colgroup>
    <col>
    <col>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Time</th>
      <th scope="col">Monday</th>
      <th scope="col">Wednesday</th>
      <th scope="col">Friday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>9 AM</td>
      <td>Maths</td>
      <td>Science</td>
      <td>English</td>
    </tr>
  </tbody>
</table>

<caption>Table title — table ke upar dikhta hai, screen readers pehle padhte hain

scope="col"Header neeche ki poori column pe apply hota hai

scope="row"Header bilkul wali row pe apply hota hai

<th scope="row"Row headers (student names) scope="row" use karte hain

<th scope="col"Column headers (subjects) scope="col" use karte hain

<colgroup>Columns ko group karta hai styling/accessibility hints ke liye

✅ When to Use

Public website pe HAR data table pe
Tables jismein row aur column headers dono hain
Koi bhi table jo blind person padhna chahta ho
Official documents ya reports mein tables

❌ When NOT to Use

Layout tables ke liye (screen readers skip karne ke liye role="presentation" add karo)
Tiny decorative tables jisme meaningful data nahi hai

💡

Screen readers tables aise announce karte hain: "Table: Student Performance Report. 4 columns, 4 rows. Column 1: Student Name. Row 1: Amit, Maths 92, Science 85..." Yehi hai caption aur scope matter karte hain — data read karne se pehle context dete hain.

← Back to Tables Chapter