We said that a table cell can contain almost anything, and that includes another table. When you’re presenting tabular data, this is almost never necessary, but here is a demonstration to show that yes, it does work.
<table border="1" cellpadding="3">
<tr>
<td>Row one, cell one</td>
<td>Row one, cell two</td>
<td>Row one, cell three</td>
</tr>
<tr>
<td>Row two, cell one</td>
<td>
Row two, cell two
<table border="1" cellpadding="3">
<tr>
<td>inner A</td><td>inner B</td>
</tr>
<tr>
<td>inner C</td><td>inner D</td>
</tr>
</table>
</td>
<td>Row two, cell three</td>
</tr>
</table>
While tables were originally supposed to be used for tabular data only, it took developers a grand total of five milliseconds to realize that they could be used to drive page layout. Since stylesheets didn’t exist at the time, this was a perfectly reasonable thing to do. In fact, because stylesheet support is not perfect in any browser, there are times when you will want to use tables to lay out a page.
Take a look at this sample page.
This is a typical three-column layout. It's easy to see how it
was done if you turn on the borders on the
<table> starting tags, as
you see on this page.
The trick to designing this layout is to
do it on paper first. Then you
lay out the table and fill in the cells with placeholders. Make
sure you set border="1" so you can see absolutely
everything! When you do table layouts, you will usually want to
set each row to valign="top" so that all your
columns of text line up at the top.
<table border="1" width="600">
<tr>
<td colspan="2"><h1>Seoul Tourist News</h1></td>
<td>Motto</td>
</tr>
<tr valign="top">
<td>
<p>Weather table goes here</p>
</td>
<td>
<p>Kwang-hwa-mun image and text here</p>
</td>
<td>
<p>Myeong-dong image and text here</p>
</td>
</tr>
<tr>
<th colspan="3"><p>© 2002 J D Eisenberg</p></th>
</tr>
</table>
Once you have the framework, you can then fill in the
cells, one at a time. Test each cell individually
after you enter its content. If you are missing
a closing </tr> or </table>
tag, it will show up right away. (This happened to me twice
while I was writing the table myself!)
If you have a far more complex table, you may want to set each cell to a different background color so that you can see where mismatches between your paper plan and the screen have occurred.
When you first start using tables for layout, you will want to use them everywhere, and you may well overdo it. Say you have this two-column layout:
|
It's always important to validate your HTML. This ensures that it has a consistent look across browsers. It also means that browsers don’t have to guess what you mean when they encounter invalid code. |
If you have a valid page, you may wish to put this image on it: 
This lets people know that you care enough about quality to have your pages validated. |
If you have table madness, you will look at the right hand column as a table inside a table:
|
It’s always important to validate your HTML. This ensures that it has a consistent look across browsers. It also means that browsers don’t have to guess what you mean when they encounter invalid code. |
|
But why? The right hand column is just a paragraph, followed
by a centered <div>, followed by another
paragraph. Here is the HTML for the simple version of the
right-hand cell:
<td width="200">
<p>If you have a valid page, you may wish
to put this image on it:</p>
<div align="center">
<img src="screenshots/valid-xhtml10.png" alt="Valid XHTML 1.0"
width="88" height="31" />
</div>
<p>This lets people know that you care enough about
quality to have your pages validated.</p>
</td>If you have content that looks like a table with multiple rows, each of which has only one cell in it, you probably do not need a table at all. There are some circumstances which require it, but they are unusual.
Don’t do it. Many people use tables to fake borders. For example, if I wanted to have a vertical line between the columns of the preceding example, I could add another cell to the table between the two content cells:
<td width="1" bgcolor="gray"><br /></td>
If I wanted to have a nice border around an entire section, like this:
|
You can do it with HTML like this. However, it is hard to read and it wastes a great deal of bandwidth to transmit all those extra bytes.
<table border="0" cellpadding="2" bgcolor="green"
cellspacing="0" width="400">
<tr>
<td>
<table border="0" cellpadding="3" cellspacing="0"
width="100%" bgcolor="#ffffff">
<tr><td>Boy howdy, isn’t this fancy?
Unfortunately, it takes a nested table to do it!</td></tr>
</table>
</td>
</tr>
</table>The better way to produce borders is with the style
attribute. This technique saves space. The drawback is that it
won’t work with Netscape 3 or Internet Explorer 3, and
may be spotty in Netscape 4. If readers who are using those
platforms can get by without seeing the borders—after all, they
are at your site for the content, right?—then
use this technique instead:
<div style="border: 2px solid green; padding: 3px; width: 400px;"> Boy howdy, this is fancy too. And it’s all done with border styles! </div>
which produces this:
To get a border on the left, right, top, or bottom of a table cell, add a style as shown below. You may choose any number of pixels or any color you like. Try it and see what it looks like.
<table border="0"> <tr> <td style="border-left: 1px solid black"> content </td> <td style="border-right: 2px solid red"> content </td> <td style="border-bottom: 1px solid blue"> content </td> <td style="border-bottom: 3px solid #8f4c00"> content </td> </tr> </table>