Table Formatting
Tables create rows and columns of cells in which you may place information.
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 pretty good job
of determining the correct way to display the table on its own. There are
two exceptions to this rule:
- You can use WIDTH="100%" on the table itself to
ensure that the table fills the entire page.
- 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.