Table Tip: Border Control

Nov 3
22:00

2002

Thomas Benton

Thomas Benton

  • Share this article on Facebook
  • Share this article on Twitter
  • Share this article on Linkedin

Want a border for your table, but don't want to use the standard border? Need a table cell outline? Here's how todo it.A SINGLE ROW, SINGLE COLUMN ... a table with one row and one column. Make

mediaimage

Want a border for your table,Table Tip: Border Control Articles but don't want to use the
standard border? Need a table cell outline? Here's how to
do it.

A SINGLE ROW, SINGLE COLUMN TABLE

Insert a table with one row and one column. Make border equal
zero. Set cellspacing to one. Set cellpadding to whatever you
want it to be.

Choose a background color for your table that will be the
border color you want to use. Then make the cell color white
or other color that you want. Here's an example:




bgcolor="#FF0000">
Content goes here...< d>
< r>
< able>

A SINGLE ROW, TWO CELL TABLE WITH BORDERED LEFT CELL

Actually, to get the effect we want, we'll embed a table in
another table.

First, create a 600 pixel table with one row and two columns.
We'll make the left column 140 pixels wide and the right
column 460 pixels. The left column will be used for a
navigation panel.

Set: border = 0, cellspacing = 0, cellpadding = 0, alignment
= center.

Set: left column width = 140, vertical align = top, horizontal
align = center; right column width = 460, vertical align = top,
horizontal align = center.

Now embed a table in the left column that is 140 pixels wide.
Set: border = 0, cellpadding = 3, cellspacing = 1, width =
140. Make the background color whatever color you want as an
outline of the left cell.

Make the cell color white, or another color you want to use,
and set the vertical alignment to top, and horizontal alignment
to center. Here's the table:







border="0" cellpadding="3" cellspacing="1" width="140" bgcolor="#008000">
Content goes
here...< d>
< r>
< able>
< d>



border="0" cellpadding="3" cellspacing="0" width="460">
Content goes here...< d>
< r>
< able>
< d>
< r>
< able>

You will also need to embed another table in the right 460 pixel
cell and set the cellpadding to 3 or more to separate the content
from the table cell border (included in the above example).

Use this technique to create a variety of table configurations.
You can even create a row of faux *buttons* for navigation without
using a graphic file.

Tables are a great way to control the placement of content in your
web page. They can also be used to decorate or enhance the appearance
of your pages. Go ahead and experiment! Have fun! Try different color
combinations. Don't forget that you can also specify the height of
tables and cells as well as width.