DESIGN TABLES The Story Of Magic Dave

| form mail tutorial

| angelfire tutorial

| sound tutorial

| news grps

learn html
design 1
design 2
design 3
tricks 1
tricks 2
images
tables 1
tables 2
templates
critiques
tools
links
glossary
f.a.q.
quiz
tutorial 1
tutorial 2
video tutorial
form mail tutorial
angelfire tutorial
sound tutorial

Design Links

·HTML Tags

·Image Sites

·Validators

·Web Hosts

·Design Sites

·WebTv Help

·CSS Sites

·Javascript

·Misc Sites

Help Pages

·F A Q

·Page Layout

·Tricks

·Image Help

·Definitions

·Tools

·Tutorial 1

·Tutorial 2

·Video Tutorial

·Form Mail Tutorial

·Angelfire Tutorial

·Sound Tutorial

Extras

·Critiques

·Templates

·Quiz

·Ask Questions

TABLES DESIGN TECHNIQUE
For Webpage Layouts

Quick-Jump To:

PAGE LAYOUT EXAMPLES
C & P PAGE TEMPLATES
BORDER-BACKGROUND PAGES
CUSTOM TABLES

Have A Question On Tables...

TO PAGE BOTTOM

We have had so many requests for more information on how to make a more structured page instead of just a page that scrolls down with links and tables of text etc....So here's the way...using the Tables Layout Design Technique...

Remember...you will be making your WHOLE PAGE into one big HTML table...with sub-tables and cells... this will create a sort-of "page grid" to locate elements and content on your web page...

And...you can fill each area with Text, Images, Links, More Tables OR leave it BLANK (put in  ) to create a "space" area...

You can use background colors ( <TD bgcolor="#??????"> ) to create even more effects...

Below are several page layout examples using a Table Format with the source code below each...for you to study or copy for your own page source code!

You can make other Table Formats to suit your choice!

For lessons on Tables go to HTML Code Tutorial

EXAMPLE #1

Top Page Area

Left Area

Center Area

Right Area

Bottom Page Area

Now with the table borders="1" so you can "see" where they are:

Top Page Area

Left Area

Center Area

Right Area

Bottom Page Area

Now with borders="0" but <TD> (table cells) background colors added:

Top Page Area

Left Area

Center Area

Right Area

Bottom Page Area

VIEW IT FULL SCREEN

</TABLE>
<TABLE width="100%" cellspacing="0" cellpadding="0" border="0">
<TR><TD width="25%" bgcolor="#ff9999"> Left Area</TD>

<TD width="50%" bgcolor="white"> Center Area</TD>

<TD width="25%" bgcolor="#cccccc"> Right Area</TD></TR></TABLE>

<TABLE width="100%" cellspacing="0" cellpadding="0" border="0">
<TR><TD width="100%" bgcolor="yellow"> Bottom Page Area</TD></TR></TABLE>

</CENTER>
</BODY>

Note: Using the overall width of "100%" will insure that the format fits your full browser window, and CENTERING it will insure that it aligns centered on the browser window... but more IMPORTANTLY using this VARIABLE value as opposed to a FIXED value of "xxx" pixels will present the page correctly to ANY PC RESIZED WINDOW and it will FILL the entire browser window, using up all the available canvas that is available... it's a more "economical" way than using a "fixed pixel" width...

EXAMPLE #2

Top Page Area
Left Area	Main Area

Bottom Area

VIEW IT FULL SCREEN

<TABLE width="100%" cellspacing="0" cellpadding="0" border="0">
<TR><TD width="100%" bgcolor="white"> Bottom Area</TD></TR>
</TABLE>
</CENTER>
</BODY>

EXAMPLE #3

Left
Area

G
U
T
T
E
R

Main Text Area

Bottom Area

VIEW IT FULL SCREEN

<TABLE width="100%" cellspacing="0" cellpadding="0" border="0">
<TR><TD width="100%" bgcolor="#cccc00"> Bottom Area</TD></TR></TABLE>

</CENTER>
</BODY>

Note: It is advisable to create a new table where necessary and "stack them" to avoid having to use Colspan or Rowspan... being sure to specify "100%" for the Table Width...

Note: The "Gutter" cell can be used to space a text area from an adjacent area to give a "cleaner" design...just add <BR> OR add   (a non-breaking space) to the cell and nothing else, to keep it from "collapsing" on some browsers...

OR if this blank cell "collapses" you need to add an Invisible Single Pixel Gif to it! LEARN HOW HERE

Note: All the table cells <TD>'s will expand downwards (height) naturally within each table as you add more text, links, images, etc... this is the beauty of using the Tables Layout Design Technique, however browsers do not wrap IMAGES that are wider than the cell AND they don't wrap text strings that may cause the cell to expand, so be careful to "fit" things in that will actually fit... to keep the cell from expanding sideways and screwing up your page... use <BR> when an unbroken text string gets too long for the cell width so it will wrap... and use the IMAGE attributes "width" and "height" to control IMAGES within cells... ALSO it is NOT necessary to specify overall Table HEIGHT because the cells will expand vertically ...as I mentioned!

EXAMPLE #4

Here Is An Example That DOES Use The ROWSPAN Attribute:

Left Side Area	Top Page Area
	Next Area
	Next Area
	Next Area
	Bottom Page Area

VIEW IT FULL SCREEN

Left Side<BR>Area</TD>
<TD width="75%" align="center"> Top Page Area</TD></TR>

<TD width="75%" align="center"> Bottom Page Area</TD></TR>

</TABLE>
</CENTER>
</BODY>

EXAMPLE #5

Your Top Main Area

A Left
Side Bar

Main Text Area

Right
Side
Bar

Lower Text Area

VIEW IT FULL SCREEN

<html>
<head><title>Your Title Here</title> </head>

A Left<BR>Side Bar</td>

</TD>
<TD width="25%" bgcolor="blue" align="center" valign="top">

<span style="color:white"> Right<BR>Side<BR>Bar</span>

</TD></TR>
</TABLE>

Lower Text Area</TD></TR>
</TABLE>

</CENTER>
</body>
</html>

Here's how to use Tables to layout a page that has a Border Background on it...

Let's say your Border is 100 pixels wide and on the left side of your Image which is say 544x375 pixels in size (the Image should be wide enough so that it will not tile horizontally but only vertically ... across an 800x600 resolution PC window)...

It is important to use CSS code for proper background usage, and you can STUDY it at W3Schools CSS Tutorials

To get your text, images etc. to show in the area to the right of the Border...use this for your entire page code:

<html>
<head><title>Your Title</title></head>

<TD width="75%" align="center" valign="top">All Your Content Here</TD>

</TR></TABLE></CENTER>
</body>
</html>

NOTE: Using <BR> in the left table cell makes it empty but keeps it from "collapsing" and your Border will show there! You can if desired put text, images, links etc. in the left cell and they will show over the background image! If the cell widths of "25%" and "75%" are not right to "fit" over your body background image, then change them so they work for you!

You can if you want, put the Image as a background to the actual left side Table Cell:

I have a SAMPLE Border Background for you to view...

Now goto This Sample Page to see how it looks behind the table in the page...

For lessons on Tables go to HTML Code Tutorial

TO PAGE TOP

Images---Tables 2

TABLES DESIGN TECHNIQUE For Webpage Layouts

TABLES DESIGN TECHNIQUE
For Webpage Layouts