- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Add Multiple <tbody> Elements in the Same Table?
In HTML tables, the <tbody> element is used to group and organize the content of the table into sections. It is especially useful when working with large tables. It helps to manage and style the data effectively.
While a table contains one <tbody>, you can have multiple <tbody> elements within the same table to structure data into different sections or categories.
Why to use Multiple <tbody> Elements?
- Grouping Data: Multiple <tbody> elements allow you to group related rows of data separately within the same table.
- Styling: You can apply different styles to each <tbody> to distinguish sections visually.
- Scrolling: Useful for creating tables where certain sections need to scroll independently.
- Dynamic Content: Allows you to dynamically update or manipulate specific sections of the table without affecting others.
Define Simple HTML Table
Here we will create a simple HTML table without the multiple <tbody> element.
Example
<table border="1"> <thead> <tr> <th>Header1</th> <th>Header2</th> </tr> </thead> <tbody> <tr> <td>Content1</td> <td>Content2</td> </tr> <tr> <td>Content3</td> <td>Content4</td> </tr> </tbody> </table>
Adding Multiple <tbody> Elements
To add multiple <tbody> elements to a table, simply insert additional <tbody> tags after the first one. Each <tbody> can contain its own set of rows (<tr>). Here’s an example of how to structure a table with multiple <tbody> elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple Tbody Elements</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid black;
}
thead {
background-color: #acaaaa;
}
.section-header {
background-color: #e2e2e2;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="section-header">
<td colspan="3">Section 1</td>
</tr>
<tr>
<td>1011</td>
<td>Akash</td>
<td>17</td>
</tr>
<tr>
<td>1012</td>
<td>Rahul</td>
<td>16</td>
</tr>
</tbody>
<tbody>
<tr class="section-header">
<td colspan="3">Section 2</td>
</tr>
<tr>
<td>1013</td>
<td>Rajesh</td>
<td>16</td>
</tr>
<tr>
<td>1014</td>
<td>Zafar</td>
<td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
Explanation
- HTML <thead> Tag: It contains the header rows for the table. It typically appears at the top of the table.
- First <body> Tag: It contains the first section of data. A row with the class section header is used to indicate the start of this section.
- Second <body> tag: It contains the second section of data. Similar to the first <tbody>, it includes a section header row.
- Styling: Basic CSS is used to style the table, making the headers and section headers visually distinct.
Updated on: 24-Jul-2024
69 Views
Advertisements