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

Using Tables
Layout, Image Placement, Decorating Web Pages, and Tabular Data

By , About.com Guide

Tabular Data

The best use of tables is to display tabular data on your Web pages. This is the primary function of tables.

Using Tables for Layout

Once you have a good idea of how to use tables, you can use them to align your text precisely and get a layout that you want to have.

For example, many Web pages are designed with tables to put the navigation information on the left side of the page and keep the width of the page narrow for easier reading.

Tables give the Web designer a lot of control over the look and feel of the page.

Decorating Web Pages with Tables

One use of tables is to add pseudo-graphical elements to a page. You can use them as bands of color to break up a page in much the same way that you use horizontal lines.

<table width="100%"><tr><td style="background-color:#c00;"> </td></tr></table>

You can also insert vertical lines in pages to make them more visually attractive. Tables make this easy to do. Simply make a table column next to the line of text you would like to have highlighted in this way. Use the background-color style on the <td> tag and a browser safe color.

<table height="400"><tr><td style="background-color:#c00;"> </td></tr></table>

Other Uses for Tables

  • Put images together seamlessly. You can use tables to put separate images together to appear as one image, like a jigsaw puzzle.
  • Control the width of the page. It is much easier to read a line of text that is about 10 words long, and about 400-500 pixels wide. This use of tables is not recommended. CSS is a better tool for affecting the width of your documents.
  • Call out text using different color backgrounds for that section. This use of tables is not recommended. CSS is a better tool for affecting the background color of text and headlines.
Explore Web Design / HTML
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. HTML and XHTML
  5. XHTML
  6. Tables
  7. Using Tables - Layout Tables, Jigsaw Images, Decorating Web Pages>

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

All rights reserved.