Image Alignment

Tables

As with images, you can include align="left"> or align="right" in a <table> tag to have text flow around the table. One difference, though, is that you cannot put a <table> tag inside a <p> tag. Here's an example where a table is used to put a border around an image.

The sun never set on the British Empire because the British Empire is on the east and the sun sets in the west. Queen Victoria was the longest Queen. She sat on a thorn for 63 years. Her reclining years and finally the end of her life were exemplatory of a great personality. Her death was the final event which ended her reign.

<p>
  The sun never set on the British Empire
  because the British Empire is on the east
  and the sun sets in the west.
</p>
<table cellpadding="0" cellspacing="0"
       border="5" align="left"><tr>
  <td><img ... /></td>
</tr></table>
<p>
  Queen Victoria was the longest Queen.  She
  sat on a thorn for 63 years.  Her reclining
  years and finally the end of her life were
  exemplatory of a great personality.  Her
  death was the final event which ended her reign.
</p>

Netscape puts quite a bit of space between the table and the surrounding text, while IE runs them up pretty close:

IE 4	Netscape 4

Browser support varies for hspace and vspace in <table> tags.

The nineteenth century was a time of many great inventions and thoughts. The invention of the steamboat caused a network of rivers to spring up. Cyrus McCormic invented the McCormick raper, which did the work of a hundred men.

<p>
  The nineteenth century was a time of
  many great inventions and thoughts.
</p>
<table cellpadding="0" cellspacing="0"
       vspace="30" hspace="20"
       border="5" align="left"><tr>
  <td><img ... /></td>
</tr></table>
<p>
  The invention of the steamboat caused
  a network of rivers to spring up. Cyrus
  McCormic invented the McCormick raper,
  which did the work of a hundred men.
</p>

Netscape honored the hspace and vspace attributes, while IE did not. This isn't terribly surprising, because hspace and vspace are not officially sanctioned attributes for the <table> tag.

IE 4	Netscape 4

Instead of using hspace, you can try using a transparent spacer gif to gain some space between the table and the text. I'll illustrate this with a visible gif first.

Samuel Morse invented a code of telepathy. Louis Pasteur discovered a cure for rabbis. Charles Darwin was a naturalist who wrote The Organ of the Species.

<p>
  Samuel Morse invented a code of telepathy.
</p>
<table cellpadding="0" cellspacing="0"
       border="5" align="left"><tr>
  <td><img ... align="left" /></td>
</tr></table>
<p>
  <img src="browndot.gif" width="20"
       height="100" alt="" align="left" />
  Louis Pasteur discovered a cure for rabbis.
  Charles Darwin was a naturalist who wrote
  The Organ of the Species.
</p>

Netscape gives more space than IE does, and adding hspace="0" doesn't change this.

IE 4	Netscape 4

Here's a similar example with a transparent gif instead of a visible one. If you need a transparent gif, right-click in this box and save it.

Madman Curie discovered radium. And Karl Marx became one of the Marx Brothers. The First World War, caused by the assignation of the arch-Duck by a surf, ushered in a new error in the anals of human history.

<p>
  Madman Curie discovered radium.  And Karl
  Marx became one of the Marx Brothers.
</p>
<table cellpadding="0" cellspacing="0"
       border="5" align="left"><tr>
  <td><img ... align="left" /></td>
</tr></table>
<p>
  <img src="transdot.gif" width="20"
       height="100" alt="" align="left" />
  The First World War, caused by the assignation
  of the arch-Duck by a surf, ushered in a new
  error in the anals of human history.
</p>

As in the previous example, Netscape gives more space than IE does.