Login | Contact Us | Site Map | Resources

Other HTML Elements

Home > HTML Tutorial > HTML Layouts

HTML Layouts

Laying out your webpage is a process which should begin with a sheet of paper or a graphical computer program, as you decide what you want your website to look like, because the design itself can "make or break" a website all on its own.

Once you decide on a design, transferring it to HTML becomes the next step in the process. There are two main methods available to complete this next step: tables and CSS.

HTML tables have been used for years as the only layout method available, but CSS-based layouts are becoming increasingly popular as browser support for CSS has improved, causing many developers to consider table layouts antiquated. CSS layouts are said to load faster (by milliseconds), cut down on messy HTML code and be easier to maintain, however both options are supported by modern browsers.

Our example is a simple two-column layout with a header, a footer and a width of 100%, which expands and contracts according to the size of your screen:

HTML Layout

This, and most other layouts, can be produced by either tables or CSS.

Table Layout

Our two-column layout with header and footer can be brought to life as a table using the following code:

<html>
<head>
  <title>An HTML Table Webpage Layout</title>
</head>
<body style="margin: 0; border: 0;">

  <table style="border: 0; width: 100%;">
  <tr> <td colspan="2" style="background: #006DA6;">Header</td> </tr>
  <tr>
    <td style="width: 25%; background: #658C00;">Navigation</td>
    <td style="width: 75%; background: #FFA100;"> <br /><br />Contents<br /><br /><br /> </td>
  </tr>
  <tr> <td colspan="2" style="background: #006DA6;">Footer</td> </tr>
  </table>

</body>
</html>

Background colors are added so that the results are visible, so copy and paste this code to your HTML file and try it out!

CSS Layouts

Our two-column CSS layout with header and footer can be brought to life using the following code:

<html>
<head>
  <title>An HTML And CSS Webpage Layout</title>
</head>
<body style="margin: 0; border: 0;">

  <div style="width: 100%; background: #006DA6;">Header</div>

  <div style="float: left; width: 100%;">
    <div style="margin-left: 280px;">
      <div style="margin-top: 0; background: #FFA100;">
        <br /> <br /> Contents <br /> <br /> <br />
      </div>
    </div>
  </div>

  <div style="float: left; width: 280px; margin-left: -100%;">
    <div style="margin-top: 0; background: #658C00;">
      <br /> <br /> Navigation <br /> <br /> <br />
    </div>
  </div>

  <div style="width: 100%; background: #006DA6;">Footer</div>

</body>
</html>

Background colors are added so that the results are visible, so copy and paste this code to your HTML file and try it out!