Thursday, 18 July 2013

HTML Layout - Using Tables

Posted by Unknown on 10:50 with No comments
Web page layout is very important to give better look to your website. You should design your webpage layout very carefully.
You may have noticed that there are many websites which have put their content in multiple columns - they are formatted like a magazine or newspaper. This is easily achieved by using tables or division or span tags. Sometime you use CSS as well to position various elements or to create backgrounds or colorful look for the pages.
Web page layout is very important to give better look to your website. You should design your webpage layout very carefully.
You may have noticed that there are many websites which have put their content in multiple columns - they are formatted like a magazine or newspaper. This is easily achieved by using tables or division or span tags. Sometime you use CSS as well to position various elements or to create backgrounds or colorful look for the pages.

HTML Layout - Using Tables:

The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.
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:
<table width="100%"  border="0">
  <tr>
    <td colspan="2" style="background-color:#CC99FF;">
      <h1>This is Web Page Main title</h1>
    </td>
  </tr>
  <tr valign="top">
    <td style="background-color:#FFCCFF;
                  width:100px;text-align:top;">
      <b>Main Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
    <td style="background-color:#eeeeee;height:200px;
                  width:300px;text-align:top;">
        Technical and Managerial Tutorials
    </td>
  </tr>
  <tr>
    <td colspan="2" style="background-color:#CC99FF;">
        <center>
      Copyright © 2007 Tutorialspoint.com
        </center>
    </td>
  </tr>
</table>
This will produce following result:

This is Web Page Main title
Main Menu
HTML
PHP
PERL... 		Technical and Managerial Tutorials
Copyright © 2007 Tutorialspoint.com
To Become more comfortable - Do Online Practice

Multiuple Columns Layouts - 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. It will be very similar to our site tutorialspoint.com.
Here is an example to create three column layout:
<table width="100%"  border="0">
  <tr valign="top">
    <td style="background-color:#FFCCFF;width:20%;
                  text-align:top;">
      <b>Main Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
    <td style="background-color:#eeeeee;height:200px;
                  width:60%;text-align:top;">
        Technical and Managerial Tutorials
    </td>
        <td style="background-color:#FFCCFF;
                      width:20%;text-align:top;">
      <b>Right Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
   </tr>
  <table>
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 div element is a block level element used for grouping HTML elements. While the div tag is a block-level element, the HTML span element is used for grouping elements at an inline level.
Although we can achieve pretty nice layouts with HTML tables, tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.
You can achieve same result whatever you have achieved using <table> tag in previous example.
<div style="width:100%">
  <div style="background-color:#CC99FF;">
      <b style="font-size:150%">This is Web Page Main title</b>
  </div>
  <div style="background-color:#FFCCFF;
                 height:200px;width:100px;float:left;">
      <b>Main Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
  </div>
  <div style="background-color:#eeeeee;
                 height:200px;width:300px;float:left;">
	Technical and Managerial Tutorials
  </div>
  <div style="background-color:#CC99FF;clear:both">
  <center>
      Copyright © 2007 Tutorialspoint.com
  </center>
  </div>
</div>
This will produce following result:
This is Web Page Main title
Main Menu
HTML
PHP
PERL...
Technical a

:

The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.
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:
<table width="100%"  border="0">
  <tr>
    <td colspan="2" style="background-color:#CC99FF;">
      <h1>This is Web Page Main title</h1>
    </td>
  </tr>
  <tr valign="top">
    <td style="background-color:#FFCCFF;
                  width:100px;text-align:top;">
      <b>Main Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
    <td style="background-color:#eeeeee;height:200px;
                  width:300px;text-align:top;">
        Technical and Managerial Tutorials
    </td>
  </tr>
  <tr>
    <td colspan="2" style="background-color:#CC99FF;">
        <center>
      Copyright © 2007 Tutorialspoint.com
        </center>
    </td>
  </tr>
</table>
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 Layouts - 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. It will be very similar to our site tutorialspoint.com.
Here is an example to create three column layout:
<table width="100%"  border="0">
  <tr valign="top">
    <td style="background-color:#FFCCFF;width:20%;
                  text-align:top;">
      <b>Main Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
    <td style="background-color:#eeeeee;height:200px;
                  width:60%;text-align:top;">
        Technical and Managerial Tutorials
    </td>
        <td style="background-color:#FFCCFF;
                      width:20%;text-align:top;">
      <b>Right Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
    </td>
   </tr>
  <table>
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 div element is a block level element used for grouping HTML elements. While the div tag is a block-level element, the HTML span element is used for grouping elements at an inline level.
Although we can achieve pretty nice layouts with HTML tables, tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.
You can achieve same result whatever you have achieved using <table> tag in previous example.
<div style="width:100%">
  <div style="background-color:#CC99FF;">
      <b style="font-size:150%">This is Web Page Main title</b>
  </div>
  <div style="background-color:#FFCCFF;
                 height:200px;width:100px;float:left;">
      <b>Main Menu</b><br />
      HTML<br />
      PHP<br />
      PERL...
  </div>
  <div style="background-color:#eeeeee;
                 height:200px;width:300px;float:left;">
	Technical and Managerial Tutorials
  </div>
  <div style="background-color:#CC99FF;clear:both">
  <center>
      Copyright © 2007 Tutorialspoint.com
  </center>
  </div>
</div>
This will produce following result:
This is Web Page Main title
Main Menu
HTML
PHP
PERL...
Technical a

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)