|
Want a border for your table, 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.
About the Author:
Thomas Benton is the owner of WebDesignWisdom.com and the publisher of Active-eBuilder,
The Do-It-Yourself Web Design and Internet Marketing Ezine. Visit Tom's resource-rich
website: http://www.webdesignwisdom.com |
