<tbody> Tag in HTML | Table Body
The <tbody> tag is used to group the body content in an HTML table. It is typically used in conjunction with the <thead> (table header) and <tfoot> (table footer) tags. The <tbody> element is used to encapsulate the table rows that contain the actual data in the table.
Key Points on <tbody> Tag:
- The <tbody> tag wraps the main data rows of a table and makes it easier to apply styles or JavaScript operations to those rows.
- It is used inside a
<table>element after the<thead>(header) and before the<tfoot>(footer) elements. - The <tbody> tag helps group related rows together, improving the accessibility and readability of the table structure.
- It is optional but useful for organizing the table content, especially when working with large tables.
- Styling or scripting can target the
<tbody>to differentiate data rows from header or footer rows.
Syntax of <tbody> Tag:
Syntax Example
<table>
<thead>...Example of <tbody> Tag in HTML:
This example demonstrates how to use the <tbody> tag to group the main body of a table with data.
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with tbody Example</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total: 2</td>
</tr>
</tfoot>
</table>
</body>
</html>Output
| Name | Age |
|---|---|
| John Doe | 30 |
| Jane Smith | 25 |
| Total: 2 | |
The <tbody> tag is a powerful tool for structuring data in tables, especially when dealing with large datasets. It helps separate the header, body, and footer of a table, improving the readability and organization of the HTML code.