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, the valign allows you to override the default alignment for content inside the header cells using a handful of attributes. This 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 column one than column two, which can cause some unsightly effects. The valign 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. Vertically aligning the content inside the first row to the bottom The tr’s valign attribute is used to vertically align the content inside the the first row to the bottom

Example

The valign is set to "bottom" for the first row of this narrow table:

<table summary="Interest Rates" width="200" border="1">
  <caption>Interest Rates</caption>
  <thead>
    <tr valign="bottom">
      <th>Account Type (Name titles as per Spring 2006 range)</th>
      <th>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 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

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