HTML Layouts

HTML layouts

All the HTML documents or websites are comprised of rows and columns. The data in a website is divided or written in the rows and columns. This is done by using the table and div elements. COLS and ROW tags that are used with the table element are used to add content in tables in an HTML document.

The cascading stylesheet or CSS is used to create layouts in a website or in an HTML document to add the background or to deal or position with the elements. CSS is also used to add colors to the page, to make the website look attractive.

HTML Layout Components

An HTML document has the following components:

  1. Header
  2. Main body
  3. Footer

The main body can be further divided into three parts that is left area comprising of table of contents, pictures etc, the centre having the main description about the topic and the right part that sometimes have advertisements, banners.

The components of HTML document have been demonstrated in the following example:

Header

Left part having table of contents etc.

Main Content

Right part having advertisements

Footer

An HTML Document

This is a basic view of an HTML document containing header, footer and contents. Now let us take a look at the layout of HTML document using tables and div elements.

HTML layout using tables

To create layouts in an HTML document we use the TABLE element. Multiple rows and columns can be inserted by using the <table> tag.

EXAMPLE

The following example uses COLSPAN that is used to specify that how many columns of the table are going to be spanned by the cell, its default value is 1. The columns are counted from the left side of the table. All the tags that are used below are explained in the previous sections.

Consider the following example that uses the TABLE element with 3 rows and 2 columns:

<html>

<head>

<title> Layout of an HTML document using TABLES </title>

</head>

<body>

<table width = “100%” border = “0”>

<tr>

<td colspan=”2″ bgcolor = “#FF0000”>

<h1> Heading 1 </h1>

</td>

</tr>

<tr valign = “top”>

<td bgcolor = “#FFFF00” width = “50”>

<b> Table of Contents </b> <br />

Content <br />

Content <br />

Content

</td>

<td bgcolor = “#00FF00” width = “100” height = “200”>

Main Body of HTML Document

</td>

</tr>

<tr>

<td colspan=”2″ bgcolor = “#008000”>

<center>

Footer

</center>

</td>

</tr>

</table>

</body>

</html>

The result is as follows:

result-1

The color is given to each column and row using bgcolor attribute.

HTML layout using DIV

DIV (block level element) is used to mark the block of document as a group. Then this element is used to specify the properties of this group. The DIV element does not affect the appearance of the HTML document. The use of DIV has been explained before. Let us consider how DIV is used to create layouts in an HTML document.

EXAMPLE

<html>

<head>

<title> Layout of an HTML document using DIV </title>

</head>

<body>

<div style=”width: 100%”>

<div style=”background-color: #0000FF; width: 100%”>

<h1> Heading 1 </h1>

</div>

<div style=”background-color: #800080; height: 200px; width: 100px; float: left;”>

<div> <b> Table of Contents </b> </div>

Content <br />

Content <br />

Content

</div>

<div style=”background-color: #800000; height: 200px; width: 350px; float: left;”>

<p>Main body of HTML document</p>

</div>

<div style=”background-color: #008080; height: 200px; width: 200px; float: right;”>

<div> <b> Advertisement Area </b> </div>

Contents <br />

Contents <br />

</div>

<div style=”background-color: #000080; clear: both”>

<center>

Footer

</center>

</div>

</div>

</body>

</html>

The result is as follows:

result