Aligning a table on the page

Browsers see tables like pictures: they are just objects and text can flow around them. By default though, a table is put on the line below text and the flow resumes on the line below the table. It looks like this:

Browsers don't put any space between the table and the text so you might want to add a <p> tag before and after the table to sort out the spacing.

If you want text to flow around the table, use the align attribute to align the table with the left or right margin. The text then appears next to the table.

If you want part of the text to flow around the table but break the flow to have a new section start beneath the table, you can use the clear attribute with the <br> tag. This will move text down until the specified margin is clear before it resumes the text flow. For example:

<p>This table lists fruit and vegetables 
in two separate columns.
<table border="1" align="left">
<tr>
<th>Fruits<th>Vegetables
<tr>
<td>Apples<td>Celery
<tr>
<td>Oranges<td>Carrots
</table>
Column one shows fruit; column two vegetables. 
It is not a very comprehensive list and, if 
this was the best Waitrose could offer, 
I would shop somewhere else. Fortunately, this 
is not the case.<br clear=left> This 
following table lists types of breakfast 
cereal...........</p>

This is what you get:

If you use the align attribute on the table, this does not affect the alignment of text or pictures in individual cells.

When align a table to the left or right, you can’t use <p> tags to add extra space around it. Use the hspace and vspace attributes with the <table> tag instead. These attributes create horizontal and vertical space around the table. Enter a value in pixels. For example, to create a 20 pixel margin around the table:

<table align="left" hspace="20" vspace="20">