HTML Text Alignment Tutorial with Practical Examples
HTML Alignment Tag Tutorial
✷ HTML text alignment use to control how text appears horizontally on web page.
✷ text alignment improve readability and give clean layout to your content.
✷ most common alignment are left,right,center, justify.
✷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.
✷ Left aligment (align="left") - default alignment most web page.
✷Center alignment (align="center") - text horizontally centered.
✷ Right alignment (align="right") - text align right edge.
✷ justify alignment (align="justify") - text spreads text across the width.
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>
<!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
Post a Comment