valign (HTML attribute)

Spec
Depr. Version
No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Partial Partial Partial Partial Partial

Syntax

valign=" { baseline | bottom | middle | top } "

Description

In a very similar manner to this element’s align attribute, valign allows you to override the default alignment for content inside the header cells using a handful of attributes. This approach may not always be necessary, but in the example HTML above, the table is forced into a narrow width, and more content is present in the header cell in the first column than in the second column, which can cause some unsightly rendering effects. The valign attribute may be used to address this issue, as Figure 1 shows. There, all the content is aligned to the bottom of the header cells.

Figure 1. The valign attribute applied to each of the th elements The valign attribute applied to each of the th elements

Note that there is both a better way, and a much, much better way to do this. The better way is not to set the valign at the td level, as in a bigger table with more columns, you’ll end up with unnecessarily bloated markup. Instead, you could set valign at the parent tr level. However, this is still less than ideal. The preferred method would be to set the alignment of text inside the th elements using the CSS vertical-align property.

Example

The valign is set to "bottom" for each of these th elements:

<table summary="Interest Rates" width="200" border="1">
  <caption>Interest Rates</caption>
  <thead>
    <tr>
      <th valign="bottom">Account Type (Name titles as per
          Spring 2006 range)</th>
      <th valign="bottom">Interest Rate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smart</td>
      <td>From 2%</td>
    </tr>
    <tr>
      <td>Young Saver</td>
      <td>From 1.6%</td>
    </tr>
  </tbody>
</table>

Value

The recognized attribute values are as shown in the syntax section.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial

In the browsers tested, "bottom", "middle", and "top" alignments are honored, but the "baseline" value is ignored by all.

User-contributed notes

There are no comments yet.

Related Products