28. HTML Layouts

 

A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel.
Now a days, all modern websites are using CSS and Javascript based framework to come up with responsive and dynamic websites but you can create a good layout using simple HTML tables or division tags in combination with other formatting tags. This chapter will give you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes.

HTML Layout - Using Tables

The simplest and most popular way of creating layouts is using HTML
tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.

Example

For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute:

    

      

This is Web Page Main title

  

    

      Main Menu

      HTML

      PHP

      PERL...
    
    

        Technical and Managerial Tutorials
    
  

    

      
      Copyright © 2007 Tutorialspoint.com
      

  

This will produce following result:

This is Web Page Main title
Main Menu HTML PHP PERL...	Technical and Managerial Tutorials
Copyright © 2007 Tutorialspoint.com

Multiuple Columns Layout - Using Tables

You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. This layout will be very similar to what we have at our website tutorialspoint.com.

Example

Here is an example to create three column layout:

    

      Main Menu

      HTML

      PHP

      PERL...
    
    

        Technical and Managerial Tutorials
    
    

      Right Menu

      HTML

      PHP

      PERL...
    
   

This will produce following result:

Main Menu HTML PHP PERL...

Technical and Managerial Tutorials

Right Menu HTML PHP PERL...

HTML Layouts - Using DIV, SPAN

The

element is a block level element used for grouping HTML elements. While the

tag is a block-level element, the HTML element is used for grouping elements at an inline level.

Although we can achieve pretty nice layouts with HTML tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.

Note: This example makes use of Cascading Style Sheet (CSS), so before understanding this example you need to have a better understanding on how CSS works.

Example

Here we will try to achieve same result using

tag along with CSS, whatever you have achieved using
tag in previous example.

  

      

This is Web Page Main title


      

Main Menu
HTML

      PHP

      PERL...
  

    Technical and Managerial Tutorials


  

      

Right Menu
HTML

      PHP

      PERL...
  

  
      Copyright © 2007 Tutorialspoint.com
  

This will produce following result:

This is Web Page Main title

Main Menu

HTML
PHP
PERL...

Technical and Managerial Tutorials

Right Menu

HTML
PHP
PERL...

Copyright © 2007 Tutorialspoint.com

You can create better layout using DIV, SPAN along with CSS. For more information on CSS, please refer to CSS Tutorial.

• Tweet
• Share
• Share
• Share
• Share