Complex Data Table Markup Toolbar

The Complex Data Table Markup Toolbar was developed by Pierre Frederiksen from Vision Australia. The toolbar is an add-on to FireFox which can be used to:

  1. Reveal 'headers' and 'id' complex data table markup
  2. Generate 'headers and 'id' markup automatically or manually
  3. Create a text version of the data table

Download Complex Data Table Markup Toolbar - updated 20 April 16

What is the Complex Data Table Markup Toolbar?

The Toolbar enables you to quickly markup complex data tables. When a cell is hovered over using the toolbar the associated header cells are highlighted and the code of the cell is highlighted in the code window, revealing the generated complex markup.

Complex data table. The table has merged cells in the top row and therefore the second row also contains column headers, for example the cell 'Meals' in the top row spans the cells 'Dinner' and 'Other' in the second row. The cursor is hovered over a data cell in the table and this highlights the corresponding row and column headers.

Dialog showing the HTML of the complex data table. The code of the data cell that is hovered over in the previous image is highlighted. The data cell contains a 'headers' attribute with the value 'br1 br4 bc4 bc6'

Toolbar functions

Icon Command
Activate Activate page for use
Generate Generate complex markup
Header cells Header cells - make highlighted cells header cells
Data cells Data cells - make highlighted cells data cells
Associate Associate highlighted cells with double-clicked header cell
Unassociate Unassociate highlighted cells with all header cells
View code View code
Disable CSS Disable CSS and show cell borders
Unselect table Unselect table and remove toolbar styling
Text version Text version of table (new window)
Help Help (new window)

Using the Toolbar

  • Click the "Activate" button to prepare the page for use.
  • Click a data table. This applies a light blue background to the table and enables you to explore the markup (by hovering the cursor over cells) and to execute commands on the table.

Data cells are shown as green and header cells are shown as blue on mouse hover. Header cells associated with the current cell are shown in blue with numbers indicating their order in the "headers" attribute of the current cell.

Cells can be highlighted by hovering over the first cell, pressing the Control key, moving the cursor to the last cell and releasing the Control key (no need to drag the mouse - just hover). Highlighted cells are indicated with a gray colour.

When working with tables that already contain colours or background images, it can be difficult to see the highlights which the toolbar create. Clicking the "Disable CSS" button disables all existing CSS and can help to see the highlighting created by the toolbar.

Automatic Mark Up

Select a table by clicking it, then run the "Generate" command to create complex table markup and header cells from scratch. This creates complex table markup for neatly structured tables as in the example below. Note that an empty row needs to be inserted before the "Totals" row to ensure that "Totals" is not a sub-header of "Seattle".


Meals Hotels Transport Totals

Dinner Other Seedy Upmarket Cab Bus
San Jose






25-Aug-97 25.00 10.00 12.00 100.00 25.00 20.00
26-Aug-97 20.00 7.00 52.00 60.00 45.00 0.00
subtotals 45.00 17.00 64.00 160.00 70.00 20.00 379.00
Seattle






27-Aug-97 60.00 36.00 59.00 50.00 36.00 0.00
28-Aug-97 30.00 5.00 100.00 9.00 36.00 0.00
subtotals 90.00 41.00 159.00 59.00 72.00 0.00 421.00

total 135.00 58.00 223.00 219.00 142.00 20.00 800.00

The table below is included to demonstrate how the automatic markup handles several levels of row and column header cells: Install the toolbar on your Firefox, click "Activate" on the toolbar, click the table and hover the mouse over it so see which cells are data cells (green) and which are header cells (blue). Click "Generate" to generate the complex mark up and hover the mouse over cells to view associated header cells. The table code can be inspected by clicking "View code" to open the code dialog.

Location Time Animal
Year Season Mammal Reptile
Large Small Large Small
Whales Bears Anteaters Mice Alligators Crocodiles Snakes Turtles
Oceania
Australia

2005

Summer 155 155 155 155 155 155 155 155
Winter 155 155 155 155 155 155 155 155
2004 Summer 155 155 155 155 155 155 155 155
Winter 155 155 155 395 155 155 155 155
Europe
Iceland 2005 Summer 155 155 155 155 155 155 155 155
Winter 155 155 155 155 155 155 155 155
2004 Summer 155 155 155 155 155 155 155 155
Winter 155 155 155 155 155 155 155 155

Note that the automatic markup function only produces the correct result for tables that are structured in a similar way to the above tables. For tables which are structured differently, the manual markup functions can be used.

Manual Markup

Creating Header Cells or Data Cells

Highlight cells then run the "Header cells" command to create header cells or run the "Data cells" command to create data cells.

Associating Cells with a Header Cell

Highlight cells, select a header cell by double-clicking it, then run the "Associate" command.
This places the id of the header cell in the "headers" attribute of the cells (attributes are created if they do not already exist). It also places the contents of header cell's own "headers" attribute (if any) in the "headers" attribute of the cells.
This means that associations transfer, for example: if header cell A is header for header cell B and header cell B is made header for data cell D, then both header cell A and B will be headers for data cell D (the id of both header cells will be in the "headers" attribute of the data cell).

Clearing Associations of Cells

Highlight cells, then run the "Unassociate" command. This removes all "headers", "scope" and "axis" attributes from the cells.

Creating a Text Version

Even when a data table is correctly marked up, there is no guarantee that all screen reader software will be able to correctly interpret the table. Providing a text version of the table content in addition to the marked up table ensures that screen reader users can can access the table data and table header cells in a format which does not depend on any table markup. This is done by using headings (<h1>, <h2>, <h3> and <h4> elements).

To create a linear version of a table, select the table, create headers cells and complex markup either automatically or manually, check that the markup is correct, then run the "Text version" command.

The following example shows part of the the text version (first 3 rows containing data cells) of the first example table. Note that the header cells are listed in reverse order to ensure that header cells which change from row to row and from column to column are first in the listing. This makes it easier for screen reader users as the important information (the information which is specific to a row or column) is announced first.

25-Aug-97, San Jose. Row 1

Dinner, Meals.Cell 1

27.00

Other, Meals.Cell 2

10.00

Seedy, Hotels.Cell 3

12.00

Upmarket, Hotels. Cell 4

100.00

Cab, Transport.Cell 5

25.00

Bus, Transport. Cell 6

20.00

26-Aug-97, San Jose. Row 2

Dinner, Meals. Cell 1

20.00

Other, Meals. Cell 2

7.00

Seedy, Hotels. Cell 3

52.00

Upmarket, Hotels. Cell 4

60.00

Cab, Transport. Cell 5

45.00

Bus, Transport. Cell 6

0.00

subtotals, San Jose. Row 3

Dinner, Meals. Cell 1

45.00

Other, Meals. Cell 2

17.00

Seedy, Hotels. Cell 3

64.00

Upmarket, Hotels. Cell 4

160.00

Cab, Transport. Cell 5

70.00

Bus, Transport. Cell 6

20.00

Totals. Cell 7

379.00

Viewing and Saving Code

Run the "View code" command to view the generated code for the current table.

To save the generated code for the whole page (when all tables have been marked up):

  • Run the "Unselect" command to remove the light blue background and to remove empty "class" attributes from the current table
  • Press F12 to open a code inspector and copy the table code. Alternatively, go "File", "Save Page As..." - "Web Page, complete".

Algorithm for Automatic Mark Up

The algorithm works in principle like this for the first example table:

  • An empty cell contains only white space
  • An empty row consists of empty cells only
  • A super row header is a row in witch the left-most cell is non-empty and all other cells empty (this includes a non-empty cell spanning the entire row)

First Column

Algo starts at top of column 1 and goes downwards, stopping at the first non-empty cell:

  • If the cell is a super row header, the cell is made header for all cells below, until a super row header or an empty row is encountered
  • If the cell is not a super row header, it is made header cell for the entire column if other header cells exist in the same row. If no header cells exist in the same row, the cell is made header cell for the current row only

For the remaining cells: super row headers are made headers for all cells below until next super row header or empty row. non-super row headers are made headers for their row only.

Remaining Columns

Non-empty cells in the top row are made column headers. If a cell spans multiple columns, the cells below are made column headers as well.

Terms of Use

Complex Table Toolbar is Freeware.

By accessing or using this toolbar, you acknowledge that you have read, understood and agree to be bound by the toolbar terms of use and the Vision Australia Website Terms of Use .

THIS SOFTWARE IS BEING PROVIDED "AS IS", WITHOUT ANY EXPRESS OR IMPLIED WARRANTY. IN PARTICULAR, VISION AUSTRALIA DOES NOT MAKE ANY REPRESENTATION OR WARRANTY OF ANY KIND CONCERNING THE RELIABILITY, QUALITY, OR MERCHANTABILITY OF THIS SOFTWARE OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. ADDITIONALLY, VISION AUSTRALIA DOES NOT GUARANTEE THAT USE OF THIS SOFTWARE WILL ENSURE THE ACCESSIBILITY OF YOUR WEB CONTENT OR THAT YOUR WEB CONTENT WILL COMPLY WITH ANY SPECIFIC WEB ACCESSIBILITY STANDARD.

Logo of the creative commons licence
This work is licensed under a Creative Commons License







Print Print larger font