Column and Row Groups: Advanced Table Design

For complex data sets, standard table structures may be insufficient to convey relationships between cells. Use column groups (<colgroup>) and row groups (rowgroup) to create clear, accessible associations for users of assistive technology.

Column Groups

Use column groups when a single header category needs to span several adjacent columns.

Caption
	Group		Group
Header	Header	Header	Header	Header
Header	Data	Data	Data	Data
Header	Data	Data	Data	Data
Header	Data	Data	Data	Data

The essential markup for a column group includes two key parts:

Column Definition: Place <colgroup> and <col> elements after the <caption> to define the column layout.
Header Structure: Use multiple <tr> elements within <thead> to create rows for both grouped and individual column headers.

<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

Similar to column groups, row groups are used to structure complex data. A row group is necessary when a single header cell applies to the data in two or more consecutive rows.

Caption
Group Header	Header	Header	Header
Group	Header	Data	Data
Group	Header	Data	Data
Group	Header	Data	Data
Group	Header	Data	Data

The following example demonstrates the minimum required markup for a table with row groups.

<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>