When you're building a Web page, it is really easy to get sucked into using the most complex and complicated HTML and tags that you can. But do you really need all those tags?
Suppose you have a list of links you would like to display on your page:
It's Time to Update (or Create) that Website
Learn How to Include Sound on Your Web Pages
Creating Framed Web Pages
The HTML Tags: SPAN and DIV
Even if you want those links to be displayed in a very precise location on the page, you don't need to put them all in a table, with separate rows for each list item. But this is HTML I see all the time on Web pages:
<table border="0">
<tr>
<td>
<a href="/cs/webdesign/a/aa010199a.htm">It's Time to Update (or Create) that Website</a>
</td>
</tr>
<tr>
<td>
<a href="/od/sound/a/aa010300a.htm">Learn How to Include Sound on Your Web Pages</a>
</td>
</tr>
<tr>
<td>
<a href="/cs/frameshelp/a/aaframesintro.htm">Creating Framed Web Pages</a>
</td>
</tr>
<tr>
<td>
<a href="/od/htmltags/a/aa011000a.htm">The XHTML Elements: span and div</a>
</td>
</tr>
</table>
But my example above uses nearly 25% fewer characters, which makes it cleaner, easier to edit, and faster to download. If you can save 25% on page download time, think how much your readers would appreciate it.
It's very tempting, once you learn tables to want to use them for everything. The same can be said of frames, and the DIV element; in fact, of almost any new thing we learn.
The Fewer Tags the Better
There are several reasons why keeping your website structure simple is a good idea:
- simpler pages use fewer tags and so are smaller and thus faster to download
- in many cases, the simpler the page is, the easier it is to edit
- writing simple pages is often faster than developing complex tables and layouts
- simple doesn't mean ugly, most designs can be improved by removing something or just making it cleaner - simpler
One of the most common uses of complex tables or multiple nested tables when a simple table would do is for lists. You might want two columns with a list of items in it. Most lists of this type are created in this fashion:
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>word 1</td>
<td>word a</td>
</tr>
<tr>
<td>list item 2</td>
<td>item b</td>
</tr>
<tr>
<td>item 3</td>
<td>element c</td>
</tr>
<tr>
<td>word 4</td>
<td>list item d</td>
</tr>
</table>
In this case, what type of layout are you looking for? Two columns of lists. It isn't necessary that all the elements of the list are in separate cells, just that they are in separate columns. If I were to write that list, I would set it up as a two column table, with the elements separated by BR elements. For example:
<table cellspacing="0" cellpadding="0" border="0" width="60%">
<tr>
<td>
word 1<br />
list item 2<br />
item 3<br />
word 4
</td>
<td>
word a<br />
item b<br />
element c<br />
list item d
</td>
</tr>
</table>
The biggest advantage to the second table is that it is much easier to update. You might use this type of layout for a glossary listing. But if you put each element in a separate table cell, you have to move all the table cells to insert a new entry in the middle. With the two cell table, you might have to move one element to make the columns the same length, but it is usually much easier to edit.
Making it Even Simpler
In the case above, you could make your list even simpler by doing away with the second column altogether. Then you could simply use a UL or DL list to display your elements. This flows more smoothly along the document page, but you could lose some of the layout features that you got with a table. (Thanks to Wulf for pointing this out.)
If you had to have the two columns, you could use CSS on two list elements to remove the bullets and float them side-by-side:
<ul style="list-style: none; margin-left: 0em; margin-right: 2em; float: left;">
<li>word 1</li>
<li>list item 2</li>
<li>item 3</li>
<li>word 4 </li>
</ul>
<ul style="list-style: none;">
<li>word a</li>
<li>item b</li>
<li>element c</li>
<li>list item d</li>
</ul>
Even with the style properties inline, the HTML for these lists is still 38% smaller than the original table and 18% smaller than the second table.
Keep It Simple, Silly!
You may have heard the keep it simple rule when applied to writing, but it also applies to HTML. If you keep your HTML simple, it will be easier to maintain, easier to view, and ultimately results in a better site.
