HTML <tbody> tbody tag
The <tbody> tag in HTML is used to group the main content of a table, specifically the rows that contain data. It helps to organize and structure table rows and is typically used in conjunction with <thead> (for header rows) and <tfoot> (for footer rows) to create a well-structured and accessible table.
Key Features:
- Grouping Data Rows: Encapsulates the rows of a table that contain data, separating them from header and footer rows.
- Table Structure: Provides a way to logically group and style the main body of the table.
- Styling and Scripting: Makes it easier to apply CSS styles and JavaScript scripts to the main content of the table.
Basic 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>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
In this example:
- The
<tbody>tag groups the rows containing the actual data of the table. <thead>contains header rows, while<tfoot>contains footer rows.
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>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
thead {
background-color: #f4f4f4;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Carol</td>
<td>28</td>
<td>Chicago</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">End of List</td>
</tr>
</tfoot>
</table>
</body>
</html>
In this example:
- The
<tbody>tag is used to group the rows with actual data, making it easier to style these rows differently from header and footer rows.
Use Cases:
- Organizing Data: Helps in structuring and styling the main content of the table separately from headers and footers.
- Styling and Scripting: Allows for specific styling and scripting for data rows without affecting headers and footers.
- Accessibility: Improves accessibility by separating data from headers and footers, making it easier for screen readers to interpret the table's structure.
Best Practices:
- Logical Grouping: Use
<tbody>to group data rows for a clearer and more maintainable table structure. - CSS Styling: Utilize CSS to style the
<thead>,<tbody>, and<tfoot>sections differently if needed. - Accessibility: Ensure that the table's structure is logical and accessible, with appropriate use of
<thead>,<tbody>, and<tfoot>.
Key Points:
- Purpose: The
<tbody>tag is used to group and organize the main data rows of a table. - Usage: Works alongside
<thead>and<tfoot>to provide a structured and accessible table layout. - Styling: Makes it easier to apply specific styles and scripts to the main data rows of the table.
In summary, the <tbody> tag in HTML is essential for grouping the main data rows of a table, helping to organize and style the table's content. It works in conjunction with <thead> and <tfoot> to provide a clear and structured table layout.