Scripting Master Logo
Learn Scripting Languages from the Master!

Controlling table placement

Home : HTML > Adding tables > Controlling table placement with the align property

By default, the browser places a table on the left margin just like the text is placed on the left. With the align property, we can change the placement of the table to center or right. The table's align property has three possible values:

  • left - places the table on the left margin. Again, this is the default alignment so it is not necessary to specify this if you want the table to be placed on the left margin)
  • center - places the table in the center of the page
  • right - places the table on the right margin

See figure 1 for examples that show tables with the three alignment properties.

Figure 1 Three tables with three align values
0 0
0 0

align=left places the table on the left margin.

<table width="20" align="left" border="1" cellspacing="0" cellpadding="0" bgcolor="#99CCCC">
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
</table>
0 0
0 0

align=center places the table in the center of the page.

<table width="20" align="center" border="1" cellspacing="0" cellpadding="0" bgcolor="#99CCCC">
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
</table>
0 0
0 0

align=right places the table on the right-side of the page.

<table width="20" align="right" border="1" cellspacing="0" cellpadding="0" bgcolor="#99CCCC">
<tr>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
</table>