- Skip to main content
- Skip to footer

# Table Simplification - Optimal Content Examples

Table Of Contents

- Introduction
- Content Examples

## Introduction

Table simplification is the process of converting a complex table into a simple table. A simple table is a table with every cell spanning exactly one row and one column.

Complex tables associate more than one row `<th>` header cell or more than one `<th>` column header cell to a data cell.

The process of table simplification involves splitting a complex table into multiple simple tables. `<th>` header cells, used for creating grouping relationships or levels within a table, are transferred to other HTML markup such as `<h1>`-`<h6>` headings.

### General Technique

To divide a complex table into multiple simple tables, follow these steps:

1. Locate a complex table

   See Example

   H01 | H02 | H03 | H04
   --- | --- | --- | ---
   H05 | H06 | H07 | H08 | H09 | H10
   H11 | H12 | D01 | D02 | D03
   D04 | D05 | D06 | D07
   D08 | D09 | D10
   H13 | D11 | D12 | D13
   D14 | D15 | D16
   D17 | D18 | D19

2. For `<td>` data cells that span more than one row or column, split them to remove all row and column spanning. Duplicate the original cell's contents in all of its splitted cells.

   See Example

   Cells indicated with an asterisk (*) have changed from the previous step.

   H01 | H02 | H03 | H04
   --- | --- | --- | ---
   H05 | H06 | H07 | H08 | H09 | H10
   H11 | H12 | D01 | D02 * | D02 * | D03
   D04 | D05 * | D06 | D07
   D08 | D05 * | D09 | D10 *
   H13 | D11 | D12 | D13 | D10 *
   D14 | D15 | D13 * | D16
   D17 * | D17 * | D18 | D19

3. Merge consecutive `<th>` header cells into a comma seperated list.

   See Example

   Cells indicated with an asterisk (*) have changed from the previous step.

   H01, H02, H05, H06 * | H03, H07 * | H03, H08 * | H04, H09 * | H04, H10 *
   --- | --- | --- | --- | ---
   H11, H12 * | D01 | D02 | D02 | D03
   D04 | D05 | D06 | D07
   D08 | D05 | D09 | D10
   H11, H13 * | D11 | D12 | D13 | D10
   D14 | D15 | D13 | D16
   D17 | D17 | D18 | D19

4. Remove `<th>` header cell information from any cell whose entire row and column are also `<th>` header cells (often the top left most cell). Save the information in these affected cells for future steps.

   See Example

   Cells indicated with an asterisk (*) have changed from the previous step.

   * | H03, H07 | H03, H08 | H04, H09 | H04, H10
   H11, H12 | D01 | D02 | D02 | D03
   D04 | D05 | D06 | D07
   D08 | D05 | D09 | D10
   H11, H13 | D11 | D12 | D13 | D10
   D14 | D15 | D13 | D16
   D17 | D17 | D18 | D19

5. Split the table into multiple subtables. The most logical place to split a table is often along those borders that spans either the entire width or height of the table. If a subtable is still a complex table, split it again by repeating this step on that subtable.

   See Example

   | H03, H07 | H03, H08
   H11,H12 | D01 | D02
   D04 | D05
   D08 | D05

   H04, H09 | H04, H10
   --- | ---
   D02 | D03
   D06 | D07
   D09 | D10

   H11,H13 | D11 | D12
   D14 | D15
   D17 | D17

   D13 | D10
   D13 | D16
   D18 | D19

6. Insert any missing `<th>` header cells into the subtables as a result of the table splitting.

   See Example

   Cells indicated with an asterisk (*) have changed from the previous step.

   | H03, H07 | H03, H08
   H11,H12 | D01 | D02
   D04 | D05
   D08 | D05

   | H04, H09 | H04, H10
   H11,H12 * | D02 | D03
   D06 | D07
   D09 | D10

   | H03, H07 * | H03, H08 *
   H11,H13 | D11 | D12
   D14 | D15
   D17 | D17

   | H04, H09 * | H04, H10 *
   H11,H13 * | D13 | D10
   D13 | D16
   D18 | D19

7. To reduce the number of subtables, join and group them by common headers using `<h1>`-`<h6>` headings. Re-use the header information in Step 4 to add additional description and context as needed.

   See Example

   ##### H01

   H11

   ###### H03

## Content Examples

### Column Spans

| H01 | H02 | H03 | H04
| H03 | H04 | H05 | H06 | H07 | H08 | H09 | H10
H11 | D01 | D02 | D03 | D04 | D05 | D06 | D07 | D08
H12 | D09 | D10 | D11 | D12
H13 | D13
H14 | D14

Simple Version

| H03 | H04 | H05 | H06 | H07 | H08 | H09 | H10
H11 | D01 | D02 | D03 | D04 | D05 | D06 | D07 | D08

| H01 | H02 | H03 | H04
H12 | D09 | D10 | D11 | D12

H13 | D13
H14 | D14

### Row Spans

H01 | H02 | H03 | H04
--- | --- | --- | ---
H03 | D01 | D02 | D03
D04 | D05
D06 | D07
H04 | D08 | D09 | D10
D11 | D12
D13 | D14

Simple Version

#### H01

##### H03

H02: D01

H03 | H04
--- | ---
D02 | D03
D04 | D05
D06 | D07

##### H04

H02: D08

H03 | H04
--- | ---
D09 | D10
D11 | D12
D13 | D14

### Row Groups

| H01 | H02
H03
H04
D01 | D02 | D03
D04 | D05 | D06
H05
D07 | D08 | D09
D10 | D11 | D12
H06
H07
D13 | D14 | D15
D16 | D17 | D18
H08
D19 | D20 | D21
D22 | D23 | D24

Simple Version

#### H03

##### H04

| H01 | H02
D01 | D02 | D03
D04 | D05 | D06

##### H05

| H01 | H02
D07 | D08 | D09
D10 | D11 | D12

#### H06

##### H07

| H01 | H02
D13 | D14 | D15
D16 | D17 | D18

##### H08

| H01 | H02
D19 | D20 | D21
D22 | D23 | D24

### Column and Row Spans

H01 | H02 | H03 | H04
--- | --- | --- | ---
H05 | H06 | H07 | H08 | H09 | H10
H11 | D01 | D02 | D03 | D04
D05 | D06 | D07 | D08
D09 | D10 | D11
H12 | D12 | D13 | D14 | D15
D16 | D17 | D18
D19 | D20 | D21

Simple Version

##### H01, H05

###### H11

H02, H06: D01

H03, H07 | H03, H08 | H04, H09 | H04, H10
--- | --- | --- | ---
D02 | D03 | D03 | D04
D05 | D06 | D07 | D08
D09 | D06 | D10 | D11

##### H12

H02, H06: D12

H03, H07 | H03, H08 | H04, H09 | H04, H10
--- | --- | --- | ---
D13 | D14 | D15 | D11
D16 | D17 | D15 | D18
D19 | D19 | D20 | D21

## Related Links

- Tables - Optimal Content Examples

- Web Content Accessibility Guidelines (WCAG) 2.0 Success Criterions

  - 1.3.1 Info and Relationships
  - 1.4.1 Use Of Color

- Web Content Accessibility Guidelines (WCAG) 2.0 Sufficient Techniques

  - H51: Using table markup to present tabular information
  - H39: Using caption elements to associate data table captions with 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

Date modified:
  2013-04-11