Need HTML/CSS help with this table

Factual Questions
1

I’m building a website for someone, and I need a bit of help.

I’ve got a three column table, the third of which defines the height of the table. The second column will have some text and a couple other elements at the top, but also a button that should align with the bottom of the third column. How can I, with CSS, have the text in the second column vertically align to the top of the column, but the button vertically align to the bottom? This will eventually be a dynamic page, so the height of the columns will change. I need a CSS attribute so it will be consistent about this regardless of the table height.

This graphic illustrates the layout:
http://www.blackpitchpress.com/temp/table.gif

I want elements 1 and 2 at the top of the second column, but element 3 along the bottom of the table.

2

Use rowspans.



<table cellpadding=4 cellspacing=2 border=0>
<tr>
<td rowspan=2 valign=top>
COLUMN 1
</td>
<td valign=top>
COLUMN 2 TOP ELEMENT 1
<br>
COLUMN 2 TOP ELEMENT 2
</td>
<td rowspan=2 valign=top>
COLUMN 3
</td>
</tr>
<tr>
<td valign=bottom>
COLUMN 2 BOTTOM ELEMENT
</td>
</tr>
</table>

Should work without anything fancy.

3

thanks ZipperJJ! Your advice helped! Now I have one other question:

In element 3 there are two parts: a small box on the left, and a small box on the right, and a space between them taking up the remaining width of the column. I feel like this should be really easy, but I can’t figure out how to do this.

A lousy graphic illustration:

[element 3 width - (width of x + y)] [y]

4

well you could expand into more tables or another column.

Another column:



<table cellpadding=4 cellspacing=2 border=0>
<tr>
<td rowspan=2 valign=top>
COLUMN 1
</td>
<td valign=top>
COLUMN 2 TOP ELEMENT 1
<br>
COLUMN 2 TOP ELEMENT 2
</td>
<td rowspan=2 valign=top>
COLUMN 3
</td>
<td rowspan=2 valign=top align=right>
COLUMN 4
</tr>
<tr>
<td valign=bottom>
COLUMN 2 BOTTOM ELEMENT
</td>
</tr>
</table>

Nested tables:



<table cellpadding=4 cellspacing=2 border=0>
<tr>
<td rowspan=2 valign=top>
COLUMN 1
</td>
<td valign=top>
COLUMN 2 TOP ELEMENT 1
<br>
COLUMN 2 TOP ELEMENT 2
</td>
<td rowspan=2 valign=top>
<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr>
<td valign=top>
ITEM 3A
</td>
<td valign=top width=10>
SPACER COLUMN
</td>
<td valign=top>
ITEM 3B
</td>
</tr>
</table>
</tr>
<tr>
<td valign=bottom>
COLUMN 2 BOTTOM ELEMENT
</td>
</tr>
</table>

If your Element 3A is an image, i would suggest just using the hspace and vspace properties of img tags to add some padding around the image then align the image to the left of the text that may be 3B.

Kind of getting tricky now w/o seeing the whole page :slight_smile:

Don’t be afraid to use tables. They work fine if you do them right. They’re only going out of style in the minds of holier-than-thou CSSers. Trick is to do them RIGHT.

5

thanks a lot, ZipperJJ. You’ve been a lot of help.