Column and Row Groups: Advanced Table Designs

A step up from the basic table is to have column and row groups.

Column Groups

There are times where you want to group your headers together, such as in the following example.

The minimum code for creating a column group is below. Note that you first define the columns before the THEAD element, then there will be multiple rows in THEAD.

<table>
   <caption>Caption</caption>
   <col>
   <colgroup span="2"></colgroup>
   <colgroup span="2"></colgroup>
   <thead>
      <tr>
         <td></td>
         <th colspan="2" scope="colgroup">Group</th>
         <th colspan="2" scope="colgroup">Group</th>
      </tr>
      <tr>
         <th scope="col">Header</th>
         <th scope="col">Header</th>
         <th scope="col">Header</th>
         <th scope="col">Header</th>
         <th scope="col">Header</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th scope="row">Header</th>
         <td>Data</td>
         <td>Data</td>
         <td>Data</td>
         <td>Data</td>
      </tr>
      <-- Add Rows and Columns As Necessary -->
   </tbody>
</table>

Row Groups

The same can be achieved with row groups, and you could also extend this to include both header and row groups.

The code is similar to the rowgroup, but even simpler. The minimum code is:

<table>
   <caption>Caption</caption>
   <thead>
      <tr>
         <th scope="col">Group Header</th>
         <th scope="col">Header</th>
         <th scope="col">Header</th>
         <th scope="col">Header</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th rowspan="2" scope="rowgroup">Group</th>
         <th scope="row">Header</th>
         <td>Data</td>
         <td>Data</td>
      </tr>
      <tr>
         <th scope="row">Header</th>
         <td>Data</td>
         <td>Data</td>
      </tr>
      <-- Add Rows and Columns As Necessary -->
   </tbody>
</table>