More Backgrounds

Table Within a Table

Using a table within a table is one way to separate the text and images from the table background making the information you want to target easier to read. Such a table might look like the following sample:


HTML code for this table is:

First Table with colored background

Second Table with white background inside First Table for text and images

In the example above, the first table has a background color of red, while the second table that is to be used for information has a background of white. The background for the first table can be any color, image or simple animation you want.

Table with a Border

If you only want a simple colored border around the table, this can be accomplished by adding border information in the table tag rather than coding a background color.

Such a table might look like the following:



The HTML code for this table is:

Single Table Using Colored Border

In the first sample, where we’ve used a table in a table, you’ll see that the background color does not display the uniformly top/bottom/sides. Should you want a uniform background edge to your table, you¬† may need¬†to make adjustments to the HTML code¬†to get¬†a more pleasing look.

These adjustments may be done by:

assigning different widths to the tables or

by using hard returns –
– to force space above or below the second table.

In the second sample where we’ve designated a border size of 10 and assigned a border color of blue (#0000ff”), the border is uniform on all sides of the table.

Other Background Options

Background effects can be just about anything you want. Some of the more common backgrounds used are:

  • ¬†Gradients
  • Textures
  • Lines
  • Checks
  • Faded images or logos
  • Blurred images

And for a unique look that separates you from the rest, ¬†don’t be afraid to combine and layer different effects.

Comments are closed.