table driven html

In my opinion table driven html design affords the coder a great deal of power over the look, feel, and structure of an html document. Tables in html have been often missunderstood, and sometimes dubbed "evil." When used correctly tables can also aid liquid designand make a page viewable at almost any resolution.

The basics of html tables are simple enough, but table driven code tends to get a bit messy after the second and third nested tables, so it is good practice to indent the nested code. The following is an example:

<table width="200" cellpadding="1" cellspacing="0" border="0">
	<tr>
		<td bgcolor="#999999">
		<table width="198" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<td bgcolor="#ffffff" height="100">
				this is just some text
				</td>
			</tr>
		</table>
		</td>
	</tr>
</table>

The previous code renders this pretty table similar to those found at customize.org and deskmod.com thanks to xtreme for the great tip! Both sites are great examples of liquid design that uses both fixed width tables and realtive widths (ie 90%, 50%, etc.)

It is suggested by standards organizations such as the W3C that one use CSS instead of using the table tag. CSS is supported by versions of Internet Explorer and Netscape Navigator greater than 3.0. CSS is reusable and helps to seperate formatting pecularities from the text of the page.

The following is an example:

<style type="text/css">
.pork {
  width: 200px;
  border: thin solid #999999;
  text-align: center;
  background-color: #ffffff;
}
</style>


<div class="pork">this is just some text</div>

The table tag was originally intended to as a way to represent data in rows and columns, like a spreadsheet. Along the way, however, it was hijacked and used as a navigation system. This, technically, is an abuse of tables.

The alternatives, such as using div tags in combination with CSS positioning, have only just become viable with the advent of Gecko-based browsers, IE5.5 and Opera 5 becoming free.

However, the table navigation system is unlikely to die, since lots of people believe it to be the only way to produce a viable navigation system (apart from frames), and they know nothing of style sheets. And, of course, there is the problem of old browsers, which lack the proper support of div and CSS. Particular in this problem is Netscape 4, since a lot of users haven't upgraded to Netscape 6 (I don't really blame them, it is based on the unfinshed Mozilla code. - Don't take that the wrong way, I use Mozilla every day!). These problems will ensure that table-driven html sticks around for a while.