- Skip to main content
- Skip to footer

# Defining a Data Column Group in a Data Table

## Attention: Since WET 3.0.2

The default behaviour regarding the subsequent group has been changed because of backward compatibility issue and because of some use case. See the Test File 1 and the Test File 2 for examples.

## Note: Table Source Code Example

Id/Headers attribute, colgroup element and col element was omited intentionally for clarity.

## Technique Author

Name: Pierre Dubois

## Technique Information

### Technology

HTML and XHTML Techniques

### Guidelines Reference

Success Criterion 1.3.1 (Info and Relationships)

### Technique Title

Defining a Data Column Group in a Data Table

### Applicability

Use for data tables when the table contain a data column.

### User Agent Issues

Not Available

### Description of Technique

The objective of this technique is to define a relationship between the colgroup element and the data cell in the table.

If the table contain an header column group, the second next colgroup is considerated as a data column group.

If the table don't have an header column group, the first colgroup is considerated as a data column group.

When the table don't have column header cell, Each colgroup is a data column group except for the first one if there a presence of a row header cell. When the table is on the "hassum" mode, this allow to have summary column group when the table have columns header cell.

## Examples

### Table 1

Table 1
Col Header | Col Header | Col Header | Col Header | Col Header
--- | --- | --- | --- | ---
Row Header | Data | Data | Data | Data
Row Header | Data | Data | Data | Data
Row Header | Data | Data | Data | Data

Table Source Code

    <table class="wet-boew-zebra">
    	<caption>Table 1</caption>
    	<colgroup>
    		<col />
    	</colgroup>
    	<colgroup>
    		<col />
    		<col />
    		<col />
    		<col />
    	</colgroup>
    	<thead>
    		<tr>
    			<th>Col Header</th>
    			<th>Col Header</th>
    			<th>Col Header</th>
    			<th>Col Header</th>
    			<th>Col Header</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    	</tbody>
    </table>

### Table 2

Table 2
Row Header | Data | Data | Data | Data | Data | Data
Row Header | Data | Data | Data | Data | Data | Data
Row Header | Data | Data | Data | Data | Data | Data

Table Source Code

    <table class="wet-boew-zebra">
    	<caption>Table 2</caption>
    	<colgroup>
    		<col />
    	</colgroup>
    	<colgroup>
    		<col />
    		<col />
    		<col />
    	</colgroup>
    	<colgroup>
    		<col />
    		<col />
    		<col />
    	</colgroup>
    	<tbody>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    	</tbody>
    </table>

### Table 3

Table 3
Data | Data | Data | Data | Data | Data | Data
Data | Data | Data | Data | Data | Data | Data
Data | Data | Data | Data | Data | Data | Data

Table Source Code

    <table class="wet-boew-zebra">
    	<caption>Table 3</caption>
    	<colgroup>
    		<col />
    	</colgroup>
    	<colgroup>
    		<col />
    		<col />
    		<col />
    	</colgroup>
    	<colgroup>
    		<col />
    		<col />
    		<col />
    	</colgroup>
    	<tbody>
    		<tr>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    		<tr>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    		<tr>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    	</tbody>
    </table>

## Resources

- HTML Table Validator (With ids/headers/aria-describedby auto assignation)
- About the Table Usability Concept
- Extended definition of HTML5 table elements
- All the resources

## Related Techniques

- H51: Using table markup to present tabular information
- H39: Using caption elements to associate data table captions with data tables
- H73: Using the summary attribute of the table element to give an overview of data tables
- H63: Using the scope attribute to associate header cells and data cells in data tables
- H43: Using id and headers attributes to associate data cells with header cells in data tables
- H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
- F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content
- F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized
- F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
- G57: Ordering the content in a meaningful sequence

## Test

### Procedure

1. If the table contain a data, check if there are defined also with the a colgroup element.

### Expected Result

- #1 is true

### Test File 1

This Test File 1 pass this technique

Table 4
Col Header | Col Header | Col Header | Col Header | Col Header
--- | --- | --- | --- | ---
Row Header | Data | Data | Data | Data
Row Header | Data | Data | Data | Data
Row Header | Data | Data | Data | Data

Table Source Code

    <table class="wet-boew-zebra">
    	<caption>Table 4</caption>
    	<colgroup>
    		<col>
    	</colgroup>
    	<colgroup>
    		<col>
    		<col>
    	</colgroup>
    	<colgroup>
    		<col>
    		<col>
    	</colgroup>
    	<thead>
    		<tr>
    			<th>Col Header</th>
    			<th>Col Header</th>
    			<th>Col Header</th>
    			<th>Col Header</th>
    			<th>Col Header</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    	</tbody>
    </table>

### Test File 2

This Test File 2 pass this technique

Table 5
Col Header | Col Header | Col Header
--- | --- | ---
Col Header | Col Header | Col Header | Col Header
Row Header | Data | Data | Data | Data
Row Header | Data | Data | Data | Data
Row Header | Data | Data | Data | Data

Table Source Code

    <table class="wet-boew-zebra">
    	<caption>Table 5</caption>
    	<colgroup>
    		<col>
    	</colgroup>
    	<colgroup>
    		<col>
    		<col>
    	</colgroup>
    	<colgroup>
    		<col>
    		<col>
    	</colgroup>
    	<thead>
    		<tr>
    			<th rowspan="2">Col Header</th>
    			<th colspan="2">Col Header</th>
    			<th colspan="2">Col Header</th>
    		</tr>
    		<tr>
    			<th>Col Header</th>
    			<th>Col Header</th>
    			<th>Col Header</th>
    			<th>Col Header</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    		<tr>
    			<th>Row Header</th>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    			<td>Data</td>
    		</tr>
    	</tbody>
    </table>

Date modified:
  2013-04-11