Write the HTML code to display table cell in various alignment
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.