<div> tag is also used in implementing wireframing.

Difference between <div> and <table> based layout

Table

Div

To create one block using table based layout we require 3 tags, they are: one <table> tag to define a table , one <tr> to define one row in the table and one <td> to define one cell in that row.

To create one block using div based layout we require just one tag and that is <div> tag to define the block.

Number to tags required is more.

Number of tags required is less as just one tag is required to create one block.

Browser parsing is slow.

Browser parsing is fast.

SEO (search engine optimization) rank is low for table based layout.

SEO (search engine optimization) rank is high for div based layout.

Table based layout is controlled by its attributes.

Div based layout is controlled by CSS.

By default when we write a div tag it will not have any border which can separate one block from the other. Also the browser will allocate space according to the content of div.

In order to create a layout using html div tag we need to make use of CSS (Cascading Style Sheet) to assign width and height. We will make use of an inline CSS for controlling div alignments. For further reference on CSS refer article – How to write a CSS?

Consider the below given program to create a div having the following CSS properties : width, height, margin, background-color.

 <div style="width:450px; margin:0px auto; height:100px; background-color:red;">
This is a div.
</div>

Output:

This is a div.