Aligning Your Table Content | Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)

Another enhancement that you can make to your tables is to adjust the alignment of their content. The align attribute aligns content horizontally, whereas the valign attribute aligns content vertically. The following sections describe how to use these attributes in tables.

DO	DON'T
DO test your tables with various sizes of browser windows to make sure they look OK.	DON'T use tables just to put borders around elements on a page; use CSS.
DO increase the `cellpadding` in your tables to make them more readable.	DON'T use tables just to apply a background color to an element; use CSS instead.
	DON'T use tables format non-tabular data if you can help it.

Table Alignment

By default, tables are displayed on a line by themselves along the left side of the page, with any text above or below the table. However, you can use the align attribute to align tables along the left or right margins and wrap text alongside them the same way you can with images.

align="left" aligns the table along the left margin, and all text following that table is wrapped in the space between that table and the right side of the page. align="right" does the same thing, with the table aligned to the right side of the page.

In the example shown in Figure 8.16, a table that spans 70% of the width of the page is aligned to the left with the following code:

<table border="1" align="left" width="70%">

Figure 8.16. A table with text alongside it.

As you can see from the screenshot, one problem with wrapping text around tables is that HTML has no provision for creating margins that keep the text and the image from jamming right up next to each other. When I discuss CSS in more detail in the next lesson, you'll see that there's a way around these problems.

As with images, you can use the line break element with the clear attribute to stop wrapping text alongside an image. Centering tables is slightly more difficult. Recent browsers support the align="center" attribute in table tags. To ensure backward-compatibility with older browsers, you can use the <center> or <div align="center"> elements (both of which you learned about in Lesson 6, "Formatting Text with HTML and CSS") to center tables on the page. As with other formatting attributes, however, the align attribute (in the <table> tag as well as in <div> and <p>) has been deprecated in HTML 4.01 in favor of style sheets.

Cell Alignment

After you have your rows and cells in place inside your table and the table is properly aligned on the page, you can align the data within each cell for the best effect, based on what your table contains. Several options enable you to align the data within your cells both horizontally and vertically. Figure 8.17 shows a table (a real HTML one!) of the various alignment options.

Figure 8.17. Aligned content within cells.

Horizontal alignment (the align attribute) defines whether the data within a cell is aligned with the left cell margin (left), the right cell margin (right), or centered within the two (center). The one place where the align attribute hasn't been deprecated for XHTML 1.0 is the <td> and <th> tags. It's perfectly okay to use it within your tables.

Vertical alignment (the valign attribute) defines the vertical alignment of the data within the cell: flush with the top of the cell (top), flush with the bottom of the cell (bottom), or vertically centered within the cell (middle). Newer browsers also implement valign="baseline", which is similar to valign="top" except that it aligns the baseline of the first line of text in each cell. (Depending on the contents of the cell, this might or might not produce a different result than align="top".)

By default, heading cells are centered both horizontally and vertically, and data cells are centered vertically but aligned flush left.

You can override the defaults for an entire row by adding the align or valign attributes to the <tr> element, as in the following:

<tr align="center" valign="top">

You can override the row alignment for individual cells by adding align to the <td> or <th> elements:

<tr align="center" valign="top">   <td>14</td>   <td>16</td>   <td align=left>No Data</td>   <td>15</td> </tr>

The following input and output example shows the various cell alignments and how they look (see Figure 8.18):

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Cell Alignments</title> </head> <body> <table border="1" cellpadding="8">   <tr>     <th>&nbsp;</th>     <th>Left</th>     <th>Centered</th>     <th>Right</th>   </tr>   <tr>     <th>Top</th>     <td align="left" valign="top"><img src="/books/2/631/1/html/2/button.gif" alt="" /></td>     <td align="center" valign="top"><img src="/books/2/631/1/html/2/button.gif" alt="" /></td>     <td align="top" valign="top"><img src="/books/2/631/1/html/2/button.gif" alt="" /></td>   </tr>   <tr>     <th>Centered</th>     <td align="left" valign="middle"><img src="/books/2/631/1/html/2/button.gif" alt="" /></td>     <td align="center" valign="middle"><img src="/books/2/631/1/html/2/button.gif"          alt="" /></td>     <td align="right" valign="middle"><img src="/books/2/631/1/html/2/button.gif"          alt="" /></td>   </tr>   <tr>     <th>Bottom</th>     <td align="left" valign="bottom"><img src="/books/2/631/1/html/2/button.gif" alt="" /></td>     <td align="center" valign="bottom"><img src="/books/2/631/1/html/2/button.gif"          alt="" /></td>     <td align="right" valign="bottom"><img src="/books/2/631/1/html/2/button.gif"          alt="" /></td>   </tr> </table> </body> </html>

Output

Figure 8.18. A matrix of cell alignment settings.

Caption Alignment

The optional align attribute of the <caption> tag determines the alignment of the caption. Depending on which browser you're using, however, you have different choices for what align means.

The HTML 4 specification names four values for the align attribute of the <caption> tag, top, bottom, left, and right. By default, the caption is placed at the top of the table (align="top"). You can use the align="bottom" attribute to the caption if you want to put the caption at the bottom of the table, like the following:

<table> <caption align="bottom">Torque Limits for Various Fruits</caption>

Similarly, left places the caption to the left of the table, and right places it to the right.

In Internet Explorer, however, captions are handled slightly differently. The top and bottom values are treated in the standard fashion, but left and right are handled differently. Rather than placing the caption to the side of the table specified, they align the caption horizontally on the top or bottom of the table, and the placement of the caption is then left to the non-standard valign attribute. So, in Internet Explorer you could place a caption at the bottom of the table, aligned with the right edge like this:

<table> <caption valign="bottom" align="right">Torque Limits for      Various Fruits</caption>

To create the same effect in all current browsers, you can use a combination of HTML and CSS. To place the caption at the bottom right of the table, you would use the align attribute and text-align property as follows:

<caption align="bottom" style="text-align: right">This is a caption</caption>

In general, unless you have a very short table, you should leave the caption in its default positioncentered at the top of the table. That way your visitors will see the caption first and know what they're about to read, instead of seeing it after they're already done reading the table (at which point they've usually figured out what it's about anyway).

Tip

If your table contains an image, you might prefer putting the caption at the bottom. This will be more familiar to people who are used to print media.