The td element represents an ordinary data cell.
Example
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Keyboard</td>
<td>₹1,200</td>
</tr>
</table>Here, Product and Price are column headings. Keyboard and ₹1,200 are data values.
5. Adding a Caption
The caption element provides a title or description that identifies the purpose of a table. It is particularly useful when a page contains multiple tables.
Syntax
<table>
<caption>Monthly Sales Report</caption>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
<tr>
<td>January</td>
<td>₹50,000</td>
</tr>
</table>The caption should be the first child of the table element when used. Browsers commonly display it above the table, although CSS can change its visual position.
Writing Good Captions
A useful caption tells users what the table represents without requiring them to infer its purpose from the surrounding page.
Examples of meaningful captions:
- Employee Attendance — October 2026
- Quarterly Revenue by Department
- HTML Course Modules and Durations
- Product Prices as of October 2026
Avoid vague captions such as "Table 1" when a descriptive title would be more helpful.
6. Grouping Table Sections
HTML provides thead, tbody and tfoot to group rows according to their purpose.
thead
The thead element groups rows containing column or other table headings.
tbody
The tbody element groups the main data rows of a table.
tfoot
The tfoot element groups rows summarizing the table, such as totals or other aggregate values.
Complete Example
<table>
<caption>Monthly Sales Report</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>₹50,000</td>
</tr>
<tr>
<td>February</td>
<td>₹65,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td>₹1,15,000</td>
</tr>
</tfoot>
</table>