Table Simplification - Optimal Content Examples

Table Of Contents

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