· Learn HTML

· Design 1 (Building a Page)

· Design 2 (Fine Tuning)

· Design 3 (A Sample Page)

· Design 4 (A Page Analysis)

· Design 5 (Mobile Web Pages)



Design Links
 ·HTML Tags
 
 ·Image Sites
 
 ·Validators
 
 ·Web Hosts
 
 ·Design Sites
 
 ·CSS Sites
 
 ·Javascript
 
 ·Misc Sites


Help Pages
 ·F A Q
 
 ·Page Layout
 
 ·Custom Tables
 
 ·Page Navigation
 
 ·Templates
 
 ·HTML Tricks 1
 
 ·HTML Tricks 2
 
 ·Image Help
 
 ·Glossary
 
 ·Design Quiz
 
 ·Ask Questions


Tutorials
 ·Tutorial 1
 
 ·Tutorial 2
 
 ·Craigslist Tutorial
 
 ·eCommerce Tutorial
 
 ·Page Videos
 
 ·Form Mail
 
 ·Sound Tutorial
 

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

For lessons on Tables go to HTML Code Tutorial

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

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>

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 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