Multiple Table Per Page Format Q 1

[baltman]

Please bear with me as I'm not in my element with HTML.

I'd like to create an HTML based report that is formatted to one letter page wide that has three tables of 4 columns across with variable length data; with one table sometimes two columns, with with col 1 merged with col1 and col2 and col 3 merged with col3 and col4.

In order to keep the format to print on the one page, I'm going to use fixed with columns. What I'd like to do is allow cells that have data longer than the fixed have auto wrap into additional lines, but within it's table only... i.e. not affecting the table next to it.

There will also be some dynamic back color and formatting, but the only thing (I think) I'm not sure how to do is the Fixed-Width Auto-Wrap portion, which also needs to be able to work on the merged col1/col2.

I'd much appreciate a couple of tag samples to get me moving in the right direction.

Thanks,
Brian

 

[baltman]

What do I need to do to get these three tables top aligned with each other?

Thanks!
Brian

<table width=630>
 <tr>

<td>
<table border=1 width=210 style='word-wrap:break-word'>
 <col width=100>
 <col width=50>
 <col width=50>
 <tr>
  <td>Table 1</td>
  <td>Second Column</td>
  <td>Third Column</td>
 </tr>
 <tr>
  <td>Row 1</td>
  <td>Abc</td>
  <td align=right>1</td>
 </tr>
 <tr>
  <td>Row 2</td>
  <td>Abc defghij klmnop</td>
  <td align=right>123</td>
 </tr>
 <tr>
  <td>Row 3</td>
  <td>Abcnop</td>
  <td>123456</td>
 </tr>
</table>
</td>  

<td>
<table border=1  width=210 style='word-wrap:break-word'>
 <col width=100>
 <col width=50>
 <col width=50>
 <tr>
  <td>Table2</td>
  <td>Second Column</td>
  <td>Third Column</td>
 </tr>
 <tr>
  <td>Row 1</td>
  <td>Abc</td>
  <td align=right>1</td>
 </tr>
 <tr>
  <td>Row 2</td>
  <td>Abcdefg</td>
  <td align=right>123</td>
 </tr>
 <tr>
  <td>Row 3</td>
  <td>Abc defg hi jkl mnop</td>
  <td align=right>123456</td>
 </tr>
 <tr>
  <td>Row 4</td>
  <td>Abcdefg</td>
  <td align=right>123</td>
 </tr>
 <tr>
  <td>Row 5</td>
  <td>Ab cd efg hij klm nop</td>
  <td align=right>123 456</td>
 </tr>
</table>
</td>
 
<td>
<table border=1  width=210 style='word-wrap:break-word'>
 <col width=100>
 <col width=50>
 <col width=50>
 <tr>
  <td>Table 3</td>
  <td>Second Column</td>
  <td>Third Column</td>
 </tr>
 <tr>
  <td>Row 1</td>
  <td>Abc</td>
  <td align=right>1</td>
 </tr>
 <tr>
  <td>Row 2</td>
  <td>Abcdefg</td>
  <td align=right>123</td>
 </tr>
 <tr>
  <td>Row 3</td>
  <td>Abcdefghijklmnop</td>
  <td align=right>123456</td>
 </tr>
</table>
</td>

</tr>
</table>

 

[dwarfthrower]

What do I need to do to get these three tables top aligned with each other?

As with most things programming, there are a number of ways of skinning this particular cat:

Pure HTML - probably the easiest, not so hot though

<table width=630>
 <tr>

<td [b]valign="top"[/b]>
"Table 1 goes here
</td>  

<td [b]valign="top"[/b]>
"Table 2 goes here"
</td>
 
<td [b]valign="top"[/b]>
"Table 3 goes here
</td>

</tr>
</table>

Or then there's inline CSS - slightly betterer

<table width=630>
 <tr>

<td [b]style="vertical-align:top;"[/b]>
"Table 1 goes here
</td>  

<td [b]style="vertical-align:top;"[/b]>
"Table 2 goes here"
</td>
 
<td [b]style="vertical-align:top;"[/b]>
"Table 3 goes here
</td>

</tr>
</table>

or "proper" CSS - even betterer

<style type="text/css">
<!--
.topAligned {
	vertical-align: top;
}
-->
</style>
<table width=630>
 <tr>

<td [b]class="topAligned"[/b]>
"Table 1 goes here
</td>  

<td [b]class="topAligned"[/b]>
"Table 2 goes here"
</td>
 
<td [b]class="topAligned"[/b]>
"Table 3 goes here
</td>

</tr>
</table>

Ideally you could get rid of the nested tables altogether and line up the others through CSS positioning.

_{Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.}

Check out Tek-Tips Australia New Zealand forum1155

 

[baltman]

Thank you! I was able to achieve my desired effect with your help.

Darn hard coding something you're not familiar with in notepad without tag matching.

Now I just need to add all my other formatting and build dynamically...

Brian