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.
<!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.
<!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:
