RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-td-valign-attribute/ below:

HTML <td> valign Attribute - GeeksforGeeks

HTML <td> valign Attribute

Last Updated : 11 Jul, 2025

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:

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

Output:

Supported Browsers:

HTML <td> valign Attribute

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4