DESIGN CUSTOM TABLES The Story Of Magic Dave

Here is a Custom Table made by "nesting" two tables and using the attribute "cellspacing" to give a Header Cell and a Thin Border around the whole table...a very Kool effect:

HEADER

ITEM # 1

ITEM # 2

ITEM # 3

ITEM # 4

<span style="color:white">HEADER</span>

</td></tr>
<tr><td bgcolor="#ffffff" align="left" valign="top">

ITEM #1<P>ITEM #2<P>ITEM #3<P>ITEM #4

</td></tr></table>
</td></tr></table>

You can vary the colors and sizes to suit your own tastes...the cellspacing value controls the width of the Thin Border around the whole table...here we have changed the color and increased the Thin Border size:

HEADER

ITEM # 1

ITEM # 2

ITEM # 3

ITEM # 4

And here we have eliminated the Header cell which results in a Table with content surrounded by a thin colored border!

Put your content here!

Or for the above, you could use just one table and one cell, and use the cellspacing attribute to control the thin border width, and use the table bgcolor to color it... but be sure to assign a width of 100% to the single cell, as well as specify a bgcolor for it (we used "white" here)...

Put your content here!

<table width="150" cellspacing="2" cellpadding="2" border="0" bgcolor="blue"> <tr><td align="center" valign="middle" width="100%" bgcolor="white"><span style="color:red;">Put your content here!</span></td> </tr></table>

Probably the BEST way is to simply style the table with a border:

Look Here

By cleverly Nesting THREE Tables and adjusting your cellspacing and cellpadding attribute values, you can achieve this result:

Put your content here!

Here's the code:

<table width="100%" border="0" cellspacing="10" cellpadding="5"><tr> <td width="100%" align="center" valign="middle" bgcolor="#dddddd">
<span style="color:#000000">Put your content here!</span>
</td></tr></table>
</td></tr></table>
</td></tr></table>

OR by simply styling a one cell table with a border and cell spacing:

Put your
content here!

<table style="border:solid thin black;" cellspacing="10" cellpadding="5" border="0"> <tr><td bgcolor="#cccccc" align="center" valign="top">Put your< /br>content here!</td></tr></table>

Here's a different way to present info with tables... see the code below (links are Dummy):

Text Here

·Link One

·Link Two

·Link Three

·Link Four

<table border="0" cellspacing="0" cellpadding="1" bgcolor="#000000">
<tr>
<td>
<table bgcolor="#ffffff" border="0" cellspacing="3" cellpadding="0">
<tr>
<td align="center" valign="middle" bgcolor="#ff6666">
Text Here</td>
</tr>
<tr>
<td align="left" valign="top"> ·<a href="#">Link One</a></td></tr>
<tr><td align="left" valign="top"> ·<a href="#">Link two</a></td></tr>
<tr><td align="left" valign="top"> ·<a href="#">Link Three</a></td></tr>
<tr><td align="left" valign="top"> ·<a href="#">Link Four</a></td></tr>
</table>
</td>
</tr>
</table>

OR use styling like this:

Text Here

·Link One

·Link Two

·Link Three

·Link Four

<table style="border:solid thin black;" cellspacing="3" cellpadding="3" border="0">
<tr>
<td bgcolor="#ff6666" align="center" valign="top">
<span style="color:white;">Text Here</span></td></tr>
<tr><td align="left" valign="top"> ·<a href="#">Link One</a></td></tr>
<tr><td align="left" valign="top"> ·<a href="#">Link Two</a></td></tr>
<tr><td align="left" valign="top"> ·<a href="#">Link Three</a></td></tr>
<tr><td align="left" valign="top"> ·<a href="#">Link Four</a></td></tr>
</table>

Here's another example designed to look like a typical gif banner image:

Sick Of Your Free Hosts UGLY Banners?
GET RID OF EM...REAL FAST!!!
~~Click Here~~

Here's a very kool Custom Line Table that will impress everyone who sees it on a webpage! The over-all size can be easily varied and you can insert anything in the center including Images!


	PUT TEXT OR IMAGES HERE !!

Here's a real fine way of presenting information using a Table... You can increase the size, length, number of cells and change colors to suit your requirements!

Put some info here...

More info here...

And more info here...

And here's the code...

Or better yet by just styling a three row table with a border and cell background colors, getting "fancy" with a DASHED Border:

Put some info here

More info here

And more info here

Here's another clever way of creating the Illusion of three tables that "Overlap" each other:

This area is the top seemingly overlapped table in the group!

	This area is the middle seemingly overlapping table in the group!

This area is the bottom seemingly overlapped table in the group!

See if you can figure out how it's done! No fair peeking!

Here is another way to present info on a page, using a more "centralized" table set-up ...remember you can change the background colors on any of these examples to suit your needs...



Top Text Area



Middle Text Area



Bottom Text Area

For lessons on Tables go to HTML Code Tutorials

For lessons on CSS (Cascading Style Sheets) go to W3Schools CSS Tutorials

Tables 1---Templates

CUSTOM TABLES FOR PRESENTATION New Examples Added Often

CUSTOM TABLES FOR PRESENTATION
New Examples Added Often