Open In App

How to group the body content in a table using HTML5 ?

Last Updated : 20 Mar, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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


Previous Article
Next Article

Similar Reads

How to group header content of a table using HTML5 ?
In this article, we define to group the header content in a table by using the &lt;th&gt; tag in HTML to set the header cell of a table. Two types of cells in an HTML table. Header Cell: It is used to hold the header information. Standard Cell: It is used to hold the body of data. The working of both tags (&lt;th&gt; and &lt;td&gt;) are same but th
1 min read
How to create table with 100% width, with vertical scroll inside table body in HTML ?
This article explains how to create a table with a 100% width using the `width` property. To add a vertical scroll bar inside the table body, use the `overflow-y` property. By changing the `display` property of `tbody` to `block`, we can display the block level element. However, when changing the `display` property of `tbody`, we must also change t
2 min read
How to group footer content in form of table using HTML ?
In this article, we define the group of footer content in a table by using the &lt;tfoot&gt; tag in HTML. It is used in HTML table with header and body which is known as “thead” and “tbody”. &lt;tfoot&gt; tag is child tag of table and parent tag of &lt;tr&gt; and &lt;td&gt;. Syntax: &lt;tfoot&gt; // Table footer contents... &lt;/tfoot&gt; Example:
1 min read
How to define the document's body in HTML5 ?
The document's body in HTML5 is defined by the &lt;body&gt; tag which is placed with in the &lt;html&gt; tags and just after the &lt;head&gt; tag.The body tag can include: headings tags : &lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt; and so on.paragraph tag: &lt;p&gt;line break tag: &lt;br&gt;horizontal rule tag: &lt;hr&gt;image and video tags: &lt;img&gt;
1 min read
How to get all HTML content from DOMParser excluding the outer body tag ?
DOM (Document Object Model) allows us to dynamically access and manipulate the HTML data. All the text data from an HTML file can also be extracted using DOMParser. DOM parser returns an HTML/XML/SVG object. All the objects can be accessed using the [ ] operator in javascript. The HTML DOM Tree of objects: Steps to get all the text from an HTML doc
3 min read
Primer CSS Body Content Utilities
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
How to group elements in first table column with bootstrap-table ?
Bootstrap is a front-end framework that is used for developing responsive and mobile-first websites. It is an open-source collection of tools that includes HTML and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as JavaScript plugins for transitions, modals, and other interactive featu
4 min read
How to create a table with fixed header and scrollable body ?
The purpose of this article is to create a table with a fixed header and scrollable body. We can create such a table with either of the two approaches. By setting the position property to “sticky” and specifying "0" as a value of the top property for the &lt;th&gt; element.By setting the display to "block" for both &lt;thead&gt; and &lt;tbody&gt; e
2 min read
How to Add Vertical Scrollbar to React-Bootstrap Table Body ?
React Bootstrap is a popular library that combines the power of React with the styling capabilities of Bootstrap, allowing developers to create elegant and responsive user interfaces effortlessly. When working with tabular data in a web application. In this article, we will walk through the steps to add a vertical scrollbar to the body of a react-b
3 min read
How to display incorrect content using HTML5 ?
In this article, we will display the text that is not correct by using the &lt;s&gt; tag in the document. This tag is similar but slightly different from &lt;del&gt; tag. It is not used to replaced or deletes text but &lt;del&gt; tag is used to replaced or delete the text. Syntax: &lt;s&gt; Contents... &lt;/s&gt; Example 1: &lt;!DOCTYPE html&gt;
1 min read
Article Tags :