HTML <td> valign Attribute

The HTML <td> valign attribute specifies the vertical alignment of content within a table cell. It can accept values such as top, middle, bottom, or baseline to control the positioning of content. If not explicitly set, the content in a table cell is vertically aligned to the middle by default.

Note: The <td> valign Attribute is not supported by HTML5.

Syntax:

<td valign="top | middle | bottom | baseline">

Tag	Description
col	Specifies column properties for each column within colgroup or table.
colgroup	Groups columns, allowing styling and other attributes to be applied.
tbody	Contains the main content rows in a table.
td	Represents data cells within a table row.
tfoot	Defines footer content for a table.
th	Specifies header cells, typically bold and centered.
thead	Encloses header rows, often styled differently from tbody.
tr	Represents a row of cells within a table.

Attributes	Description
top	It sets the content to top-align.
middle	It sets the content to middle-align.
bottom	It sets the content to bottom-align.
baseline	It sets the content to baseline. The baseline is the line where most of the characters sit. It is a default value.

Example 1: In this example we demonstrates vertical alignment within table cells using the valign attribute. Each cell’s content is aligned to the top, middle, or bottom, affecting their position within the cell.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Vertical Alignment Example</title>
</head>

<body>

    <h3>Vertical Alignment Example</h3>
    <table border="1">
        <tr>
            <td valign="top" style="height: 100px;">
                Top Aligned
            </td>
            <td valign="middle" style="height: 100px;">
                Middle Aligned
            </td>
            <td valign="bottom" style="height: 100px;">
                Bottom Aligned
            </td>
        </tr>
    </table>

</body>

</html>

Output:

valign Attribute" height="286" src="/public/files/Vertical-Alignment-Example.png" width="329">

HTML valign Attribute Example Output

Example: In this example we will see the implementation of above td valign tag with an example.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML td valign Attribute
    </title>
</head>

<body>
    <h1>w3wiki</h1>

    <h2>HTML td valign Attribute</h2>

    <table border="1" width="500">
        <tr>
            <th>NAME</th>
            <th>AGE</th>
            <th>BRANCH</th>
        </tr>

        <tr style="height:50px;">
            <td valign="top">BITTU</td>
            <td valign="center">22</td>
            <td valign="bottom">CSE</td>
        </tr>

        <tr style="height:50px;">
            <td valign="bottom">RAKESH</td>
            <td valign="center">25</td>
            <td valign="top">EC</td>
        </tr>
    </table>
</body>

</html>

Output:

valign Attribute" height="inherit" loading="lazy" src="/public/files/tdalign.jpg" width="inherit">

Supported Tags:

Attribute Value:

Examples of HTML <td> valign Attribute

Supported Browsers:

Contact Us