TABLE CODES FOR WEBSITE LAYOUT

Some basic and useful table coded layout for static web design is given below you can copy and paste . Save Page as index.htm or index.html put the content between them

Basic Two Layout:

<!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> <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> <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:

<!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> <td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr><tr><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> <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:

<!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> <td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr><tr><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> <td width="80%" valign="top" bgcolor="#d2d8c7"> <h2>Page heading</h2>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.<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".<br><br> The third table row creates the footer. Like the header, it contains a single table cell which uses the colspan="2" attribute-value pair.</td></tr><tr><td colspan="2" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr></table></body> <html>

Three column layout with header, navigation bar and footer:

<!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> <td colspan="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr><tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f"><a href="#">Home</a></td></tr><tr><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> <td width="55%" valign="top" bgcolor="#d2d8c7"> <h2>Page heading</h2>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. <br><br> The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).<br><br> </td> <td width="25%" valign="top" bgcolor="#999f8e"> </td> </tr><tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr></table></body> <html>

The above code is generated through the website IRONSPIDER . Visitor are advised please see the visual layout on above mentioned weblink.

Aapno jaunsar

TABLE CODES FOR WEBSITE LAYOUT

Two column layout with a header:

Author : kapil bhatt

Share this

copy paste protected

Aapno jaunsar

TABLE CODES FOR WEBSITE LAYOUT

Two column layout with a header:

Author : kapil bhatt

Share this

Related Posts

copy paste protected