Beginner LevelHTML & Semantic Web
How do you structure accessible HTML tables using thead, tbody, th, and caption?
❓ Interview Prompt: Explain table semantic elements: <table>, <caption>, <thead>, <tbody>, <tfoot>, <th> with scope attributes.
Accessible HTML tables require explicit semantic sub-elements:
1
'<caption>': First child of '<table>'; acts as table title for screen readers.
2
'<thead>' / '<tbody>' / '<tfoot>': Group table header, body, and summary footer rows.
3
'<th scope="col">' / '<th scope="row">': Specifies whether a header cell belongs to a column or row, enabling screen readers to read headers aloud when navigating data cells.
Code Implementation Example
html
<table>
<caption>Q1 Financial Results</caption>
<thead>
<tr>
<th scope="col">Department</th>
<th scope="col">Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Sales</th>
<td>$150,000</td>
</tr>
</tbody>
</table>💡Accessible table structure using caption, thead, tbody, and th scope attributes.
🎯 Interview Key Takeaway
Structure tables with <caption>, <thead>, <tbody>, and set scope="col/row" on <th> cells for accessibility.
#Table#thead#tbody#scope#Beginner
Back to all HTML & Semantic Web Questions→