Ajax software     Free javascripts 
↑


Main Page

The Table Trick Explained

The table trick basically boils down to employing a two-by-two table with an empty first cell, using a

second cell with a rowspan set to two, and then putting the navigation in the second row “under” the

empty first cell.

Take this simple HTML example:

<table>

<tr>

<td valign=”top”>Navigation</td>

<td valign=”top”>Content</td>

</tr>

</table>

The rendered content would look like Figure 6-12.

Figure 6-12

Now, you could rewrite the HTML code to place the relevant content closer to the beginning in the docu-

ment, while keeping the visual appearance equivalent, this way:

<table>

<tr>

<td><!-- empty table cell --></td>

<td rowspan=”2” valign=”top”>Content</td>

</tr>

<tr>

<td valign=”top”>Navigation</td>

</tr>

</table>

Figure 6-13 shows the result.

This way, the navigation code appears below the content in the physical file, yet it displays on the left

when loaded in a browser.

Figure 6-13

143

Chapter 6: SE-Friendly HTML and JavaScript

c06.qxd:c06 10:55 143

Ajax software     Free javascripts 
→