HTML Layouts

  • HTML Layout plays very important role in website designing.
  • These Layouts give the better look to any webpage or website. HTML Layouts are very neccessary as per developer's point of view.
  • Here we are going to design simple layouts by using two methods:
    • Using <div> tag
    • Using Table

Using <div> tag

<div> tag is normally used to design a layout for websites.

Here is an example of designing html layout by using <div> tag:

<!DOCTYPE html >
<html>
<head>
<style>
#header {
background-color:yellow;
color:black;
text-align:center;
padding:5px;
}
#menu {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#main_section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:gray;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
<body>
<div id="header">
<h1>www.eitworld.com</h1>
</div>
<div id="menu">
Android<br>
C<br>
</div>
<div id="main_section">
<h1>Android</h1>
<p>Android is an OS that has been developed too rapidly and gained popularity historically. In last few years, it developed so many versions and now Android is at the peak in mobile phone operating systems. It is now being used in smart TVs, Washing Machines also. </p>
</div>
<div id="footer">
Copyright © eitworld.com
</div>
</body>
</html>
To see live output : Visit Try Yourself Editor

Output

layout

Using Table tag

tables are also used to design a layout for websites.

Here is an example of designing html layout by using table:

<!DOCTYPE html>
<html>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2" bgcolor="yellow">
<h1>www.eitworld.com</h1>
</td>
</tr>
<tr valign="top">
<td bgcolor="#eeeeee;" width="50">
Android<br />
C<br />
</td>
<td bgcolor="#eee" width="350" height="200">
<h1>Android</h1>
<p>Android is an OS that has been developed too rapidly and gained popularity historically. In last few years, it developed so many versions and now Android is at the peak in mobile phone operating systems. It is now being used in smart TVs, Washing Machines also. </p>
</div>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="gray">
<center>
Copyright © eitworld.com
</center>
</td>
</tr>
</table>
</body>
</html>
To see live output : Visit Try Yourself Editor

Output

layout