HTML valign Attribute

Introduction

The valign attribute specifies the vertical alignment of content within a table cell. It lets you pin text or other elements to the top, middle, or bottom of a <td> or <th> when the cell is taller than its content.

Although valign is obsolete in HTML5, you will still encounter it in legacy markup. Modern projects should use the CSS vertical-align property instead. Learning both helps you read old code and write new code correctly.

What You’ll Learn

Purpose of valign

The valign attribute provides a way to vertically align content inside table cells. This is useful when rows have extra height (from padding, images, or neighboring cells) and you need text positioned at the top, center, or bottom of the cell area.

In early HTML, presentation attributes like valign were the primary way to style tables. HTML5 moved presentation to CSS for separation of structure and style.

📝 Syntax

Add valign with a keyword on a table cell or column element:

<table>
  <tr>
    <td valign="top">Top aligned text</td>
    <td valign="middle">Middle aligned text</td>
    <td valign="bottom">Bottom aligned text</td>
  </tr>
</table>

Syntax Rules

• Valid on <td>, <th>, <tr>, <col>, and <colgroup>.
• Values: top, middle, bottom, baseline.
• Default when omitted: middle for cells.
• Effect is most visible when the cell has extra vertical space.
• CSS equivalent: vertical-align: top | middle | bottom | baseline on the cell.
• Do not use border on tables for layout in new code; use CSS borders instead.

💎 Values

The valign attribute accepts these keywords:

• top — Aligns content to the top of the cell.
• middle — Centers content vertically (default).
• bottom — Aligns content to the bottom of the cell.
• baseline — Aligns content to the text baseline of the row.

<td valign="top">Top</td>
<td valign="middle">Middle</td>
<td valign="bottom">Bottom</td>
<td valign="baseline">Baseline</td>

Applicable Elements

valign vs CSS vertical-align vs flexbox

Examples Gallery

Compare top, middle, and bottom alignment, change valign with JavaScript, and see the modern CSS equivalent.

<table>
  <tr>
    <td valign="top">Top aligned text</td>
    <td valign="middle">Middle aligned text</td>
    <td valign="bottom">Bottom aligned text</td>
  </tr>
</table>

<td id="dynamicCell">Adjustable alignment</td>

<script>
  document.getElementById("dynamicCell").setAttribute("valign", "bottom");
</script>

<style>
  .cell-top { vertical-align: top; }
  .cell-middle { vertical-align: middle; }
  .cell-bottom { vertical-align: bottom; }
</style>

<td class="cell-top">Top (CSS)</td>
<td class="cell-middle">Middle (CSS)</td>
<td class="cell-bottom">Bottom (CSS)</td>

♿ Accessibility

• Use semantic tables — <th> for headers, scope where helpful; alignment does not replace structure.
• Do not rely on alignment alone — Screen readers do not announce valign; meaning must come from content and headings.
• Keep readable line length — Vertical alignment affects layout, not whether text is understandable.
• Prefer CSS for maintainability — Centralized styles are easier to audit for contrast and spacing.
• Test with zoom and reflow — Ensure table content remains usable when users enlarge text.

💡 Best Practices

• While valign can help with quick legacy adjustments, HTML5 and CSS practices recommend vertical-align for better control and maintainability.
• When maintaining older code, valign may still appear; migrate to CSS when you refactor.

🎉 Conclusion

The valign attribute provides a straightforward way to control vertical alignment within table cells. While obsolete in modern HTML, understanding it helps when working with older codebases and table-based layouts.

For current projects, use CSS vertical-align on table cells to follow modern web standards and keep styling in stylesheets.