Basic HTML Page layout using table tag
A web page layout is often divided into multiple columns. Then these columns are treated as different sections of data. There are two most popular ways to create those columns in html page. One way is using <div> tag and another way is using HTML <table> tag.
Most of the website layout has one common header area where we place website logo or tagline (sometimes menu as well). Then we have main content section divided into two or three columns. Bottom of the webpage contains a common footer section, where we can place logo, copyright statement, menu or some other content.
In two columns we have one left or right sidebar area and one content area. In three columns page design, we have left sidebar area, main content area and then one right sidebar area.
Creating a HTML page layout using table tags
Let us create a two column layout along with header and footer area using HTML table.
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Layout using Tables</title>
</head>
<body>
<table width="90%" border="1" align="center">
<tr>
<td colspan="2" bgcolor="green">
<h1>Website Title or Tagline</h1>
</td>
</tr>
<tr valign="top">
<td bgcolor="lightblue" width="30%">
<b>Fruit Menu</b>
Orange<br />
Banana<br />
Apple<br />
Grapes
</td>
<td bgcolor="orange" width="60%" height="200">
This is the main content area.
</td>
</tr>
<tr>
<td colspan="2" bgcolor="skyblue" align="center">
Copyright © 2017 TutorialsClass.com
</td>
</tr>
</table>
</body>
</html>| Tutorials |
|---|
| No Content Found. |
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |