HTML valign Attribute

The obsolete HTML valign attribute was historically used to control the vertical alignment of content within table cells, rows, and other table-related elements.

Obsolete Attribute: The valign attribute is obsolete and should not be used in modern HTML. Use the CSS vertical-align property when vertical alignment is needed for table cells.

Historical Syntax

The valign attribute was commonly placed on table cells and used a keyword to specify where content should be positioned vertically within the available space.

<td valign="top">Garden Supplies</td>

In this example, the contents of the table cell were aligned toward the top of the cell.

Historical Values

Common values for the valign attribute included:

Value	Historical Effect
`top`	Aligned the content toward the top of the available vertical space.
`middle`	Aligned the content near the middle of the available vertical space.
`bottom`	Aligned the content toward the bottom of the available vertical space.
`baseline`	Aligned text so the first text line shared a common baseline with related cells.

Historical Elements

The valign attribute was historically used with several table-related elements.

Element	Historical Purpose
`<td>`	Controlled the vertical alignment of content within a table data cell.
`<th>`	Controlled the vertical alignment of content within a table header cell.
`<tr>`	Specified vertical alignment for cells within a table row.
`<thead>`	Specified vertical alignment for cells within the table header group.
`<tbody>`	Specified vertical alignment for cells within a table body group.
`<tfoot>`	Specified vertical alignment for cells within the table footer group.
`<col>`	Historically specified vertical alignment for cells associated with a table column.
`<colgroup>`	Historically specified vertical alignment for cells associated with a group of table columns.

Historical Use

The valign attribute was useful when table cells had different amounts of content or when a row was taller than the content inside a particular cell.

<table>
  <tr>
    <td valign="top">Top</td>
    <td>This cell contains enough content to make the table row taller.<br>Additional content appears here.<br>And another line appears here.</td>
  </tr>
</table>

The first cell could be aligned to the top rather than appearing in another vertical position within the taller row.

Why It Became Obsolete

The valign attribute controlled visual presentation directly in HTML markup. Modern webpages separate document structure from presentation by using CSS for alignment and other visual styling.

CSS provides more flexible alignment controls and allows the same styling rules to be reused across multiple table cells without repeating presentational attributes throughout the HTML.

Modern Alternative

For table cells, use the CSS vertical-align property instead of the obsolete valign attribute.

Historical HTML

<td valign="top">Garden Supplies</td>

Modern CSS

td {
  vertical-align: top;
}

The CSS vertical-align property can position the contents of table cells at the top, middle, bottom, or baseline according to the selected value.

Play in Editor

Important: CSS vertical-align does not vertically position every type of element. It applies to inline-level and table-cell elements. Modern layouts may instead use Flexbox or Grid when content needs to be aligned within a general page layout.

Learn More About CSS Alignment

The CSS tutorials explain vertical alignment and modern layout techniques in more detail:

CSS Vertical Alignment - Control vertical alignment for inline and table-cell content.
CSS Styling Tables - Style table cells, headings, borders, spacing, and alignment.
CSS Flexbox - Align and distribute items within flexible layouts.
CSS Grid - Align and arrange content within grid layouts.

Legacy Browser Support

The valign attribute was widely supported by older browsers as a presentational attribute for table-related elements.

Browsers may continue to recognize some historical uses when displaying legacy webpages, but the attribute is obsolete and should not be used in new or updated HTML. Use CSS for vertical alignment instead.

For additional information about historical browser compatibility, visit Can I Use? . Search for the HTML element or attribute you want to check. Search results can include related HTML features, element attributes, APIs, and other technologies, so select the result that most closely matches the legacy feature you are researching.

Other obsolete attributes historically used to control table alignment and presentation include:

align - Historically controlled horizontal alignment for many elements.
char - Historically identified a character used to align table-cell content.
charoff - Historically specified an offset from the alignment character.
bgcolor - Historically controlled the background color of tables and other elements.
nowrap - Historically prevented text from wrapping within table cells.

Specifications

The valign attribute on table-related elements is obsolete and should not be used in modern HTML. CSS should be used to control vertical alignment and other presentational behavior. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.

HTML valign Attribute