HTML layout with tables
Tables have been a popular method for achieving advanced layouts in HTML. Generally, this involves putting the whole web page inside a big table. This table has a different column or row for each main section.For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns - but the header and footer column spans both columns (using the
colspan
attribute):This HTML code...
<table width="400px" border="0">
<tr>
<td colspan="2" style="background-color:yellow;">
Header
</td>
</tr>
<tr>
<td style="background-color:orange;width:100px;text-align:top;">
Left menu<br />
Item 1<br />
Item 2<br />
Item 3...
</td>
<td style="background-color:#eeeeee;height:200px;width:300px;text-align:top;">
Main body
</td>
</tr>
<tr>
<td colspan="2" style="background-color:yellow;">
Footer
</td>
</tr>
</table>
produces this layout...
Header | |
Left menu Item 1 Item 2 Item 3... | Main body |
Footer |
HTML layout with DIV, SPAN and CSS
Although we can achieve pretty nice layouts with HTML tables, tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.The div element is a block level element used for grouping HTML elements. Once grouped, formatting can be applied to the div element and everything contained within it. While the div tag is a block-level element, the HTML span element is used for grouping elements at an inline level.
Using our previous HTML layout, we can use DIV and CSS to achieve a similar effect. The following code...
<div style="width:400px">
<div style="background-color:yellow">
Header
</div>
<div style="background-color:orange;height:200px;width:100px;float:left;">
Left menu<br />
Item 1<br />
Item 2<br />
Item 3...
</div>
<div style="background-color:#eeeeee;height:200px;width:300px;float:right;">
Main body
</div>
<div style="background-color:yellow;clear:both">
Footer
</div>
</div>
Header
Left menu
Item 1
Item 2
Item 3...
Item 1
Item 2
Item 3...
Main body
Footer
One major benefit of using CSS is that, if you place your CSS in a separate location (i.e. an external style sheet), your site becomes much easier to maintain.