Layout types

The two main types of layout techniques as previously talked about are tables and div tags:


This is a table example
this is a table called section 1
this is a table called section 2
This is a div example

This is a div tag called section 1

This is a div tag called section 2

The main thing you will probably say is that they both look more or less the same. Which is true. But there are 2 main differences that make div tags better over tables. For a start the code.

Table

<table>
<tr class="section1">
<td width="200" height="150" align="center" valign="top" bgcolor="#CCCCCC">this is a table called section 1</td>
</tr>
<tr class="section1">
<td width="200" height="150" align="center" valign="top" bgcolor="#CCCCCC">this is a table called section 2</td>
</tr>
</table>

Div tags

<div id="section1">
<p>This is a div tag called section 1</p>
</div>
<div id="section1">
<p>This is a div tag called section 2</p>
</div>

Styling for the div section example is done using CSS, which I have added to my CSS document the code looks like this:

#section1 {
background:#ccc;
width:200px;
height:150px;
text-align:center;
}
#section1 p {
padding:5px;
}

We will be covering CSS shortly so don’t worry about it too much at the moment but as you can see CSS is far easier to do and to read.