How to group header content of a table using HTML5?

When displaying data in an HTML table, it is often useful to group the header content of the table to provide more context to the data being displayed. Grouping header content can make it easier for users to understand the relationships between the data and to identify patterns or trends. In this article, we'll discuss several methods for grouping header content in an HTML table using HTML5.

Method 1: Using the <thead> and <th> Elements

The most straightforward way to group header content in an HTML table is to use the <thead> and <th> elements. The <thead> element is used to group the header content of the table, while the <th> element is used to define each header cell within the group. Here's an example −

Example

<table>
   <thead>
      <tr>
      <th colspan="2">Group 1</th>
      <th colspan="2">Group 2</th>
      </tr>
      <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      </tr>
   </thead>
   <tbody>
      <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
      <td>Row 1, Column 4</td>
      </tr>
      <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
      <td>Row 2, Column 4</td>
      </tr>
   </tbody>
</table>

In this example, we've used the <thead> element to group the header content into two separate groups. The first group contains two columns, and the second group contains two columns as well. We've also used the colspan attribute to specify the number of columns each group should span.

Method 2: Using the <colgroup> Element

Another way to group header content in an HTML table is to use the <colgroup> element. The <colgroup> element allows you to group columns together and apply styles or attributes to the entire group. Here's an example −

Example

<table>
   <colgroup span="2"></colgroup>
   <colgroup span="2"></colgroup>
   <thead>
      <tr>
         <th>Column 1</th>
         <th>Column 2</th>
         <th>Column 3</th>
         <th>Column 4</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
         <td>Row 1, Column 3</td>
         <td>Row 1, Column 4</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
         <td>Row 2, Column 4</td>
      </tr>
   </tbody>
</table>

In this example, we've used the <colgroup> element to group the columns into two separate groups. We've used the span attribute to specify the number of columns each group should span.

Method 3: Using CSS

You can also use CSS to group header content in an HTML table. By targeting specific columns or rows, you can apply styles that visually group the content together. Here's an example −

Example

<style>
   table {
      border-collapse: collapse;
   }
   th {
      background-color: #ccc;
      font-weight: bold;
      text-align: center;
   }
   th.group1 {
      background-color: #eee;
   }
   th.group2 {
      background-color: #ddd;
   }
   th.group3 {
      background-color: #ccc;
   }
</style>
<table>
   <thead>
      <tr>
         <th class="group1">Column 1</th>
         <th class="group1">Column 2</th>
         <th class="group2">Column 3</th>
         <th class="group2">Column 4</th>
         <th class="group3">Column 5</th>
         <th class="group3">Column 6</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
         <td>Row 1, Column 3</td>
         <td>Row 1, Column 4</td>
         <td>Row 1, Column 5</td>
         <td>Row 1, Column 6</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
         <td>Row 2, Column 4</td>
         <td>Row 2, Column 5</td>
         <td>Row 2, Column 6</td>
      </tr>
   </tbody>
</table>

In this example, we've used CSS to group the header content by applying different background colors to different columns. We've used the class attribute to target specific columns and apply the appropriate styling.

You can use other CSS properties like border, padding, margin, font-size, font-weight, etc., to visually group the header content in different ways. For example, you can add borders to specific columns or rows, adjust the font size or weight, or add padding or margins to create visual separation between the groups.

Overall, using CSS to group header content in an HTML table gives you more flexibility in terms of styling and design. You can create visually appealing and engaging tables that improve the user experience and make the content easier to read and understand.

Adding Styling to Grouped Headers using CSS

Once you've grouped the headers using one of the methods described above, you can use CSS to apply styling to the groups. For example, you can add a background color, change the font size, or add borders around the groups to make them stand out. Here's an example of how you can apply CSS to the <colgroup> element to style the grouped headers −

table {
   border-collapse: collapse;
}

colgroup:first-child {
   background-color: #f5f5f5;
}

colgroup:last-child {
   background-color: #e6e6e6;
}

th {
   padding: 10px;
   border: 1px solid #ccc;
}

In this example, we've added a gray background color to the first group of headers and a lighter gray color to the second group using the :first-child and :last-child pseudo-selectors. We've also added some padding and a border to the <th> elements to make them stand out.

Adding Tooltips to Grouped Headers

If you have a large number of columns in your table, it may be difficult for users to remember what each column represents. You can add tooltips to the grouped headers to provide users with additional information about each column. Here's an example of how you can add a tooltip to a grouped header.

Example

<table>
   <colgroup span="2"></colgroup>
   <colgroup span="2"></colgroup>
   <thead>
      <tr>
         <th title="Group 1">Column 1</th>
         <th title="Group 1">Column 2</th>
         <th title="Group 2">Column 3</th>
         <th title="Group 2">Column 4</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
         <td>Row 1, Column 3</td>
         <td>Row 1, Column 4</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
         <td>Row 2, Column 4</td>
      </tr>
   </tbody>
</table>

In this example, we've added the title attribute to each <th> element to specify the tooltip text. When a user hovers over a grouped header, the tooltip will be displayed, providing additional information about the column.

Adding Responsiveness to Grouped Headers using CSS

Another important aspect of designing tables with grouped headers is making sure they are responsive. When designing tables for the web, it's important to consider how they will look on different screen sizes and devices. You can use CSS to ensure that your table with grouped headers is responsive.

One way to make your table responsive is by using media queries to adjust the layout of the table at different screen sizes. For example, you could use media queries to adjust the font size, padding, and margins of the table headers to ensure that they are readable and well-spaced on small screens.

Here's an example of how you could use media queries to adjust the layout of a table with grouped headers for small screens −

table {
   width: 100%;
   border-collapse: collapse;
}
th {
   padding: 10px;
   background-color: #ddd;
   border: 1px solid #ccc;
   font-weight: bold;
   text-align: left;
}
.group1 {
   background-color: #bbb;
}
.group2 {
   background-color: #999;
}
@media (max-width: 768px) {
   th {
      padding: 5px;
      font-size: 0.9em;
   }
   .group1, .group2 {
      display: none;
   }
   .group1-toggle, .group2-toggle {
      display: block;
      padding: 5px;
      background-color: #ddd;
      border: 1px solid #ccc;
      font-weight: bold;
      text-align: center;
      cursor: pointer;
   }
   .group1-toggle i, .group2-toggle i {
      margin-left: 5px;
   }
   .group1-toggle {
      background-color: #bbb;
   }
   .group2-toggle {
      background-color: #999;
   }
   .group1-toggle + .group1-row, .group2-toggle +  .group2-row {
      display: none;
   }
}

In this example, we've used media queries to adjust the layout of the table headers for screens with a maximum width of 768 pixels. When the screen is smaller than 768 pixels, we hide the grouped headers and replace them with toggle buttons that the user can click to expand or collapse the header content. We've also adjusted the font size, padding, and margins of the table headers to ensure that they are readable and well-spaced on small screens.

Conclusion

Grouped headers are an important aspect of designing tables that are easy to read and understand. By grouping related columns together and applying appropriate styles and attributes, you can make your tables more accessible and user-friendly. Whether you're using HTML, CSS, or JavaScript, there are many ways to create tables with grouped headers that are both functional and visually appealing.