Skip to main content

HTML Layouts

Web page layout is very important to make your website look good.
Design your webpage layout very carefully.

Website Layouts

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
Multiple columns is created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages.

HTML Layouts - Using Tables

The simplest way of creating layouts is by using the HTML <table> tag.
The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 </td>
</tr>
</table>

</body>
</html>
The HTML code above will produce the following result:

Main Title of Web Page
Menu
HTML
CSS
JavaScript 		Content goes here
Copyright © 2011
Remark Note: Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

Comments

Post a Comment

Popular posts from this blog

Invigilators caught helping relatives during exams

HYDERABAD: The Chairman Board of Intermediate and Secondary Education (BISE) Hyderabad Abdul Aleem Khanzada, on Monday, detected four invigilators helping their sisters and daughters in cheating during Higher Secondary School Certificate Part-I and Part-II Annual Examinations 2012. According to a spokesman, the Chairman BISE Hyderabad caught these invigilators red handed during his surprise visit to examination centres of Tando Allahyar and Chambar along with his team members. While taking spot action, the Chairman BISE Hyderabad has relieved these four invigilators from the duty of conducting examinations. Besides, he also caught red handed 21 male and female candidates who were engaged in copying in the examinations. The other vigilance committees of the board which conducted surprise visits to Hyderabad, Shaheed Benazirabad, Matiari, Tando Allahyar, Tando Muhammad Khan, Badin, Thatta, Jamshoro and Dadu districts detected 144 male and female candidates engaged in copying during the
Post a Comment
Read more

Ufone TV Commercials Free To View or Download

30 Second Offer Sim Lagao Offer Ufone Winner Offer
Post a Comment
Read more