HTML Layouts HTML Layouts
HTML Layouts Tutorial and Information







HTML Advanced - HTML Layouts

Here are some very useful HTML layouts, which basically let you create any web site layout and form the base for professional HTML web design. This HTML layout tutorial uses tables. If you want to create a web site layout using CSS instead of table design please visit Webmaster Seminar's CSS tutorial.
Note: Table properties should be specified in a CSS file. The following layout examples do not use CSS.

Classic Two-Column HTML Table Layout

Here is an example of a two-column classic table layout where the table is centered,750 pixels wide (fixed width), and a border set to "1". Cellspacing and cellpadding are set to "2". 
<table align="center" width="750" cellspacing="2" cellpadding="2" border="1">
<tr>
    <td>Left Table Cell</td>
    <td>Rigth Table Cell</td>
</tr>
</table>
Click here to see what this two-column table layout will look like in a web browser.

Classic Three-Column HTML Table Layout

Here is a classic 3-column HTML table layout, the table is centered and has a fixed width of 750 pixels. The table border is set to "1", cellspacing and cellpadding are set to "2". The width of the left and rigth column is set to 120 pixels. This is a classic 3-column HTML layout and probably the most commonly used HTML layout. 
<table align="center" width="750" cellspacing="2" cellpadding="2" border="1">
<tr>
    <td width="120">Rigth Table Cell</td>
    <td>Center Table Cell</td>
    <td width="120">Left Table Cell</td>
</tr>
</table>
Click here to see what this 3-column table layout will look like in a web browser.

Three-Column HTML Table Layout With Dynamic Middle/Center Column

To create a 3-column HTML layout with a dynamic middle or center column just replace the fixed width of the table layout (width="750") with a width of 80% percent (width="80%"). The following table layout is the same as in the example above, instead of specifying a fixed width of 750 pixels, this table layout uses a table width of 80% instead. This will keep the right and left column 120 pixels wide, and the center column's width will adjust to the available screen width.

In order to make sure the content or text for the 3-columns aligns to the top of the table (by default the text or content in a table cell is middle aligned), the valign attribute needs to be added to each column: 

<table align="center" width="80%" cellspacing="2" cellpadding="2" border="1">
<tr>
    <td valign="top" width="120">Rigth Table Cell</td>
    <td valign="top">Center Table Cell</td>
    <td valign="top" width="120">Left Table Cell</td>
</tr>
</table>
Click here to see what this 3-column table layout with dynamic center column will look like in a web browser.

Advanced HTML Table Layouts
Nested Tables - Gradient Background Image

You can add tables inside tables (nested tables) to create cool effects using borders, background colors, cellspacing, and cellpadding.

Using Gradient Background Image:

Gradient background images can add nice effects to tables. See the example below for more information about HTML layouts with nested tables and gradient background images:

Click here to see what this nested table layout with dynamic center column and gradient background image will look like in a web browser.

Note: Use CSS for table properties and backgrounds! Visit Webmaster Seminar's CSS tutorial for more information about Cascading Style Sheets.



HTML Related Links

© This Article is Copyrighted by WebmasterSeminar.com

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:


Copy the code below and paste into your web page 
<a href="http://www.webmasterseminar.com/htmllayouts.php">
Webmaster Seminar</a><br />
HTML Layouts - Free Information, Tutorials and HTML Resources



HTML Layouts - © WebmasterSeminar 2000 - 2008 Terms Of Use