Controlling the placement of text within a table

By default, the horizontal alignment is left edge of a table's cell and the vertical alignment is middle of a table's cell. To understand that point, observe the following table:

Default horizontal alignment : left
Default vertical alignment : middle

To change the default horizontal alignment for a cell's content, use the align property inside <td> tag with one of these possible values:

  • left - aligns cell's content to the left edge of the current cell. Again, this is the default alignment so it is not necessary to specify.)
  • center - aligns cell's content to the center edge of the current cell.
  • right - aligns cell's content to the right edge of the current cell.

You can also set the horizontal alignment for the entire row by placing the align property inside the <tr> tag (like <tr align="center">). This is more efficient to using individual align property for each cell when you have many cells that will use the same horizontal alignment value inside a row. You can always override a row's horizontal alignment inside a particular cell (i.e., with <td align"center">)

To change the default vertical alignment for a cell's content, use the Valign property inside <td> tag with one of these possible values:

  • middle - aligns cell's content to the middle of the current cell. Again, this is the default alignment so it is not necessary to specify.)
  • top - aligns cell's content to the top of the current cell.
  • bottom - aligns cell's content to the bottom of the current cell.

The property Valign stands for vertical alignment. Just like you can set the horizontal alignment for the entire row, vertical alignment also can be set by using the Valign property inside the <tr> tag (like <tr valign="top">). Again, this is a better alternative to using individual valign properties for each cell when you have many cells that will use the same vertical alignment value inside a row. You can always override a row's vertical alignment inside a particular cell (i.e., with <td align"bottom">)

Note that if your table is too small or if you do not manually add a border around your table, you may not correctly determine which alignment your table is using. To check which horizental alignment your table is using, set the width property to a high number. For example, if you place an image (with dimension size 200 by 20) inside a cell, set the cell's width to 250 (<td width="250">). Use the height property (like <td height="250">) to check which alignment you are using or to just add some extra blank space to a cell.

Figure 2 shows examples of different horizontal and vertical alignment values. HTML code for each example is also given.

Figure 2 different alignment combinations of align and valign properties with HTML code.
Horizontal alignment: left. Vertical alignment: top.

HTML code:

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="left" valign="top">
align=left
valign=top
align=left <br>
valign=top
</td>
</tr>
</table>
Horizontal alignment: left. Vertical alignment: middle.

HTML code:

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="left" valign="middle">
align=left
valign=middle
align=left <br>
valign=middle
</td>
</tr>
</table>
Horizontal alignment: left. Vertical alignment: bottom.

HTML code:

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="left" valign="bottom">
align=left
valign=bottom
align=left <br>
valign=bottom
</td>
</tr>
</table>
Horizontal alignment: center. Vertical alignment: top.

HTML code:

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="center" valign="top">
align=center
valign=top
align=center <br>
valign=top
</td>
</tr>
</table>
Horizontal alignment : center. Vertical alignment : middle.

HTML code:

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="center" valign="middle">
align=center
valign=middle
align=center <br>
valign=middle
</td>
</tr>
</table>
Horizontal alignment: center. Vertical alignment: bottom.

HTML code:

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="center" valign="bottom">
align=center
valign=bottom
align=center <br>
valign=bottom
</td>
</tr>
</table>
Horizontal alignment: right. Vertical alignment: top.

HTML code:

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="right" valign="top">
align=right
valign=top
align=right <br>
valign=top
</td>
</tr>
</table>
Horizontal alignment: right. Vertical alignment: middle.

HTML code:

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="right" valign="middle">
align=right
valign=middle
align=right <br>
valign=middle
</td>
</tr>
</table>
Horizontal alignment: right. Vertical alignment: bottom.

HTML code:

<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="70" align="right" valign="bottom">
align=right
valign=bottom
align=right <br>
valign=bottom
</td>
</tr>
</table>