HTML Table Align Attribute

By default, the table is aligned on left side of the browser, the alignment of table can be change using the table align attribute. The table align can be set to right, left and center.

The align value set to right place the table on right side of the browser and allow the text to flow to the left

The align value set to left place the table on left side of the browser and allow the text to flow to the right

The align value set to center place the table on center of the browser and allow the text on top of the table from left to right.

Let’s look at the HTML code to align the table to right,left and center.

 1: <html>
 
 
 2: <head>
 
 
 3: <title>
 
 
 4: HTML Table Alignment
 
 
 5: </title>
 
 
 6: </head>
 
 
 7: <body>
 
 
 8: <table align="left" border="1">
 
 
 9: The table is left aligned using the align attribute with the value of left.
 
 
 10: <tr>
 
 
 11: <td>
 
 
 12: Year
 
 
 13: </td>
 
 
 14: <td>
 
 
 15: Month
 
 
 16: </td>
 
 
 17: </tr>
 
 
 18: </table>
 
 
 19: </br>
 
 
 20: </br>
 
 
 21: </br>
 
 
 22: <table align="right" border="1">
 
 
 23: The table is right aligned using the align attribute with the value of right.
The text is on left side of the table as you can see in this example.
 
 
 24: <tr>
 
 
 25: <td>
 
 
 26: Year
 
 
 27: </td>
 
 
 28: <td>
 
 
 29: Month
 
 
 30: </td>
 
 
 31: </tr>
 
 
 32: </table>
 
 
 33: </br>
 
 
 34: </br>
 
 
 35: </br>
 
 
 36: <table align="Center" border="1">
 
 
 37: The table is center aligned using the align attribute with the value of center.
The text is on left side of the table as you can see in this example.
 
 
 38: <tr>
 
 
 39: <td>
 
 
 40: Year
 
 
 41: </td>
 
 
 42: <td>
 
 
 43: Month
 
 
 44: </td>
 
 
 45: </tr>
 
 
 46: </table>
 
 
 47: </body>
 
 
 48: </html>

The result of the code is shown below.


image

The align attribute was defined in HTML 3.2 specification is depreciated in HTML 4.0 in favor of style attribute float property using which the table can be aligned right,left and center.

Let’s see how we use the HTML style attribute float property in HTML code.

 1: <html>

 2: <head>

 3: <title>

 4: HTML Table Alignment

 5: </title>

 6: </head>

 7: <body>

 8: <table  border="1" style="float:left">

 9: The table is left aligned using the alstyle attribute float property with the value of left.

 10: <tr>

 11: <td>

 12: Year

 13: </td>

 14: <td>

 15: Month

 16: </td>

 17: </tr>

 18: </table>

 19: </br>

 20: </br>

 21: </br>

 22: <table style="float:right" border="1">

 23: The table is right aligned using the style attribute float property with the value of right.
The text is on left side of the table as you can see in this example.

 24: <tr>

 25: <td>

 26: Year

 27: </td>

 28: <td>

 29: Month

 30: </td>

 31: </tr>

 32: </table>

 33: </br>

 34: </br>

 35: </br>

 36: <table style="float:center" border="1">

 37: The table is center aligned using the style attribute float property with the value of center.
The text is on left side of the table as you can see in this example.

 38: <tr>

 39: <td>

 40: Year

 41: </td>

 42: <td>

 43: Month

 44: </td>

 45: </tr>

 46: </table>

 47: </body>

 48: </html>

 49: 

 50: 


The output will be remain the same as shown in the first example. 

Tags: , , , , , , ,

Author: Revo

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *

two × five =

 

Pin It on Pinterest

Shares
Share This