Basic two column layout
|
Menu column
|
Content
column
Website
Logo
Page heading This is a basic two-column web page layout. The left column or themenu column is a narrow band of space (usually between 15-25% of the page width) and is reserved for a menu of hyperlinks leading to other pages on your website. The table used to create this layout employs a single table row containing two table cells. The right column or the content column takes up the lion's share of the web page width and contains the actual content of each particular page. In a basic two column layout like this, it is common to place the website logo at the top of the content column on each page. |
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>WEB PAGE TITLE GOES
HERE</title>
</head>
<body style="margin: 0px;
padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table width="100%"
style="height: 100%;" cellpadding="10"
cellspacing="0" border="0"><tr>
<!-- ============ LEFT COLUMN
(MENU) ============== -->
<td width="20%"
valign="top" bgcolor="#999f8e">
<a href="#">Menu
link</a><br>
<a href="#">Menu
link</a><br>
<a href="#">Menu
link</a><br>
<a href="#">Menu
link</a><br>
<a href="#">Menu
link</a>
</td>
<!-- ============ RIGHT COLUMN
(CONTENT) ============== -->
<td width="80%"
valign="top" bgcolor="#d2d8c7">
<h1>Website Logo</h1>
<h2>Page heading</h2>
This is a basic two-column web
page layout. The left column or the <i>menu column</i> is a narrow
band of space (usually between 15-25% of the page width) and is reserved for a
menu of hyperlinks leading to other pages on your website. The table used to
create this layout employs a single table row containing two table
cells.<br>
<br>
The right column or the
<i>content column</i> takes up the lion's share of the web page
width and contains the actual content of each particular page. In a basic two
column layout like this, it is common to place the website logo at the top of
the content column on each page.</td></tr></table>
</body>
<html>
Two column layout with a header
|
Website Logo
< ~ Header ~ >
|
|
|
Menu column
|
Content
column
Page heading
Here's a two column layout with a header section that spans the width of both columns. The first table row creates the header and contains a single table cell which uses the colspan="2" attribute-value pair. The website logo typically goes in the header section. The second table row contains two table cells which create the menu column (left) and the content column (right). The colspan attribute is not set in either so they default to colspan="1". |
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>WEB PAGE TITLE GOES
HERE</title>
</head>
<body style="margin: 0px;
padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table width="100%"
style="height: 100%;" cellpadding="10" cellspacing="0"
border="0">
<tr>
<!-- ============ HEADER
SECTION ============== -->
<td colspan="2"
style="height: 100px;"
bgcolor="#777d6a"><h1>Website
Logo</h1></td></tr><tr>
<!-- ============ LEFT COLUMN
(MENU) ============== -->
<td width="20%"
valign="top" bgcolor="#999f8e">
<a href="#">Menu
link</a><br>
<a href="#">Menu
link</a><br>
<a href="#">Menu
link</a><br>
<a href="#">Menu
link</a><br>
<a href="#">Menu
link</a>
</td>
<!-- ============ RIGHT COLUMN
(CONTENT) ============== -->
<td width="80%" valign="top"
bgcolor="#d2d8c7">
<h2>Page heading</h2>
Here's a two column layout with a
header section that spans the width of both columns. The first table row
creates the header and contains a single table cell which uses the
colspan="2" attribute-value pair. The website logo typically goes in
the header section.<br>
<br>
The second table row contains two
table cells which create the menu column (left) and the content column (right).
The colspan attribute is not set in either so they default to colspan="1".</td></tr></table>
</body>
<html>
Two column layout with a header and a footer
|
Website Logo
< ~ Header ~ >
|
|
|
Menu column
|
Content
column
Page heading
Here's a two column layout with header and footer sections that span the width of both columns. The first table row creates the header and contains a single table cell which uses the colspan="2" attribute-value pair. The second table row contains two table cells which create the menu column (left) and the content column (right). The colspan attribute is not set in either so they default to colspan="1". The third table row creates the footer. Like the header, it contains a single table cell which uses the colspan="2" attribute-value pair. |
|
< ~ Footer ~ >
|
|
Two column layout with
header, navigation bar and footer
|
Website Logo
< ~ Header ~ >
|
|
|
< ~ Navigation bar ~ >
|
|
|
Menu column
|
Content
column
Page heading
Here's a two column layout with header, navigation bar and footer sections. The first two table rows create the header and the navigation bar and contain a single table cell each. These table cells use the colspan="2" attribute-value pair. The third table row contains two table cells which create the menu column (left) and the content column (right). The colspan attribute is not set in either so they default to colspan="1". The fourth table row creates the footer. Like the header and the navigation bar, it contains a single table cell which uses the colspan="2" attribute-value pair. |
|
< ~ Footer ~ >
|
|
Three column layout with
header, navigation bar and footer
|
Website Logo
< ~ Header ~ >
|
||
|
< ~ Navigation bar ~ >
|
||
|
Menu column
|
Content
column
Page heading
A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right). |
Extra column
|
|
< ~ Footer ~ >
|
||
No comments:
Post a Comment