Page layout

Note: the intersection of a row and a column is called a cell.

<table><tr>

<td> &nbsp; </td><td> &nbsp; </td>

</tr><tr>

<td> &nbsp; </td><td> &nbsp; </td>

</tr></table>

Content 1 Content 2 Content 3

Content 4 Content 5 Content 6

<TABLE BORDER="1"><TR>

<TD> Cell 1 </TD> <TD> Cell 2 </TD>

</TR><TR>

<TD COLSPAN="2"> Cell 3 </TD> </TR>

</TABLE> 

<TABLE BORDER="1"><TR>

<TD ROWSPAN="2"> Cell 1 </TD>  

<TD> Cell 2 </TD> </TR> <TR>

<TD> Cell 4 </TD> </TR></TABLE> 

<TABLE BORDER="1"><TR>  

<TD> Cell 2 </TD> </TR> <TR>

<TD ROWSPAN="2"> Cell 3 </TD><TD> Cell 4 </TD>

</TR></TABLE> 

Banner

Content 1 Content 2 Content 3

Content 4 Content 5

Content 6 Content 7

cell 1 cell 2 cell 3

cell 4

cell 5 cell 6

Cell 1

Cell 2 Cell 3 Cell 4 Cell 5

Cell 6 Cell 7

Cell 8

Property Example

Margin-top: Margin-top: 10px

Margin-bottom: Margin-bottom: 10px

Margin-left: Margin-left: 5px

Margin-right: Margin-right: 5px

Margin: Margin: 15px

Property Value Description Example

Position: Static The default position of an object if one would not specify a position.

hr { position: static;}

Position: Relative The position of the box relative to where the default or normal position of an object.

.rel { position: relative; top: 100px; left: 100px; }

Position: Absolute The position is defined by the values where the position of the element would be from the specified reference point.

.abs { position: absolute; bottom: 4em; right: 0; }

Position: Fixed The same as the absolute position, the only difference is that the object is “fixed” and will not move will the scroll action of the page.

.pre { position: fixed; top: 100px; left: 300px;}

Property Value Description Example

Float: Left The specified block element “floats” to the left and all other elements near it will float away from the block.

.left { float: left;}

Float: Right The specified block element “floats” to the right and all other elements near it will float away from the block.

.right { float: right;}

Float: None This option, specified block element will take the space it requires and nothing flows to the right or left of it. The other elements will be placed below it.