Module 5 - Page 05 - ALIGN and VALIGN

ALIGN and VALIGN

Content inside table cells may be aligned horizontally using the ALIGN attribute, and vertically using the VALIGN attribute. ALIGN and VALIGN attributes would be used to override the default settings of the TH or TD cell tags.

Tag: TH, TD
Attribute: ALIGN
Values: left, right, center
Example:<th align="right">Something</th>

The ALIGN attribute allows you to align content in a cell to the left, the right, or the center.

Tag: TH, TD
Attribute: VALIGN
Values: top, middle (or center), bottom
Example: <td valign="top">Something</td>

The VALIGN attribute allows you to align content vertically in a cell at the top, middle, or bottom of the cell. Both TH and TD cells are ALWAYS valign="middle" by default. Note: The values "middle" and "center" for the VALIGN attribute have an identical effect; "middle" is the official value.

Here's an Example:

<table border="1" width="100" height="100">
<tr>
<th align="right">1</th>
<th align="left">2</th>
</tr>
<tr>
<th valign="top">3</th>
<th valign="bottom">4</th>
</tr>
</table>

Displayed

1	2
3	4

Notice how both cells in the top row automatically display their content as valign="middle" by default, since I didn't explicitly specify the VALIGN attribute in either of the cells in the top row. In the bottom row, both cells are align="center" by default because they're both created using TH tags (which automatically align center).

Here's the same example, modified with additional ALIGN and VALIGN attributes; I just wanted you to understand that you can use as many of these attributes together in a tag as you wish or desire.

Example:

<table border="1" width="100" height="100">
<tr>
<th align="right" valign="top">1</th>
<th align="left" valign="bottom">2</th>
</tr>
<tr>
<th valign="top" align="left">3</th>
<th valign="bottom" align="right">4</th>
</tr>
</table>

Displayed

1	2
3	4

And, just so that everything is PERFECTLY clear, here is the SAME table with NO ALIGN or VALIGN attributes:

<table border="1" width="100" height="100">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<th>3</th>
<th>4</th>
</tr>
</table>

Displayed

1	2
3	4

The ALIGN attribute may only be added to TH or TD cells directly to control alignment inside the appropriate cells; ALIGN may not be set globally for the entire row via the TR tag if you wish to support all browsers on all platforms.

VALIGN has traditionally been added to either TH or TD cells to control the vertical alignment for individual cells, or to the TR tag to control the vertical alignment for an entire row of cells; Internet Explorer 5 for the Macintosh, however, does not fully support this functionality (this is a bug). Add VALIGN to TH and TD tags ONLY, therefore, and not to TR, if you wish to support all browsers on all platforms.

The VALIGN attribute has one other possible value, baseline, which is sometimes used; baseline is described in "HTML and XHTML: The Definitive Guide" in section 10.2.3.1, pp366-368.

Main Menu