Table Inspector - Mozilla/Firefox Extension

Tuesday, 18th January 2005

Author: Gez Lemon

Contents

• Writing Mozilla/Firefox Extensions
• Revealing Accessibility Features
• The Extension
• Some Sample Tables

Writing Mozilla/Firefox Extensions

Note: The axis, summary, and scope attributes on a regular table cell are no longer valid in HTML5. This extension still evaluates them, but they are no longer used in this example.

One of the greatest features about Firefox is the fact that anyone can write an extension to improve its functionality. When I created the table inspector, I flippantly mentioned that I considered writing it as a Firefox extension, but decided to write it as a favelet so that it could be used with any browser that supported ECMAScript. I stand by that decision, but the fact that I'd never written a Firefox extension before, or had the faintest idea of how to create one, was also a contributing factor in arriving at that decision. A very good friend of mine wrote to me today, informing me about a Firefox extension they had created. It's a fantastic idea, and I'll write more about it when it's ready for release. Intrigued about the difficulty in creating a Firefox extension, I decided to turn the table inspector into a Firefox extension. Having no idea where to start, a quick search on Google returned a gem of a tutorial by Eric Hamiter; Creating Firefox Extensions. It's a remarkably easy tutorial to follow, and within no time at all, I had created my first Firefox extension.

[Back to the contents]

Revealing Accessibility Features

The extension reveals the following information from complex data tables.

• The summary attribute (rendered above the table)
• The headers attribute
• The axis attribute
• The scope attribute
• The abbr attribute

[Back to the contents]

The Extension

• Table Inspector as a Firefox Extension

[Back to the contents]

Some Sample Tables

To illustrate the favelet, I've borrowed some examples from the W3C. The W3C provide two examples of marking up a table to show the number of cups of coffee consumed by senators. Both examples abbreviate the header cell for Type of Coffee to Type, and both examples render identically in most current browsers. Use the table inspector to investigate the differences in markup.

The first table example uses the headers attribute to bind the table cells to a particular header cell, and the second table example uses the scope attribute to bind table cells to a header cell. The following table is the W3C's example of associating table cells with their headers using the headers attribute.

A more complex table may have table cells associated with more than one heading using a space-separated list of values, and could also explicitly use a scope attribute on the appropriate header cell. The following table is the W3C's example of associating table cells with their headers using the scope attribute on the header cells.

The W3C also provide the following example, which also uses the scope attribute on both td and th elements.

The following is the W3C's example of using the axis attribute to provide a conceptual grouping of table cells. A more complex example could have a comma-separated list of values to provide more than one conceptual grouping for a particular table cell or header cell. This example also makes better use of the headers attribute.

[Back to the contents]

Category: Mozilla/Firefox Extensions.