HTML Custom Tables Davmagic.com

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 Custom DIV created by a Free Online Rounded Corner Generator which has many variations available and works well... if corner Images are necessary, it creates them automatically for you to download, plus you can vary text, colors and even create a gradiant background effect! It creates the HTML Code plus the CSS Code for your page! NOTE: Be sure to change the path to the Images in the CSS Code, to your actual Images location, after you download the images (Right click, Save target as)...

You can create all kinds
of effects with this Generator
including colors, borders etc.

Here's a second example with a border...

You can vary the border color, thickness, corner radius, content background color etc.

Here is how to create Custom DIV's with rounded corners without using any Images! Only CSS is used:

CONTENTS GOES HERE FOR ALL TEXT OR IMAGES CONTENTS GOES HERE FOR ALL TEXT OR IMAGES CONTENTS GOES HERE FOR ALL TEXT OR IMAGES CONTENTS GOES HERE FOR ALL TEXT OR IMAGES

<div class="container" style="width:75%;text-align:left;">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<p style="margin:10px;">CONTENTS GOES HERE FOR ALL TEXT CONTENTS GOES HERE FOR ALL TEXT OR IMAGES</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>

Here's the CSS:

IMPORTANT NOTE: You cannot specify Height OR Padding for the CONTAINER DIV... instead simply insert another Div or Block Level Element... as the <p> was used in the above example, ALSO this Style will NOT work for IE5 (will work for IE6+ and all other browsers)...

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>

Using CSS3 Makes It Easy

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>

Using CSS3 Makes It Easy
To Add Box Shadows

WHILE WE ARE 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>

You Can Add Text Shadows Too

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 HTML TABLES FOR PRESENTATION New Examples Added OftenIncluding Custom DIV's

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