Hi, again!
The Why
----------------------------------------------------------------------
The problem you've encountered with 'stretching' of column content
over vertical space when using merged columns is a rendering issue
related to where the browser "imagines" or "guesses" where the text in
the merged column belongs, in relation to the tablecells in the
opposite column.
The Fix
----------------------------------------------------------------------
Nest your tables. Your layout table would consists of 1 row of 2
columns. You'll specify horizontal and vertical alignment within each
table cell
<td align="left" valign="top" width="number or percentage">
or
<td align="center" valign="center" width="number or percentage">
Use whatever widths and alignments best suit the situation. Inside the
left-hand column, create another table, 1 column with as many rows as
needed for navigation choices. You can use the cellpadding and
cellspacing attributes for additional control over the exact alignment
of the new table within the parent tablecell. I've created an example,
using 2 columns, and a nested table of 10 rows in the left hand
column, using percentages for width. You can change it to pixels (just
eliminate the % sign in the width attributes) if you prefer, and can
of course add or subtract rows in the nested table. The non-breaking
spaces ( ) are simply cell placeholders, and would be changed to
whatever content you wish to use.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td> </td>
</tr>
</table>
Your variable content can be placed in the right-hand column, either
individually, or using server-side includes. The column height on each
page will be determined by the amount of content per column.
Nesting Tables Tutorials
------------------------
WebTekNique
http://www.webteknique.com/tutorials/nested_tables/intro.asp
Cross Eyed Media
http://www.crosseyedmedia.com/0_a_px800/html_5_nestingTables.html
CSS Alternatives
----------------------------------------------------------------------
You may use CSS instead of tables or formatting of tablecells to
achieve the same effect, however "hardcoding" the display using
tables, as shown above, does assure the most similar appearance in the
widest range of possible browsers, irregardless of HTML or CSS
validation.
CSS formatting for the inside of individual tablecells would involve
variations on:
In the <HEAD> section of the document...
<style type="text/css">
<!--
.column1 { vertical-align: top }
-->
</style>
In the document, the nested table...
<table width="175" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="column1"> </td>
<td class="column1"> </td>
</tr>
</table>
For full CSS formatting of columns, see:
Working with CSS - Intro to CSS Layout
http://developer.apple.com/internet/css/introcsslayout.html
Google Search Terms
----------------------------------------------------------------------
nested tables tutorials
CSS columns tutorial
CSS tablecell alignment
I hope this info will put you right. Should you have questions about
the material or links provided, please, feel free to ask.
---larre |
,
0 Comments
)