How to group the body content in a table using HTML5 ?
In this article, group the body content in an <table> element in a document. It is used to define a standard cell in an HTML table.
Syntax:
<tbody> ... </tbody>
Example 1: In this example, we use some HTML tags and make the group the body content in a table.
html
<!DOCTYPE html>
< html >
< head >
< title >
How to group the body content
in a table using HTML5?
</ title >
< style >
body {
text-align: center;
}
h1 {
color: green;
}
th {
color: blue;
}
table,
tbody,
td {
border: 1px solid black;
border-collapse: collapse;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h2 >
HTML5: How to group the body
content in a table?
</ h2 >
< table >
< thead >
< tr >
< th >Name</ th >
< th >User Id</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Honeysingh</ td >
< td >@Yo Yo Honey singh</ td >
</ tr >
< tr >
< td >GeeksforGeeks</ td >
< td >@geeks</ td >
</ tr >
</ tbody >
</ table >
</ center >
</ body >
</ html >
|
Output:
Example 2: In this example how to group the body content in a table using HTML5, and apply some colorful styling to the webpage.
Syntax:
tbody > tr > td[colspan="3"] {
background-color: #2196F3;
color: white;
text-align: center;
}
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
< style >
table {
border-collapse: collapse;
margin: 20px;
}
th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4CAF50;
color: white;
}
td {
background-color: #f2f2f2;
}
td:first-child {
border-left: 1px solid #ddd;
}
td:last-child {
border-right: 1px solid #ddd;
}
tbody>tr>td[colspan="3"] {
background-color: #2196F3;
color: white;
text-align: center;
}
</ style >
</ head >
< body >
< h1 style = "color: green;" >GeeksforGeeks ! </ h1 >
< table >
< thead >
< tr >
< th >Group 1</ th >
< th >Group 2</ th >
< th >Group 3</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td colspan = "3" >
< strong >Section 1</ strong >
</ td >
</ tr >
< tr >
< td >Row 1, Column 1</ td >
< td >Row 1, Column 2</ td >
< td >Row 1, Column 3</ td >
</ tr >
< tr >
< td >Row 2, Column 1</ td >
< td >Row 2, Column 2</ td >
< td >Row 2, Column 3</ td >
</ tr >
< tr >
< td colspan = "3" >
< strong >Section 2</ strong >
</ td >
</ tr >
< tr >
< td >Row 3, Column 1</ td >
< td >Row 3, Column 2</ td >
< td >Row 3, Column 3</ td >
</ tr >
< tr >
< td >Row 4, Column 1</ td >
< td >Row 4, Column 2</ td >
< td >Row 4, Column 3</ td >
</ tr >
</ tbody >
</ table >
</ body >
</ html >
|
Description: The table has a basic structure with a thead element containing the column headers, and a tbody element containing the data rows. The first column of each row is grouped into sections using the colspan attribute on the td element. The th and td elements have some basic styling to provide padding, alignment, and border. The th elements have a background color of green and white text color, while the td elements have a background color of light gray.
Output:
Supported Browsers are listed below:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Last Updated :
20 Mar, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...