How to deal with Layouts in HTML
In this article I will explain the HTML Layouts.
Most websites have put their content in multiple columns.Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.Tables have been a popular method for achieving advanced layouts in HTML.
HTML Layouts Using <div> Tag
The div element is a block level element used for grouping HTML elements.
Example
|
<html>
<head>
<title></title>
</head>
<body>
<div id="container" style="width: 500px">
<div id="header" style="background-color: Gray;">
<h1 style="margin-bottom: 0;">
Web Designing</h1>
</div>
<div id="menu" style="background-color: Gray; height: 200px; width: 100px; float: left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript<br />
XHTML<br />
HTML 5</div>
<div id="content" style="background-color: #EEEEEE; height: 200px; width: 400px;
float: left;">
Content</div>
<div id="footer" style="background-color: gray; clear: both; text-align: center;">
Thank you</div>
</div>
</body>
</html>
|
Output
HTML Layouts Using <table> Tag
A simple way of creating layouts is by using the HTML <table> tag.
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td style="background-color: pink">
Web Designing
</td>
<td style="background-color: pink">
Welcome
</td>
</tr>
<tr>
<td style="background-color: pink">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>HTML5</li>
<li>JavaScript</li>
</ul>
</td>
<td style="background-color: Orange">
Content place here
</td>
</tr>
<tr>
<td style="background-color: pink">
Thank you
</td>
<td style="background-color: pink">
<i>contact no.12345</i>
</td>
</tr>
</table>
</body>
</html>
|
Output
Ask Your Question