Complex Table Toolbar
On this page:
Introduction
This toolbar is an add-on to FireFox which can be used to:
- Reveal 'headers' and 'id' complex data table mark-up.
- Create such mark-up either manually or automatically.
- Create a linear version of the data table content.
The following image is an example screenshot of toolbar in action: when a cell is hovered over, the associated header cells are highlighted and the code of the cell is highlighted in the code window; revealing the generated complex mark-up:
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 mark-up (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 "noCSS" 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 "genMarkup" command to create complex table mark-up and header cells from scratch. This creates complex table mark-up 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".
The table below is included to demonstrate how the automatic mark-up 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 "genMarkup" on the toolbar 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 "code" to open the code window.
Note that the automatic mark-up function only produces the correct result for tables that are structured in a similare way to the above tables. For tables which are structured differently, the manual mark up functions can be used.
Manual Mark Up
Creating Header Cells or Data Cells
Highlight cells then run the
"th" command to create header cells from data cells.
"td" command to create data cells from header cells.
Associating Cells with a Header Cell
Highlight cells, select a header cell by double-clicking it, then run the "asc" 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 "un-asc" command. This removes all "headers", "scope" and "axis" attributes from the cells.
Creating a Linear (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 linear 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 mark-up. This is done by using headings to implement the structure. Headings are 'h#' elements (for example 'h1') which can be used in most parts of a web page whereas table header cells ('th' elements) are for use in tables only.
To create a linear version of a table, select the table, create headers cells and complex mark-up either automatically or manually, check that the mark-up is correct, then run the "genLin" command.
The following example shows part of the the linear 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.
Row 1. 25-Aug-97, San Jose.
Cell 1. Dinner, Meals.
Cell 2. Other, Meals.
Cell 3. Seedy, Hotels.
Cell 4. Upmarket, Hotels.
Cell 5. Cab, Transport.
Cell 6. Bus, Transport.
Row 2. 26-Aug-97, San Jose.
Cell 1. Dinner, Meals.
Cell 2. Other, Meals.
Cell 3. Seedy, Hotels.
Cell 4. Upmarket, Hotels.
Cell 5. Cab, Transport.
Cell 6. Bus, Transport.
Row 3. subtotals, San Jose.
Cell 1. Dinner, Meals.
Cell 2. Other, Meals.
Cell 3. Seedy, Hotels.
Cell 4. Upmarket, Hotels.
Cell 5. Cab, Transport.
Cell 6. Bus, Transport.
Cell 7. Totals.
Viewing and Saving Code
Run the "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 "unsel" command to remove the light blue background and to remove empty "class" attributes from the current table.
- go "File", "Save Page As..." - "Web Page, complete".
Accessibility
Please note that simple data tables are more accessible than complex data tables and that badly structured or marked up complex tables are not accessible.
Simple tables rather than complex tables should be implemented whenever possible, and when complex tables are used, please ensure that structure and mark-up is sound.
Algorithm for Automatic Mark Up
The algorithm works in principle like this for the first example table:
- An empty cell contains either nothing, a space or a non-breaking 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.
Toolbar Installation
To install the toolbar, download the setup file (comtab.zip). The zip file contains a single file "comtab.xpi". Unzip this file to the desktop, start up Firefox, drag comtab.xpi into the main window area of Firefox and let Firefox restart. You can now use the toolbar on any table on any web page.
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.
This work is licensed under a Creative Commons License.
Complex Table Tutorials
- Accessible Data Tables - web usability
- Creating Accessible Tables - WebAim
- Accessible Tables - Jim Thatcher
- Bring on the tables - 456 Berea St
- Techniques for Accessible HTML Tables - Stephen Ferg
About Complex Table Toolbar
Complex Table Toolbar was developed by Pierre Frederiksen: pierre.frederiksen@visionaustralia.org
Version 1.8.1
Credit
Created by Pierre Frederiksen pierre.frederiksen@visionaustralia.org. Pierre is a Web Accessibility Consultant at Vision Australia.
Thanks to Josh Crawford joshua.crawford@visionaustralia.org for great suggestions. Josh is an Online Accessibility Consultant at Vision Australia.
Specialists in web accessibility, the Web Accessibility team provide consultancy, training and testing services to help customers make their online services accessible to all. They work with customers from initial design through to application build and ongoing quality assurance.
Read more about how we can help you reach a wider audience and improve your bottom line with our Web Accessibility Services.
Other accessibility tools
This page last updated: 28 May 2010