The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Keeping Table Cells in Proportion to Each Other
ilangutman
post Oct 5 2006, 10:56 PM
Post #1





Group: Members
Posts: 3
Joined: 5-October 06
Member No.: 346



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 6 2006, 05:26 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,967
Joined: 10-August 06
Member No.: 7



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>


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ilangutman
post Oct 7 2006, 12:35 AM
Post #3





Group: Members
Posts: 3
Joined: 5-October 06
Member No.: 346



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th December 2018 - 02:41 AM