2 of 3

Write now Article Tools

Page 2 of 2

to understand your content and how each cell relates to other cells.

Again, HTML provides several tags to allow us to explain how our content fits together. Firstly, it is sensible to split your table into the body of the content, the headers, and footers if appropriate. Surround rows that belong to the body of content with the "tbody" tags, the headers with the "thead" tags and the footers with the "tfoot" tags. Within the table head, there should be column headings. To tell browsers which cells are headings, don't add a "h1" or similar, define the cell as a "th" instead of a "td" ("th" can also be used to define a heading for a row in the table).

Now when a screen reader comes to read out your table, it will read the content of the "th" for that column before it reads the contents of the cells. For example, if your table lists people with their name, height and weight, for each row, the screen reader will read out "Name, person's name, height, person's height, weight, person's weight". This makes the information far easier for visually impaired users to understand.

Some tables are more complicated than this, and require "subheadings" that apply to only certain cells in a row or column. In this case, you can give the relevant cells an id, and use the "scope" attribute of the "th" to give it a list of cells which it should be applied to. The "scope" attribute can also be used to tell the browser that the heading applies to the entire row or column.

Another thing you can do to help people understand your data is to give your table a "caption". This should be a brief explanation of the purpose of your table. For example, our table of names, heights and weights is pretty useless unless we know who the people are and why their height and weight is relevant. If we add a caption to the table explaining that the data is the height and weight of all the members of a weight loss group, it makes much more sense. The "caption" tags should be added inside the "table" tags, before any other tags.

There is really nothing else that you need to add to your mark up. Tables coded "the old way" include attributes that define the cell spacing and padding and other such information that is not part of the structure of your data, but rules about how you want the data to look on the page. This should not be included in your mark up at all. It belongs in your style sheet with all the other layout and design information.

If you have followed this advice, your table should now be accessible to everyone who visits your web page and should make a lot more sense. If you need to add content to your table at a later date, for example the weights of the group members at the end of their diets, it should be pretty easy to look back at your markup and see where to add in the extra cells.

If you're still having trouble getting your data to work as a table, perhaps it's because another format would suit it better. A basic table could be better written as a definition list with the "dl", "dt" and "dd" tags, for example. This could be appropriate when the data for each row is related to other data in that row but not really related to any other rows. An even simpler data set could be marked up as a regular list using "ul" or "ol" and "li". Very complex data tables could be simplified by splitting them into two or more simpler tables.

Remember that the goal is to make your data easy to understand, so do what you think would help your visitors the most.

Learn more about this author, Kate Hudson.
Click here to send this author comments or questions.

• << previous page
• 1
• 2

Add your voice

Know something about Web design tips: Best practices for designing tables?
We want to hear your view. Write now!