The
<tbody>tag in HTML is used to group the main content rows (body) of a table.
It separates the table’s data section from the header (<thead>) and footer (<tfoot>), helping improve structure, readability, and performance for large datasets.
Syntax
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>Attributes
| Attribute | Description |
|---|---|
| (None) | The <tbody> element has no specific attributes. You can use global attributes such as id, class, or style. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tbody Tag Example</title>
<style>
table {
border-collapse: collapse;
width: 70%;
margin: 20px auto;
text-align: center;
}
thead {
background-color: #29AB87;
color: white;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
th, td {
border: 1px solid #555;
padding: 10px;
}
</style>
</head>
<body>
<h2>HTML Table with Tbody Example</h2>
<table>
<thead>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Population (Millions)</th>
</tr>
</thead>
<tbody>
<tr>
<td>India</td>
<td>New Delhi</td>
<td>1428</td>
</tr>
<tr>
<td>USA</td>
<td>Washington, D.C.</td>
<td>332</td>
</tr>
<tr>
<td>Japan</td>
<td>Tokyo</td>
<td>125</td>
</tr>
</tbody>
</table>
</body>
</html>Output
Browser Output
Displays a table with a distinct header (green) and alternating row colors in the tbody section.
Please use our TryIt editor to view and experiment with the table.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All modern browsers fully support the <tbody> element.
Notes
- The
<tbody>tag is optional if the table only contains one set of rows, but browsers insert it automatically in the DOM. - It allows styling the main data section separately from the header and footer.
- Helps with table accessibility, scrolling, and printing optimization.
- Best practice: always include
<thead>,<tbody>, and<tfoot>for semantic structure.
Conclusion
The <tbody> tag defines the core content section of a table, enhancing clarity and control over how data rows are displayed and styled.
It’s an essential element for managing and presenting tabular information efficiently.
