TABLES DESIGN TECHNIQUE Magicdaveswebdesign

We have had so many requests for more information on how to layout a page so that content can be added in many different areas... So here's the way... using the Tables Layout Design Technique...

NOTE: Many web designers frown on using HTML Tables for page layout... so be it... however Tables still work well if you code them properly, and in this author's opinion are easier to use... using comment tags where necessary to aid in editing... load time is also fast considering today's high usage of fast broadband connections...

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

For Copy & Paste HTML Templates go to Our Templates Page

For Using Tables For Presentation go to Our Custom tables Page

For Using Tables For Border Background Layout go to Border Background Layout

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 SCREEN RESOLUTION CHANGES 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 Background Image which is say 544x375 pixels in size ( be sure to use CSS Background Properties to set the location and repeat of your Image)...

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!

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

For Copy & Paste HTML Templates go to Our Templates Page

For Using Tables For Presentation go to Our Custom tables Page

For Using Tables For Border Background Layout go to Border Background Layout

Images---Tables 2

TABLES DESIGN TECHNIQUE For Webpage Layouts

TABLES DESIGN TECHNIQUE
For Webpage Layouts