Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to Add Multiple 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 as it helps to manage and style the data effectively.
While a table typically contains one <tbody>, you can have multiple <tbody> elements within the same table to structure data into different sections or categories.
Syntax
Following is the syntax for using multiple <tbody> elements in a table
<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>
<tbody>
<tr><td>Data 3</td><td>Data 4</td></tr>
</tbody>
</table>
Why 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.
Basic HTML Table Structure
Let us first create a simple HTML table with a single <tbody> element to understand the basic structure
Example
<!DOCTYPE html>
<html>
<head>
<title>Basic Table Structure</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<table border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="padding: 10px; background-color: #f0f0f0;">Header1</th>
<th style="padding: 10px; background-color: #f0f0f0;">Header2</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px;">Content1</td>
<td style="padding: 10px;">Content2</td>
</tr>
<tr>
<td style="padding: 10px;">Content3</td>
<td style="padding: 10px;">Content4</td>
</tr>
</tbody>
</table>
</body>
</html>
The output of the above code is
| Header1 | Header2 | |----------|----------| | Content1 | Content2 | | Content3 | Content4 |
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>).
Example Student Data by Sections
<!DOCTYPE html>
<html>
<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 style="font-family: Arial, sans-serif; padding: 20px;">
<table>
<thead>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="section-header">
<td colspan="3">Section A</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 B</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>
The output displays a table with clearly separated sections
| Roll No | Name | Age | |---------|--------|-----| | Section A | | 1011 | Akash | 17 | | 1012 | Rahul | 16 | | Section B | | 1013 | Rajesh | 16 | | 1014 | Zafar | 17 |
Example Sales Data by Quarters
Following example demonstrates multiple <tbody> elements for organizing sales data by quarters
<!DOCTYPE html>
<html>
<head>
<title>Sales Data by Quarters</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: center;
border: 1px solid #ddd;
}
thead th {
background-color: #4CAF50;
color: white;
}
.quarter-header {
background-color: #f0f0f0;
font-weight: bold;
color: #333;
}
tbody:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Annual Sales Report</h2>
<table>
<thead>
<tr>
<th>Month</th>
<th>Sales ($)</th>
<th>Target ($)</th>
</tr>
</thead>
<tbody>
<tr class="quarter-header">
<td colspan="3">Q1 2024</td>
</tr>
<tr>
<td>January</td>
<td>25,000</td>
<td>30,000</td>
</tr>
<tr>
<td>February</td>
<td>28,000</td>
<td>30,000</td>
</tr>
<tr>
<td>March</td>
<td>32,000</td>
<td>30,000</td>
</tr>
</tbody>
<tbody>
<tr class="quarter-header">
<td colspan="3">Q2 2024</td>
</tr>
<tr>
<td>April</td>
<td>35,000</td>
<td>35,000</td>
</tr>
<tr>
<td>May</td>
<td>38,000</td>
<td>35,000</td>
</tr>
<tr>
<td>June</td>
<td>42,000</td>
<td>35,000</td>
</tr>
</tbody>
</table>
</body>
</html>
This example shows how multiple <tbody> elements help organize quarterly data with different styling for each section.
Styling Individual <tbody> Elements
You can apply different styles to individual <tbody> elements using CSS selectors. This allows for visual distinction between different sections of data.
Example Different Styles for Each Section
<!DOCTYPE html>
<html>
<head>
<title>Styled Multiple Tbody</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
thead th {
background-color: #333;
color: white;
}
tbody:nth-child(2) {
background-color: #e8f5e8;
}
tbody:nth-child(3) {
background-color: #ffe8e8;
}
tbody:nth-child(4) {
background-color: #e8e8ff;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$999</td>
<td>15</td>
</tr>
<tr>
<td>Mouse</td>
<td>$25</td>
<td>50</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Smartphone</td>
<td>$699</td>
<td>25</td>
</tr>
<tr>
<td>Headphones</td>
<td>$199</td> 
Updated on: 2026-03-16T21:38:54+05:30
642 Views
Advertisements