Tables
Table Structure
thead, tbody, tfoot, th
💡 thead/tbody/tfoot ek report ki structure jaisi hai — header (column titles), body (actual data rows), footer (summary/totals) — teeno logically alag sections, jaise ek printed report ka structure.
<th> ("table header") column/row headers ke liye hai — <td> jaisa hi, lekin semantically "ye ek header hai" batata hai (browser usually bold + center dikhata hai). <thead>, <tbody>, <tfoot> table ko logical sections mein divide karte hain — accessibility aur styling dono ke liye useful.
<table>
<thead>
<tr>
<th>Naam</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aarav</td>
<td>85</td>
</tr>
<tr>
<td>Riya</td>
<td>92</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Average</td>
<td>88.5</td>
</tr>
</tfoot>
</table>🏗️
thead/tbody/tfoot ek report ki structure jaisi hai — header (column titles), body (actual data rows), footer (summary/totals) — teeno logically alag sections, jaise ek printed report ka structure.
1 / 2
⚡ Quick Recap
- th = header cell (semantic + usually bold/centered)
- thead/tbody/tfoot = logical sections
- Accessibility: screen readers headers ko context ke roop mein use karte hain
On this page (2 subtopics)
scope="col" ya scope="row" th ko batata hai ki wo kis cheez ka header hai — complex tables (jaise dono row aur column headers wali) mein accessibility ke liye important, screen readers ko sahi context milta hai.
<table>
<tr>
<th></th>
<th scope="col">Math</th>
<th scope="col">Science</th>
</tr>
<tr>
<th scope="row">Aarav</th>
<td>85</td>
<td>90</td>
</tr>
</table>Tip: scope simple tables (sirf top row header) mein optional hai, lekin complex tables (row aur column dono headers) mein bahut zaroori accessibility feature hai.
Bade tables padhna aasan banane ke liye, alternate rows ko halka different background color dena common design pattern hai ("zebra striping") — CSS nth-child selector se aasani se implement hota hai.
<style>
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
<table>
<tbody>
<tr><td>Row 1</td></tr>
<tr><td>Row 2 (highlighted)</td></tr>
<tr><td>Row 3</td></tr>
</tbody>
</table>Tip: Ye pure CSS technique hai (HTML mein koi extra markup nahi chahiye) — tbody:nth-child(even) automatically alternate rows ko target karta hai.