Table Formatting

Tables create rows and columns of cells in which you may place information, sort of like a spreadsheet. The borders of the table cells may be visible to the end user, or hidden in order to format information on your page into rectangular areas. Adjacent cells can be combined into larger rectangular areas using ROWSPAN and COLSPAN, allowing for very complex formatting possibilities.

For any table or table element, you should not use the WIDTH or HEIGHT attributes to set a fixed width or height for your table. Doing this may make the page flow outside of the template, and may also interfere with accessibility guidelines. The browser will generally do a good job of determining the correct way to display the table on its own. There are two exceptions to this rule:

  1. You can use WIDTH="100%" on the table itself to ensure that the table fills the entire page.
  2. You can use WIDTH="50%" in a table cell, for example, to create evenly-sized columns of data.

If the end user should see the borders of your cells, use BORDER="1" only. Using a larger border size will make your table look strange. In this case, you should also consider setting CELLPADDING="5". This will create space between the data you place in a cell, and the border. Do not use CELLSPACING, as it will not have any effect.

Changing the background colors of a table can be very effective for headings. Our staff page has an example of using THEMEDARKBG for a table row (TR) and THEMELIGHTBG on a table cell (TD).

Although data inside of a table cell can be justified in other ways, use of ALIGN for horizontal alignment and VALIGN for vertical alignment is preferred.

Avoid nested tables wherever possible. Most of the time, a single table will suffice.

Last Updated: December 30, 2010