The HTML <td> valign attribute is used to vertically align the content inside a table data cell.
- Common values are top, middle, and bottom.
- It controls the vertical position of content inside the cell.
- In modern HTML, CSS vertical-align is preferred instead of valign.
Syntax:
<td valign="top | middle | bottom | baseline">- 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.
Note: The <td> valign Attribute is not supported by HTML5.
Supported Tags
- col: col specifies column properties for each column within colgroup or table.
- colgroup: colgroup groups columns, allowing styling and other attributes to be applied.
- tbody: tbody contains the main content rows in a table.
- td: td represents data cells within a table row.
- tfoot: tfoot defines footer content for a table.
- th: th specifies header cells, typically bold and centered.
- thead: thead encloses header rows, often styled differently from tbody.
- tr: tr represents a row of cells within a table.
Examples of HTML <td> valign Attribute
Example 1: 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.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>Vertical Alignment Example</title>
</head>
<body>
<h3>Vertical Alignment Example</h3>
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Example 2: Implementation of above td valign tag with an example.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
HTML td valign Attribute
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML td valign Attribute</h2>
<!--Driver Code Ends-->
<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="middle">22</td>
<td valign="bottom">CSE</td>
</tr>
<tr style="height:50px;">
<td valign="bottom">RAKESH</td>
<td valign="middle">25</td>
<td valign="top">EC</td>
</tr>
</table>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->