Write the HTML code to display table cell in various alignment

 Write the HTML code to display table cell in various alignment


                 
html code for display table cell



In this tutorial we are demonstrate to write the HTML code to display table cell in various alignment  using HTML and Css. With Examples and Codes. Here the example specifies below to create the display table cell in various alignment using HTML code.

<table> defined as HTML table 
<td> defined as table cell <td>
<tr> defined as row </tr>
<th> defined as colulmn or header</th>



There are two types of alignment attributes:

1)Horizontal Alignment in a Cell
2)Vertical Alignment in a Cell

Example :

1) Horizontal alignment:

 <tr align=""></tr>
 <td align=""></td>

Example:

2)Vertical alignment:

<tr align="" valign=""></tr>
<td align="" valign=""></td>

Table Align 

The table align attribute is the table can position and that can be their contents in relation to the other elements on the webpage. Table alignment of the content make more powerful inside the table cells like salary, initial .. moreover...,

Most of the table data defaults to left alignment. using horizontal alignment and vertical alignment it is possible to change the items within the table cells. The appropriate key use "align" for vertical key use "valign". we will discuss detail with example.

vertical alignment

Attribute value Explanation
align="" left align the content inside the table cell to left.
align="" center align the content inside the table cell to center.
align="" right align the content inside the table cell to right.
valign="" top align the content inside the table cell to the top.
valign="" Middle align the content inside the table cell to the middle.
valign="" bottom align the content inside the table cell to the bottom.

Horizontal alignment

  
<html>
<head></head>
<body>
<table border="1" width="100%" height="100">
<tr>
<td width="25%">Default</td>
<td align="left" width="25%">Left</td>
<td align="center" width="25%">Center</td>
<td align="right" width="25%">Right</td>
</tr>
</table>
</body>
</html>
  
  
Output:-

 
Default Left Center Right

Vertical alignment

  
<html>
<head></head>
<body>
<table border="1" width="100%" height="100">
<tr>
<td width="25%">Default</td>
<td valign="top" width="25%">Top</td>
<td valign="middle" width="25%">Middle</td>
<td valign="bottom" width="25%">Bottom</td>
</tr>
</table>
</body>
</html>
  
  
  
Output:-

 
Default Top Middle Bottom

Horizontal and vertical alignment


<html>
<head></head>
<body>
<table border="1" width="100%" height="100">
<tr align="center">
<td width="25%">Center</td>
<td valign="top" width="25%">Center - Top</td>
<td valign="middle" width="25%">Center - Middle</td>
<td valign="bottom" width="25%">Center - Bottom</td>
</tr>
</table>
</body>
</html>



Output:-
Center Center - Top Center - Middle Center - Bottom


I hope you will learn something in this tutorials and finally you will know the html code to display table cell in various alignmnt. learn and share our article to your friend and family. keep support us.
Previous Post Next Post