15 - HTML-Layout

All the websites have their content laid out in an organized form like, title in the top-center, links on the left side, main content in the middle of the web page etc. Have you ever thought how it is done?

The designers of the websites use tables, div tag and CSS for this purpose. We have to plan the layout of our web page carefully.

Columns on a web page are created using div and table elements whereas the positioning of various elements and background colors are taken care of using CSS.

Tables are not intended for creating layouts but we use them for creating simple layouts.

Layout with <div> tag

We have discussed about this tag in our previous chapter HTML-Blocks.

This is one of the powerful tools from HTML for creating impressive web page layouts. <div> tag is a block level element  which is used for grouping elements of HTML.

To make things more clear we will create a simple and nice layout using <div> tag.

<html>
  <body>
    <div id="heading" style="background-color:gainsboro;height:50px">
      <h2>HTML Tutorial for Beginners</h2>
    </div>
    <div id="menu" style="background-color:beige;height:240px;width:100px;float:left;">
      <a href="intro.html">Introduction</a>&nbsp;
      <a href="Elements.html">Elements</a>&nbsp;
      <a href="Formatting.html">Formatting</a>&nbsp;
      <a href="Images.html">Images</a>&nbsp;
    </div>
    <div id="body" style="background-color:Aliceblue;height:225px;width:100%;">
      <pre>Hello Beginner,
        Please follow this tutorial to learn HTML.</pre>
    </div>
  </body>
</html>

he output of the above program would be like this,

Layouts using Tables

This is a simple way for creating Layouts in HTML. Although tables are designed for presenting tabular data they can be used for creating pretty good layouts for our web pages. The rows and columns of a table are used for presenting the content in an organized way. We can achieve the same output as above using tables also. The following is the program using tables for creating layout,

<html>
   <body>
     <table style="width:500px;" cellpadding="0" cellspacing="0">
      <tr>
       <td colspan="2" style="background-color:gainsboro; height:50px ">
         <h2>HTML Tutorial for Beginners</h2>
        </td>
      </tr>
      <tr>
       <td style="background-color : beige; height:200px; width:100px; float : left; vertical-align : top;">
         <a href="intro.html">Introduction</a><br>
         <a href="Elements.html">Elements</a><br>
         <a href="Formatting.html">Formatting</a><br>
         <a href="Images.html">Images</a>
       </td>
       <td style="background-color : Aliceblue; height:200px; width:400px; vertical-align : top;">
         <pre>Hello Beginner,
          Please follow this tutorial to learn HTML.</pre>
       </td>
      </tr>
    </table>
   </body>
</html>

The output of the above program would be,

The coding becomes quite complex & big when you use tables for creating layouts. To ease debugging, use indentation (proper spacing) while you code. You need to be very careful when assigning heights & widths to the tables.

Creating layouts using CSS is much easier and effective too. You can place all the style code in an external style sheet. The layout of all the WebPages can be changed by simply changing a single file. CSS layouts are easy to maintain.

We also have various templates (which are pre-built) available on web. Select one of them & customize it according to your need.

This is all about HTML Layouts in the next chapter we will learn how to create forms using HTML.

Like us on Facebook