Cross-Browser Layout Techniques - Beginning CSS3 - page 273

■ IE 6 handles this layout with surprising equanimity. The only adjustments it needs are a fixed width for the
wrapper<div > and an empty <div > to clear the footer. you can examine the details in threecol.html.

Note

Using CSS Table Display for Layout
The reason HTML tables were so widely used—misused, some would say—for page layout is because table
cells automatically expand to the height of the tallest cell in a row and the width of the widest cell in a column.
This made it easy to keep elements in alignment, but it also led to fiendishly complex structures, with tables
nested inside tables. Using the table-related values of the CSS display property allows you to reap the alignment
benefits of table layout without resorting to HTML tables. However, it's not a perfect solution. If you're not
careful, there's a danger of creating a complex structure that has all the accessibility problems associated with
HTML table layouts. I've seen examples of pages that use dozens of <div> elements with tablerow and tablecell
classes. It would have been much simpler to use <tr> and <td> tags, and give up the pretence of using CSS.
Used correctly, CSS table display gives you the best of both worlds by allowing ordinary HTML elements to
act like table rows and cells. Although it can be used for page layout, it's also suited to aligning form elements
horizontally and vertically.

■ CSS table layout is supported by all mainstream browsers in widespread use, including IE 8 and later.
none of the examples in the rest of this chapter work in IE 6 or IE 7. References to “all browsers” mean “all browsers
in widespread use except IE 6 and IE 7.”

Note

Table 12-1 lists the table-related values of the display property, together with their HTML equivalent and
meaning.

Table 12-1. Table-related Values of the display Property
Value HTML Equivalent Description

table <table>

Makes the element act like an HTML table. Child elements are
treated as table rows and/or cells.

inline-table <table>

Same as table , but the element is displayed as an inline block.

table-row <tr>

Makes the element act like a table row. Child elements are
treated as table cells.

table-row-group <tbody>

Makes the element act as a group of one or more table rows.

table-header-group <thead>

Makes the element act as a table header.

table-footer-group <tfoot>

Makes the element act as a table footer.

table-column <col>

Used internally by browsers to hide <col> elements.

table-column-group <colgroup>

Used internally by browsers to hide <colgroup> elements.

table-cell <td>

Makes the element act as a table cell.

table-caption <caption>

Makes the element act as a table caption.