| Depr. | Version |
|---|---|
| No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Partial | Partial | Partial | Partial | Partial |
Syntax
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.
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.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.