HTML Text Alignment Tutorial with Practical Examples

HTML Alignment Tag Tutorial 

HTML Text Alignment Tutorial with Practical Examples


✷ HTML Text Alignment Examples
✷ 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>

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> tag

Step 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

HTML Text Alignment Tutorial with Practical Examples

Related Post :- 

html link tag explain. how to link css

How to Add Images in HTML

How to Use Heading Tags in HTML

Comments

Post a Comment

Popular posts from this blog

HTML Tag

Image
 HTML Tag  Html basic tag:-   <!DOCTYPE html> Html  first line of the code <!DOCTYPE html> is called a doctype declaration the browser which version of HTML the page is written . Html tag using the doctype the HTML5 , the most up-to-date version of  HTML language.The DOCTYPE declaration of the instruction to web browser of HTML the page is written in.  <HTML>:- <Html>.   </html> <html> tag tells the browser  this is HTML document . The <html> tag represent the root of  HTML document. The <html> tag is the container for other HTML elements  <!DOCTYPE> . The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.HTML is a computer language that makes up most web pages and online applications. A hypertext text used to reference other pieces of text, while a markup language is a series of markings that tells w...
Read more

HTML Input Type Submit Syntax and Example

Image
What is Input Type Submit in HTML The input type="submit" in HTML is used to create a submit button in a form. When a user clicks this button, it sends (submits) the form data to a server for processing. In simple words, a submit button helps users send the information they entered in a form, like login details, contact forms, or registration data. Syntax : <input type= "submit" value="submit"> type ="submit"  ➡ create a submit button  value ="send"    ➡ text shown on the button A button that submit the form.<input type ="submit"> defines  button for submitting form data  form-handler. The form-handler is typically server page with the  script for processing input data. the form -handler is specified in the forms action attribute.  ⭐ HTML Input Type Submit Syntax and Example  program <! DOCTYPE html > < html > < body > < h2 > Submit Button </ h2 > < p > The < strong >...
Read more

CSS Text Color Explained with Syntax and HTML Examples

Image
 What Is CSS Text Color This Blog You Will Learn  à®ƒ   What Is CSS Text Color  à®ƒ   Syntax   à®ƒ   Purpose of Text Color  à®ƒ    Real world Use Cases  à®ƒ    What Is CSS Text Color  Example    à®ƒ   Output What Is CSS Text Color CSS text color refers to the color applied to text content on a web page using the color property in CSS. It controls how text appears visually and plays a major role in readability, accessibility, branding, and user experience . Syntax  selector{   color:value; } Purpose of Text Color ✅ Make content readable.  ✅ Highlight important information. ✅ Match brand identity. ✅ Create visual hierarchy. ✅ Improve user experience. Real world Use Cases Highlighting error messages. Emphasizing headings. Branding and theme design improving content readability. ஃ  structure diagram examples What Is CSS Text Color Example   <! DOCTYPE html > ...
Read more