Tables are flexible and can be used in any combination within the page layout. Follow these simple suggestions to improve the use of tables:
- Optimize the column widths based on the width of the data or content within the columns.
- Use percentages rather than fixed pixel widths or set them to automatically set the size of the columns.
- Avoid inserting a table in the center right column of a four column layout because of the narrow width of the column.
- If the data in your table would leave an excessive amount of white space within a three column layout, use the left center column within a four column layout as an alternative. Note that the left center column is stretchy so the table columns will also change width.
Tables take on the specifications of the page. For example, the text within a table on an End of Tree page will be black. All other pages, the text are dark gray.
Defining the Table Hierarchy
A table can have up to 3 levels of hierarchy, which are described below. The sub headings within the table can use a lighter background color or not, depending on how much emphasis you need for the sections. In this instance, a table title defined within the table header would be redundant, so isn't used within the table.
Table Heading Examples
Single-Heading Table
View the code for this element
Two-level Heading Table
View the code for this element
Alternate-color Table
Depending on your content and the existing elements on your page, you have the option of choosing green or gray for the table headers. Use gray headers if you have more than one table on your pages. Green headers look best if you have only one table on the page. The green header presents a unified look with the green used in the page framework.
View the code for this element
For multiple tables within a page, use the gray headers because they create a more uniform design within the page.
Formatting Table Data to Optimize Readability
Rules separate data horizontally and vertically
Rules separate data horizontally
Data separated by white space
