HTML Table valign Attribute – A Complete Guide with Examples and Best Practices

What is the valign Attribute in HTML?

The valign (vertical align) attribute was used in older versions of HTML to control the vertical alignment of content inside <td> (table data) and <th> (table header) elements.

🚨 Note: The valign attribute is deprecated in HTML5, and modern CSS should be used instead.

Step-by-Step Guide to Vertical Alignment in HTML Tables

1. Using the `valign` Attribute (Deprecated Method)

<table border="1" width="50%">
    <tr>
        <td valign="top">Top Aligned</td>
        <td valign="middle">Middle Aligned</td>
        <td valign="bottom">Bottom Aligned</td>
    </tr>
</table>

In this example, each <td> element has a valign

🔹 Values of valign:
✅ 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 text to the baseline of the first line of text.

⚠️ Best Practice: Instead of valign, use modern CSS methods like vertical-align and flexbox.

attribute that specifies the vertical alignment of the content within the cell.

It’s important to note that the valign attribute is deprecated in HTML5, and its usage is discouraged. Instead, it is recommended to use CSS properties, such as vertical-align, to control the vertical alignment of table cells.

Using CSS, you can achieve the same vertical alignment effect as the valign attribute. Here’s an example:

2. Using CSS `vertical-align` (Recommended)

<style>
    td {
        height: 100px;
        vertical-align: middle; /* Centers content */
    }
</style>

<table border="1" width="50%">
    <tr>
        <td style="vertical-align: top;">Top Aligned</td>
        <td style="vertical-align: middle;">Middle Aligned</td>
        <td style="vertical-align: bottom;">Bottom Aligned</td>
    </tr>
</table>

✅ Why use CSS?

Works in modern browsers.
More flexible and customizable.
Future-proof for HTML5+

3. Using CSS Flexbox for Better Alignment

For full control over table content alignment, use Flexbox instead of vertical-align.

<style>
    .flex-container {
        display: flex;
        align-items: center; /* Center content vertically */
        justify-content: center; /* Center content horizontally */
        height: 100px;
        border: 1px solid black;
    }
</style>

<table border="1" width="50%">
    <tr>
        <td><div class="flex-container">Vertically Centered</div></td>
    </tr>
</table>

🔹 Flexbox is better because:
✅ It works in all modern browsers.
✅ It provides better responsiveness.

Common Mistakes to Avoid

❌ Using the valign attribute in HTML5.
✅ Instead, use CSS vertical-align or Flexbox for vertical alignment.

❌ Not setting a fixed height for table cells.
✅ Always define height to ensure proper alignment.