I am currently creating a website which is divided up by separate tables that are above and below each other. I am having a problem because there is a top table and a bottom table. In the cells in the top table there is text. In the cells in the bottom table, there are graphics. When the browser text is resized, the right-hand side of both tables goes out of alignment, so there isn't a smooth line anymore.
I have to have two tables, because the column divisons in each table are different, and i cannot divided it up that way.
Is there a way to code that the right hand side of both of the cells stay in alignment, so even if the text is increased or decreased, they will always stay in line and move proportionally to each other? Or, is there a way to lock the size of the cells in the table, so that text resizing does not increase the size of the cell. I understand that some text may be cut off, but this may still be the best option.
I have currently resorted to making the text into a jpeg (as one big block) so that text resizes do not have an impact, but this is not the best way to go about it and will cause download time to be very large. Even still, text resizing shifts around the cells and alignment, but at the moment it is bearable.
Thanks
Full Version: Keeping Table Cells in Proportion to Each Other
QUOTE(ilangutman @ Oct 6 2006, 05:56 AM) 
I have to have two tables, because the column divisons in each table are different, and i cannot divided it up that way.
Can't you use the COLSPAN attribute? Simple example:
CODE
<table border="1">
<tr>
<td colspan="2">foo</td>
<td>baz</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
</table>
<tr>
<td colspan="2">foo</td>
<td>baz</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
</table>
QUOTE
Is there a way to code that the right hand side of both of the cells stay in alignment, so even if the text is increased or decreased, they will always stay in line and move proportionally to each other?
You could make a separate table and either put it inside a cell (with ROWSPAN="2") in the parent table, or float it to the right with CSS so the two tables stay side by side in wide windows.
QUOTE
Or, is there a way to lock the size of the cells in the table, so that text resizing does not increase the size of the cell.
You might use the TD WIDTH attribute, maybe in combination with CSS "table-layout: fixed".
QUOTE
I understand that some text may be cut off, but this may still be the best option.
If the text is of any value it should be more important than a decorational vertical line. If OTOH it's just filler text you might consider removing it anyway.
QUOTE
I have currently resorted to making the text into a jpeg (as one big block) so that text resizes do not have an impact, but this is not the best way to go about it and will cause download time to be very large.
Also search engines cannot index it, and if the text is small and hard to read users cannot increase it. Make sure you use appropriate ALT text for the image.
Thanks. I have actually decided to combine the individual tables into one large table. I have a new problem though, which I've posted at
http://forums.htmlhelp.com/index.php?showtopic=564
Thanks.
http://forums.htmlhelp.com/index.php?showtopic=564
Thanks.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.