HTML <td> valign Attribute

Last Updated : 24 Apr, 2024

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">

Supported Tags:

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.

Attribute Value:

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.

Examples of HTML <td> valign Attribute

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:

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>GeeksforGeeks</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>