|
Table_Tip_Border_Control
| Table Tip: Border Control
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:
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:
Content goes here...< d> < r> < able>
< d> 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
|
|
| |
| |
