Results 1 to 4 of 4

Thread: HTML Layout Example

  1. #1
    unishaidersha's Avatar
    unishaidersha is offline Senior Member+
    Last Online
    22nd January 2014 @ 07:56 AM
    Join Date
    04 Apr 2009
    Age
    30
    Posts
    193
    Threads
    27
    Credits
    925
    Thanked: 1

    Default HTML Layout Example

    Today i am going to show you some HTML Layout examples using tables that you can use for your website or for anything else you want.....................

    Basic Two Column Layout:

    Example

    HTML Code:
    <!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">
    <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 Header:

    Example

    HTML Code:
    <!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 Header and Footer:

    Example


    HTML Code:
    <!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 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>
    
    <!-- ============ FOOTER SECTION ============== -->
    <tr><td colspan="2" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
    </table>
    </body>
    
    <html>
    Two Column Layout With Header, Navigation Bar And Footer:

    Example

    HTML Code:
    <!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>
    
    
    <!-- ============ NAVIGATION BAR SECTION ============== -->
    <tr><td colspan="2" valign="middle" height="30" bgcolor="#a9ae9f"><a href="#">Home</a></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 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.<br>
    <br>
    
    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".<br>
    <br>
    
    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.</td></tr>
    
    <!-- ============ FOOTER SECTION ============== -->
    <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:

    Example

    HTML Code:
    <!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="3" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr>
    
    
    <!-- ============ NAVIGATION BAR SECTION ============== -->
    <tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f"><a href="#">Home</a></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>
    
    <!-- ============ MIDDLE COLUMN (CONTENT) ============== -->
    <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">&nbsp;</td>
    
    </tr>
    
    <!-- ============ FOOTER SECTION ============== -->
    <tr><td colspan="3" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
    </table>
    </body>
    
    <html>

  2. #2
    Ashfaq_designer is offline Senior Member+
    Last Online
    1st July 2014 @ 01:16 PM
    Join Date
    12 Aug 2008
    Age
    38
    Posts
    301
    Threads
    74
    Credits
    965
    Thanked
    11

    Default

    very nice Boss

  3. #3
    unishaidersha's Avatar
    unishaidersha is offline Senior Member+
    Last Online
    22nd January 2014 @ 07:56 AM
    Join Date
    04 Apr 2009
    Age
    30
    Posts
    193
    Threads
    27
    Credits
    925
    Thanked: 1

    Default

    Quote Ashfaq_designer said: View Post
    very nice Boss
    thanks

  4. #4
    MAshfaqNoor is offline Senior Member+
    Last Online
    21st March 2018 @ 05:42 PM
    Join Date
    09 Jan 2009
    Location
    Faisalabad
    Age
    45
    Gender
    Male
    Posts
    205
    Threads
    5
    Credits
    1,132
    Thanked
    0

    Default

    very nice
    thanks

Similar Threads

  1. Layout For Background
    By Fatima Iqbal in forum Adobe Photoshop
    Replies: 57
    Last Post: 4th March 2017, 12:35 AM
  2. Page Layout for Ur threads...
    By *Abdul-Basit* in forum Design Stuff
    Replies: 20
    Last Post: 17th July 2013, 10:05 PM
  3. how to make layout do you want
    By saqib2pk in forum General Discussion
    Replies: 42
    Last Post: 26th September 2012, 02:48 PM
  4. :HtmL Basis LearNing:Html PrOgramming
    By Rau7* in forum English IT Zone
    Replies: 28
    Last Post: 8th September 2012, 01:27 PM
  5. Replies: 9
    Last Post: 19th August 2012, 08:52 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •