HTML Alignment Tag Tutorial :- Top, Middle, Bottom Alignment in Tables
HTML Text Alignment Examples
The HTML <td> tag valign Attribute is use to specify the vertical alignment of the text content in a cell. Attribute Value top - It set the content to top-align. middle -It sets the content to middle-align. Bottom -is the sets of content to bottom-align.
HTML Text Alignment Examples
1) Example
<! Doctype html>
<html>
<body>
<table height="300" width="500" Border="2" Bordercolor="red">
<caption> Use of Verticle Alignment Attribute of Table</caption>
<tr>
<td valign="Top">Top Align content</td>
<td valign="Center">Center Align content
</td>
<td valign="Bottom">Bottom Align content</td>
</tr>
</table>
</body>
</html>
HTML Text Alignment Examples
Explain Program
Step 1 ]
<!Doctype html>
- <!doctype html> always be the first line of any HTML document.
Step 2 ]
<html> and </html>
html is the root element.
Step 3 ]
<body> and </body>
body is main content area.
All visible content inside to the <body> tagStep 4]
<table height="300" width="500" Border="2" Bordercolor="red">
height = 300
width = 500
border =2
bordercolor = red
Step 5]
<caption> Use of Verticle Alignment Attribute of Table</caption>
provide a caption / title the table
Step 6]
<tr>
Table row
create a single row in table
Step 7]
<td valign="Top">Top Align content</td>
table cell <td> in row
valign == top vertically aligns the content of cell to the top cell
displays text top align content
Step 8]
<td valign="Center">Center Align content
other table cell
valign= center vertically aligns content to center of cell
display text center align content vertical center
Step 9]
<td valign="Bottom">Bottom Align content</td>
third table cell
valign = bottom vertically aligns content to bottom cell
display text bottom align content
Step 10]
closing tag
</tr>
</table>
</body>
</html>
HTML Text Alignment Examples
Alignment OUTPUT
