Web Design with HTML and CSS

144

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

This review of web layout is relevant today because a vast number of websites were built and

continue to be built using the table method. CSS has been replacing the use of tables for

page layout, but the process is a slow, gradual one. Table layouts have an advantage of being

reverse-compatible with older browsers; however, this advantage has decreased as people

update to newer browsers.

CSS layouts were also not well supported (if at all) in early web browsers, and so for web

designers, there was no real incentive to discard table layout techniques for CSS layout.

However, one of the disadvantages of table-based layouts was the amount and type of

code required to build a page. The layout described in the previous paragraphs would have

required code similar to the following:

<table width="799" border="0" cellspacing="1" cellpadding="1">

<tr>

<td bgcolor="#000000">

<table width="800" height="485" border="0">

<tr>

<td height="81" colspan="2" bgcolor="#CCCCCC">

<table width="100%" border="0">

<tr>

<td bgcolor="#FF9966"> </td>

<td bgcolor="#FF9966"> </td>

<td bgcolor="#FF9966"> </td>

</tr>

</table>

</td>

</tr>

<tr>

<td width="191" bgcolor="#FFFFFF"> </td>

<td width="599" bgcolor="#FFFFFF"> </td>

</tr>

</table>

</td>

</tr>

</table>

This is a relatively simple layout with no content or navigation. However, defi ning the

relationship between all the various elements is very confusing, and it requires multiple lines

of code.

If you want to look at this code in your text editor, you can fi nd it in the 07_table.html fi le

within the web07lessons folder.