HTML layout

There are several ways you can present the content on a webpage. However, not many options exist in HTML using just the <body> tag. You can specify a layout for pages using tables or CSS.

This lesson focuses on:

Using tables for layout
Using CSS for layout

Using tables for layout

You can use various table properties such as the tables width, height, and border to layout the content on a page as well as the properties of table rows and cells.

Layout 1:

<table border="0" cellspacing="0" cellpadding="0" id="main">

<tr height="40">
<td colspan="2" bgcolor="white">
<!--first inner table begins here-->
<table border="0" title="top" id="top">
<tr>
<td>
Site logo and catch phrase
</td>
</tr>
</table>
<!--first inner table ends here-->
</td>
</tr>

<tr height="250">
<td>
<!--second inner table begins here-->
<table border="0" id="nav" title="Navigation">
<tr><td>Site menu here</td></tr>
<tr><td>Site menu here</td></tr>
<tr><td>Site menu here</td></tr>
</table>
<!--second inner table ends here-->
</td>

<td>
<!--third inner table begins here-->
<table border="0" id="content" title="content">
<tr><td>Content goes here</td></tr>
</table>
<!--third inner table ends here-->
</td>
</tr>
</table>

Output:

You can remove the border from the table to make it appear as if the different parts of the page are integrated together, but still keep them distinct by displaying them with different background colors as in this next layout.

Layout 2:

<table id="main" title="main" border="0" width="100%">
<tr height="50">
<td bgcolor="lightcyan">
<!--first inner table begins here-->
<table id="top" title="top">
<tr><td>Site logo and catch phrase</td></tr>
</table>
<!--first inner table ends here-->
</td>
</tr>
<tr height="30">
<td bgcolor="#E5E5E5">
<!--second inner table begins here-->
<table id="navigation" title="navigation">
<tr>
<td>Site menu here</td>
<td>Site menu here</td>
<td>Site menu here</td>
</tr>
</table>
<!--second inner table ends here-->
</td>
</tr>
<tr>
<td>
<!--third inner table begins here-->
<table id="content" title="content" height="300">
<tr><td>Content goes here</td></tr>
</table>
<!--third inner table ends here-->
</td>
</tr>
</table>

Output:

Using CSS for layout

The newer way to specify a pages layout is CSS. Using CSS as opposed to tables gives you more flexibility over your layout and is less confusing (all those inner tables you avoid by using CSS instead of tables!)

Two column layout with CSS:

<div id="top">Site logo and catch phrase</div>

<div id="leftSide">Site menu here<br /><Site menu here<br />Site menu here<br /></div>

<div id="rightSide">Content</div>

The CSS that creates this layout:

#top{

width: 200px;
background-color: #E5E5E5;
margin-bottom: 20px;

}

#leftSide{

float:left;
margin-top: 10px;
padding-right: 10px;
height: 200px;
border-right: dashed gray 1px;

}

#rightSide{

color: rgb(37,66,95);
font-weight: bold;
text-align:center;

}

Output: