Cross-Browser Layout Techniques - Beginning CSS3 - page 282

This exposes a fundamental flaw of CSS table display for page layout. With an HTML table, a cell can span
columns or rows using the colspan and rowspan attributes. But there's no equivalent in CSS. To get the header
to span all three columns, you need to wrap it in a <div> , add two empty elements inside the <div> , and set their
display property to table-cell . Even then, each element is treated as a separate cell. So, you can't have header
content that spans all across the top.
The best solution is an anonymous table sandwiched between two ordinary <div> elements, as in
table-cells_hf.html. It's a simple, elegant way of creating a single row of equal-height columns (see Figure 12-13 ).

■ The CSS3 Flexible Box Layout module, which is covered in Chapter 22, overcomes the shortcomings
of CSS table display for page layout. It not only allows you to create rows and columns, you can change the order in
which elements are displayed—all with CSS. unfortunately, it will be some time before it can be considered a
cross-browser layout technique.

Tip

Using CSS Table Display for Forms
CSS table display is best suited to situations where you need to align elements in columns, such as an online
form. Instead of wrapping the form elements in an HTML table, you can change the default display of paragraphs
and form elements to make them act like rows and cells.

eXerCISe: USING CSS taBLe DISpLaY tO StYLe a FOrM

In this exercise, you'll use CSS table display to style the same form as in Chapter 6. The advantage of using
CSS table display is that the width of the columns adjusts automatically. However, styling a fieldset needs a
slightly unconventional solution, and you need to make some adjustments for Internet Explorer

use form_begin.html and styles/form_begin.css in the ch12 folder as your starting point. The finished files
are form_end.html and styles/form_end.css.

1. Examine the HTML structure of the form. Apart from the radio button group,
which is wrapped in a <fieldset > with a <legend> , all other input elements are
accompanied by a <label> , and are wrapped in paragraphs. This provides a simple
structure that can be mapped to rows and cells. The paragraphs can be used as
rows, while the <label > and input elements represent the individual cells.
2. In the style sheet, set the display property of the form to table :

form {
margin-left: 60px;
display: table;
}

3. Set the display property of the paragraphs and <fieldset > to table-row . use
a descendant selector for the paragraphs. Although there's no other text in the
example page, you don't want to affect paragraphs outside the form.