HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
More on HTML Tables
Now that you know the basics of HTML tables, let’s explore additional features that enhance the structure, readability, and accessibility of your tables.
Adding a Caption
A table caption serves as the table’s title it improves both accessibility and SEO.
The caption will appear above the table by default.
Example:
<table>
<caption>Student Details</caption>
<!-- More rows and columns -->
</table>
Grouping Table Sections with <thead> , <tbody> ,and <tfoot>
You can divide a table into three logical parts:
thead: Groups header rows.tbody: Groups main data rows.tfoot: Groups summary/footer rows.
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ali</td>
<td>25</td>
</tr>
<tr>
<td>Sarah</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">End of Table</td>
</tr>
</tfoot>
</table>
Styling Column with <colgroup> and <col>
You can style entire columns using the colgroup and col elements.
<table>
<colgroup>
<col style="background-color: yellow">
<col style="background-color: lightblue">
</colgroup>
<tr>
<td>One</td>
<td>Two</td>
</tr>
</table>
Using the scope Attribute for Accessibility
The scope attribute defines whether a header (th) applies to a row, column, or group. This help screens readers understand table structure.
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>Ahmed</td>
<td>28</td>
</tr>
Complete Table Example
Here’s a full example that uses all the advance elements:
<table border="1">
<caption>Employee Information</caption>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alice</td>
<td>Developer</td>
<td>$80,000</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
<td>Designer</td>
<td>$70,000</td>
</tr>
<tr>
<td>3</td>
<td>Carol</td>
<td>Manager</td>
<td>$90,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Employees</td>
<td>3</td>
</tr>
</tfoot>
</table>
Conclusion
By using <thead>, <tbody>, <tfoot>, <colgroup>, and accessibility features like scope you can build tables that are well-organized, visually clear, and user-friendly-even for screen readers. These features help your tables look professional and behave consistently across browsers.