CUSTOM HTML TABLES FOR PRESENTATION
New Examples Added Often
Including Custom DIV's

Here is a Custom Table made by using CSS 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

<table style="margin:auto;width:150px;
border:1px solid black;
border-collapse:collapse;">

<tr>
<td style="text-align:center;
color:white;background-color:black;">HEADER</td> </tr>

<tr> <td>ITEM # 1
<p>ITEM # 2</p>
<p>ITEM # 3</p>
<p>ITEM # 4</p>

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

You can vary the colors and sizes to suit your own tastes... next 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

By cleverly adjusting your border and padding attribute values, you can achieve this result:

Put Your Content Here

Here's the code:

<table style="margin:auto;width:150px;
border:2px solid black;
background-color:white;
padding:10px;">

<tr>
<td style="text-align:center;
background-color:#eeeeee;
padding:2px;">Put Your 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 style="margin:auto;
border:1px solid black;
padding:5px;">

<tr>
<td style="background-color:#ff6666;
text-align:center;
color:white;">Text Here</td></tr>

<tr><td style="text-align:left;">
 &#183;<a href="#">Link One</a></td></tr>
<tr><td style="text-align:left;">
 &#183;<a href="#">Link Two</a></td></tr>
<tr><td style="text-align:left;">
 &#183;<a href="#">Link Three</a></td></tr>
<tr><td style="text-align:left;">
 &#183;<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~~

FINALLY... with CSS3 (if the Browser supports it), you can simply code the "border-radius" into the block level element styling:

<div style="width:300px;padding:5px;border:2px solid #cc0000;border-radius:10px; text-align:center;">Using CSS3 Makes It Easy</div>

IN ADDITION... with CSS3, you can add a "box shadow" to the block level element styling:

<div style="width:300px;padding:5px;border:2px solid #cc0000;border-radius:10px;text-align:center;box-shadow:10px 10px 5px #000000;">Using CSS3 Makes It Easy
To Add Box Shadows</div>

WHILE I AM DOING SHADOWS... using CSS3 you can add text shadows too (not supported in Internet Explorer):

<div style="width:300px;padding:5px;border:2px solid #cc0000;border-radius:10px;text-align:center;box-shadow:10px 10px 5px #000000;"><span style="text-shadow:3px 3px 2px blue;">You Can Add Text Shadows Too</span></div>

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