1. Home
  2. Computing & Technology
  3. Web Design / HTML

How To Align Tables and Images

By Jennifer Kyrnin, About.com

Use the float style property to force text to flow around tables and images.
Difficulty: Easy
Time Required: 5 minutes

Here's How:

  1. Open a Web page in an HTML or text editor.
  2. Add a standard image tag:
    <img src="image.gif" alt="image" />
  3. Add the style property "float: right;" into the style attribute to align the image on the right
    <img src="image.gif" alt="image" style="float: right;" />
  4. Add additional text after the image.
  5. When you want the text below the image (rather than beside) add a br tag
    <br style="clear: both;" />

Tips:

  1. You can float any element in your document.
  2. Items can be floated to the right or the left
  3. If you float an element like a paragraph, be sure to set a width.

What You Need:

  • [link url=http://webdesign.about.com/od/htmleditors/bb/aabhtmleditor.htm]HTML Ed
  • [link url=http://webdesign.about.com/od/htmleditors/g/bldeftexted.htm]Text Edito
More Web Design / HTML How To's

Explore Web Design / HTML

More from About.com

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. HTML and XHTML
  5. Beginning HTML Tutorials
  6. Use the Align Attribute on Tables and Images

©2008 About.com, a part of The New York Times Company.

All rights reserved.