Aligning a Cell's Contents

By default, a cell's contents are aligned two ways: horizontally to the left and vertically in the middle. When you're designing a liquid layout, in which cells should stretch out over an extended browser window, it's particularly important to specify where things should be aligned.

Tips

The default value for align is left. The default for valign is middle.
Although the align attribute has been deprecated for other properties, it is still valid for all table elements (except table itself). The valign attribute is also still valid. Both are well supported.
CSS properties text-align and vertical-align are also very well supported.
You can align all of the cells in a row by applying the text-align or vertical-align property to (or inserting the align or valign attribute in) the tr tag.

Figure 16.33. Immediately obvious are the left navigation bar, which now sits at the top of its cell, and the caption below the elephant, which is nicely centered.

[View full size image]
Theoretically, you can align the contents with respect to any character you choose, for example to align monetary amounts with respect to the decimal point. In the (X)HTML, you'd use align="char" char="x", where x is the character around which to align. In CSS, use text-align:x, again, where x is the desired alignment character. Unfortunately, no browser I've seen supports either method.

Figure 16.34. Notice how the middle cell in the top row stays centered even though the window is wider. Perhaps more important, the right-hand cell (with the lion) stays aligned to the right, flush with the elephant picture and the rest of the text.

[View full size image]
The baseline value aligns the contents of each cell with the baseline of the first line of text that it contains. Baseline is the same as top when there are several lines of text and no images. Baseline is the same as bottom when the cells contain both images and text.
The vertical-align property accepts a few other values (like text-top, text-bottom, sub, and sup) but these don't make sense with table cells, and so baseline is used in their place.
For more information about text-align, see page 165. For more on vertical-align, see page 188.

Aligning a Cell's Contents

Figure 16.31. We need the middle image in the logo bar to stay centered and the right image to stay to the right regardless of the browser window size. The left navigation items should be at the top of their cell, not the middle, which is the default.

Figure 16.32. For the caption to the elephant photograph and the left navigation bar, I just added the alignment properties to the existing classes. For the other cells, I had to create special classes to do the alignment (which frankly, seems like a bit of trouble).

Figure 16.33. Immediately obvious are the left navigation bar, which now sits at the top of its cell, and the caption below the elephant, which is nicely centered.

Figure 16.34. Notice how the middle cell in the top row stays centered even though the window is wider. Perhaps more important, the right-hand cell (with the lion) stays aligned to the right, flush with the elephant picture and the rest of the text.