Layout Tables

In general, it's not a good idea to use tables for layout. But in some cases, they are the best option. For instance, they solve a lot of Internet Explorer right-to-left display problems when you can't explicitly set a width on an element.

The following classes are available when you need to use a table for layout:

lotusLayout

Assign to the table element. Sets padding to 0, text alignment to left, and vertical alignment to top for each table cell.

lotusvAlignMid

Assign this to an individual td element in the layout table if you want to set vertical alignment to middle.

lotusColumns

Set as an additional class with lotusLayout when you want to use a layout table to set columns within a lotusContent area. (You can optionally use lotusContentCol1 and lotusContentCol2, but that limits you to two columns and is not as precise for setting padding.)

Left and right padding on each column is set to 10px. The first column gets rid of the left padding. The last column gets rid of the right padding. This is done using advanced selectors. You need to use the lotusFirst and lotusLast classes on the appropriate table cells to make this work in Internet Explorer 6 or 7, or just embrace graceful degradation and leave the extra padding there for those two browsers.

The home page uses a lotusColumns layout table.

Accessibility

Assign the ARIA role="presentation" to the table element. Do not include a summary attribute. Do not use table headers (th elements).