Aligning Tables.

liunx

Guest
I want to make one table that looks like:<br />
<br />
AB | Ab | aB | ab<br />
<br />
And one that looks like:<br />
<br />
AABB | AABb | AaBB | AaBb<br />
<br />
The |'s represent the cell walls.<br />
<br />
I want them to be stacked on top of eachother so the |'s will align vertically.<br />
<br />
Because of how I'm making this, I need the two tables to be the cells of a main table.<br />
<br />
<table><tr><td><br />
<br />
<table><tr><br />
<td>AB</td><td>Ab</td><td>aB</td><td>ab</td><br />
</tr></table><br />
<br />
</td></tr><tr><td><br />
<br />
<table><tr><br />
<td>AABB</td><td>AABb</td><td>AaBB</td><td>AaBb</td><br />
</tr></table><br />
<br />
</td></tr></table><br />
<br />
That's how the code looks now, and it doesn't make the cells align vertically.<br />
<br />
Note: I do not want anyone telling me I should make it all one table. The table is much more complicated than what you can see here.<br />
<br />
Thanks, Alan.<!--content-->Sorry, I should have said that the number of columns is not always four, so 25% will not always work. This is because it is part of a JavaScript, and the dimensions of the table depends on the user's input.<br />
<br />
I tried making the width of the td's equal to 100 divided by the number of columns, and that works for the td's with fewer characters. But it doesn't work for the td's with more characters, because you can increase the width of the td's with narrower, lower-cased characters, but u cannot decrease the width of the td's with thicker, upper-cased characters because the td's are already as small as they can be.<br />
<br />
I've attatched the file in case what I'm saying is unclear. It's fairly large, so I pointed out where the table writing script is (near the bottom) in caps.<br />
<br />
Any advice?<br />
<br />
(And the reason I posted it twice is because no one had answered the first one at the time I posted the second one, and I was being impatient.)<br />
<br />
Thanks, Alan.<!--content-->Originally posted by AntonioMainenti <br />
<br />
Note: I do not want anyone telling me I should make it all one table. <br />
<br />
That's unfortunate, since that's really the only option you have except for using some highly intricate DHTML to read the exact widths of the columns in one table and reflow the second one specifying it sizes.<br />
<br />
If you want corss OS/browser you are looking at a small nightmare.<br />
<br />
Btw, I would probably never say "make it all 1 table", but rather "don't abuse table for layout at all". ;)<!--content-->Yeah, I was beginning to think that was my only option after spending a half hour accomplishing nothing on. But I was wanting the borders of the two tables to be different, which is why I made them separate. I don' think it's possible to change the border from one row to the next (?).<br />
<br />
Anyway, thanks for your help.<br />
<br />
(I don't understand what this means: "don't abuse table for layout at all". Maybe it's because it's 11:30 (way past my bedtime).)<br />
<br />
Alan.<!--content-->Originally posted by AntonioMainenti <br />
I don' think it's possible to change the border from one row to the next (?).<br />
<br />
<br />
Try something like <br />
<tr style="border:1px solid blue;"><br />
<br />
<tr style="border:1px solid red;"><br />
<br />
<br />
<br />
<br />
(I don't understand what this means: "don't abuse table for layout at all". Maybe it's because it's 11:30 (way past my bedtime).)<br />
<br />
Alan. [/B] <br />
<br />
It means that you should only use <table> for actual tabular data, not as a general method to create page layout.<br />
Page layout & formating is what you should use CSS for.<!--content-->
 
Back
Top