UP


www. Teachwebdesign .Com
F.A.Q.
Layout
Tables
Navi- gation
Temp- lates
HTML Tricks1
HTML Tricks2
Images
Glossary
HTML Tools
Design QUIZ
 
Site Map
· Learn HTML

· Design 2 (Building a Page)

· Design 3 (Fine Tuning)

· Design 4 (A Sample Page)

· Design 5 (A Page Analysis)

· Design 6 (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
 
 ·Tools
 
 ·Design Quiz
 
 ·Ask Questions


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

HTML TABLES DESIGN TECHNIQUE
For Webpage Layouts

    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 (for beginners)... using comment tags where necessary to aid in editing... load time is also fast considering today's high usage of fast broadband connections... NOTE: For advanced users we recommend RWD (Responsive Web Design) for layout techniques... INFO HERE

    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

<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tr><td width="100%" bgcolor="#ccffcc"> Top Page Area</td></tr>

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

</body>

Note: Using the overall width of "100%" will insure that the format fits your full 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

<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tr><td width="100%" bgcolor="#ff9999" colspan="2"> Top Page Area</td></tr>

<tr><td width="33%" bgcolor="#ffcc99"> Left Area</td>
<td width="67%" bgcolor="#ffff99"> Main Area</td></tr></table>

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td width="100%" bgcolor="white"> Bottom Area</td></tr>
</table>
</body>

EXAMPLE #3

Left
Area
G
U
T
T
E
R
Main Text Area
Bottom Area

VIEW IT FULL SCREEN

<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tr><td width="25%" bgcolor="#ffff99"> Left<br>Area</td>

<td width="5%" bgcolor="white"> <br></td>

<td width="70%" bgcolor="#ccffcc"> Main Text Area</td></tr></table>

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td width="100%" bgcolor="#cccc00"> Bottom Area</td></tr></table>

</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 &nbsp; (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 we 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

<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0">

<tr><td rowspan="5" width="25%" align="center">

Left Side<br>Area</td>
<td width="75%" align="center"> Top Page Area</td></tr>

<tr><td width="75%" align="center"> Next Area</td></tr><tr>

<td width="75%" align="center"> Next Area</td></tr><tr>

<td width="75%" align="center"> Next Area</td></tr><tr>

<td width="75%" align="center"> Bottom Page Area</td></tr>

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

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">

<tr><td width="75%" bgcolor="#ff9999" align="center" valign="top"> Your Top Main Area <br>

<table width="100%"> <tr><td width="25%" align="center" valign="top" bgcolor="#cccccc">

A Left<br>Side Bar</td>

<td width="75%" align="center" valign="top" bgcolor="#ccffcc"> Main Text Area</td></tr>
</table>

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

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

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

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td width="100%" align="center" valign="top" bgcolor="#ccff99">

Lower Text Area</td></tr>
</table>

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

<body style="background-image: url('URL of Background Here'); background-repeat: repeat-y; background-position: 0px 0px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr>

<td width="25%">&nbsp;</td>

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

</tr></table>
</body>
</html>

NOTE: Using &nbsp; (non breaking space code) 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!

We 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