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>
Output:
Supported Browsers:
Share your thoughts in the comments
Please Login to comment...