Open In App

HTML <td> valign Attribute

Last Updated : 24 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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:

TagDescription
colSpecifies column properties for each column within colgroup or table.
colgroupGroups columns, allowing styling and other attributes to be applied.
tbodyContains the main content rows in a table.
tdRepresents data cells within a table row.
tfootDefines footer content for a table.
thSpecifies header cells, typically bold and centered.
theadEncloses header rows, often styled differently from tbody.
trRepresents 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 <td> valign Attribute
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:

HTML <td> valign Attribute

Supported Browsers:



Similar Reads

HTML | &lt;th&gt; valign Attribute
The HTML &lt;th&gt; valign Attribute is used to specify the vertical alignment of text content in a header cell. It is not supported by HTML 5. Syntax: &lt;th valign="top | middle | bottom | baseline"&gt; Attribute Value: top: It sets the table header content to top-align. middle: It sets the table header content to middle-align. bottom: It sets th
1 min read
HTML | &lt;tbody&gt; valign Attribute
The HTML &lt;tbody&gt; valign Attribute is used to specify the vertical alignment of table cell content. Syntax: &lt;tbody valign="top | middle | bottom | baseline"&gt; Attribute Value: 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 ba
1 min read
HTML | &lt;tr&gt; valign Attribute
The HTML &lt;tr&gt; valign Attribute is used to specify the vertical alignment of text content in a table row. It is not supported by HTML 5. Syntax: &lt;tr valign= "top | middle | bottom | baseline"&gt; Attribute Values: top: It sets the content to top-align. middle: It sets the content to middle-align. bottom: It sets the content to bottom-align.
1 min read
HTML | &lt;tfoot&gt; valign Attribute
The HTML &lt;tfoot&gt; valign Attribute is used to specify the vertical alignment of text content in a table footer cell. It is not supported by HTML 5. Syntax: &lt;tfoot valign="top | middle | bottom | baseline"&gt; Attribute Value: top: It sets the content to top-align. middle: It sets the content to middle-align. bottom: It sets the content to b
1 min read
HTML | &lt;colgroup&gt; valign Attribute
The HTML &lt;colgroup&gt; valign Attribute is used to specify the vertical alignment of text content in a colgroup Element. Syntax: &lt;colgroup valign="top | middle | bottom | baseline"&gt; Attribute Values 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
1 min read
HTML | &lt;thead&gt; valign Attribute
The HTML thead valign Attribute is used to specify the vertical alignment of content inside the thead Element. Syntax: &lt;thead valign="top | middle | bottom | baseline"&gt; Attribute values: 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 conten
1 min read
HTML | &lt;col&gt; valign Attribute
The HTML &lt;col&gt; valign attribute is used to specify the vertical alignment of the text content in a column element. Syntax: &lt;col valign="top | middle | bottom | baseline"&gt; Attribute Values: 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 th
1 min read
HTML valign Attribute
The HTML valign attribute is used to specify the vertical alignment of the text in the element. This attribute supports many table-related elements such as &lt;tr&gt;,&lt;td&gt;,&lt;tbody&gt;,&lt;col&gt;, and &lt;tfoot&gt;.  Note: The valign attribute is not supported by HTML5. Syntax:&lt;element valign="top | middle | bottom | baseline"&gt;Attribu
1 min read
HTML DOM Table Row vAlign Property
The HTML DOM Table Row vAlign Property is used to set or return the value of the valign attribute of the &lt;tr&gt; element. The valign attribute is used to specify the vertical alignment of the text-content inside the Table Row. Note: This property is not supported by HTML5. Syntax It returns the Table Row vAlign Property. TableRowobject.vAlign; I
2 min read
HTML DOM Table Header vAlign Property
The HTML DOM TableHeader vAlign property is used to set or return the value of the vAlign attribute of the &lt;th&gt; element. The vAlign attribute is used to specify the vertical alignment of the text-content inside the Table Header. Note: This property is no longer supported in HTML5. Syntax: It returns the Table Header vAlign Property. TableHead
2 min read