Top align td's in table
Hi,
I have 4 tables with 5 columns of cells each with lists of links of varying length
[I initially had just 1 table with 5 columns and 4 rows but changed to try and fix this problem - ]
When the page is resized up the cells float to the middle vertically, like this
=====
=== =====
=== ==== =====
=== ==== =====
=== =====
=== =====
=====
I would like them all to stay lined evenly to the top of the table, like this
=== ==== =====
=== ==== =====
=== =====
=== =====
=== =====
=====
=====
thanks
I have 4 tables with 5 columns of cells each with lists of links of varying length
[I initially had just 1 table with 5 columns and 4 rows but changed to try and fix this problem - ]
When the page is resized up the cells float to the middle vertically, like this
=====
=== =====
=== ==== =====
=== ==== =====
=== =====
=== =====
=====
I would like them all to stay lined evenly to the top of the table, like this
=== ==== =====
=== ==== =====
=== =====
=== =====
=== =====
=====
=====
thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hey Sean,
Yeah - I still pop in for a burst of browser blues and other stuff I should've learnt by now!
I've become a special case study for ziffgone :)
http://oldlook.experts-exchange.com/questions/21089263/Background-mouseover-images-in-table-cells.html
Well done on becoming page editor! I can't think of anyone better suited, apart from maybe Cd& of course - I think i've been around long enough to use just the three letters :)
I was hoping you'd pop in to a q and say hi :)
macuser (allways careful with urls and other persoanl info) 777
Yeah - I still pop in for a burst of browser blues and other stuff I should've learnt by now!
I've become a special case study for ziffgone :)
http://oldlook.experts-exchange.com/questions/21089263/Background-mouseover-images-in-table-cells.html
Well done on becoming page editor! I can't think of anyone better suited, apart from maybe Cd& of course - I think i've been around long enough to use just the three letters :)
I was hoping you'd pop in to a q and say hi :)
macuser (allways careful with urls and other persoanl info) 777
ASKER
valigns - I'd tried that actually - I just had another look and saw that there were a lot of valign =Middle's all over the place The code is taken form a provided format.
I stripped them all out and changed all the middles to tops - and made them standard compliant and it worked - but not the way I wanted.
I've put a couple of tests up at apple```ness dot com /td1.html and td2.html
I want the list to stay in the vertical middle as it breaks the page up a bit but I want the cell header to be v aligned top.
I tried putting
<td style="vertical-align:top"
I stripped them all out and changed all the middles to tops - and made them standard compliant and it worked - but not the way I wanted.
I've put a couple of tests up at apple```ness dot com /td1.html and td2.html
I want the list to stay in the vertical middle as it breaks the page up a bit but I want the cell header to be v aligned top.
I tried putting
<td style="vertical-align:top"
You mean you want the text "COMPUTING" to but up against the top edge of the purple cell?
looks like that's the way it is currently....
I want the list to stay in the vertical middle as it breaks the page up a bit but I want the cell header to be v aligned top.
my goodness though, you seem to know Sean but yet you are still using font tags?
<font face="Verdana,Arial" color="#cc0000" size="2">
I can't believe he wouldn't have gotten you to change that by now...
I want the list to stay in the vertical middle as it breaks the page up a bit but I want the cell header to be v aligned top.
my goodness though, you seem to know Sean but yet you are still using font tags?
<font face="Verdana,Arial" color="#cc0000" size="2">
I can't believe he wouldn't have gotten you to change that by now...
ASKER
>>>You mean you want the text "COMPUTING" to but up against the top edge of the purple cell?
I mean I want the words BEAUTY BUSINESS COMPUTING CREDIT ED'N/CAREER to stay lined up at the top of the page no matter how oversized the script, and similarly
HEALTH FINANCIAL FREE STUFF OFFICE HOME to stay in line and so on with the next 2 rows.
>>>>looks like that's the way it is currently...
not on my Mac. mozilla, safari, IE 4 mac
>>>>>my goodness though, you seem to know Sean but yet you are still using font tags?
<font face="Verdana,Arial" color="#cc0000" size="2"
I'm from the school of cut and paste :)
I mean I want the words BEAUTY BUSINESS COMPUTING CREDIT ED'N/CAREER to stay lined up at the top of the page no matter how oversized the script, and similarly
HEALTH FINANCIAL FREE STUFF OFFICE HOME to stay in line and so on with the next 2 rows.
>>>>looks like that's the way it is currently...
not on my Mac. mozilla, safari, IE 4 mac
>>>>>my goodness though, you seem to know Sean but yet you are still using font tags?
<font face="Verdana,Arial" color="#cc0000" size="2"
I'm from the school of cut and paste :)
>>I'm from the school of cut and paste :)
I don't think that school is EE accredited.
:-)
>>I mean I want the words BEAUTY BUSINESS COMPUTING CREDIT ED'N/CAREER to stay lined up at the top of the page no matter how oversized the script, and similarly
HEALTH FINANCIAL FREE STUFF OFFICE HOME to stay in line and so on with the next 2 rows.
how is that different from what it's doing now?
I don't think that school is EE accredited.
:-)
>>I mean I want the words BEAUTY BUSINESS COMPUTING CREDIT ED'N/CAREER to stay lined up at the top of the page no matter how oversized the script, and similarly
HEALTH FINANCIAL FREE STUFF OFFICE HOME to stay in line and so on with the next 2 rows.
how is that different from what it's doing now?
ASKER
>>>>how is that different from what it's doing now?
well...on my browsers ...if you oversize extremely they don't stay in line. It's easier to see on the second row.
they're in line at smaller views
well...on my browsers ...if you oversize extremely they don't stay in line. It's easier to see on the second row.
they're in line at smaller views
Well, you're a maniac, as always :-)
This should get you abobut 90% of the way there. Happy cut and pasting.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table
{
width:100%;
table-layout:fixed;
}
table table
{
height:15em;
border-spacing:0;
}
table table td
{
width:200px;
height:13em;
vertical-align:middle;
font: .9em verdana, arial, sans-serif;
border:none;
}
table table th
{
height:2.5em;
background-color:#F0E1FF;
font: bold 0.8em verdana, arial, sans-serif;
color:#cc0000;
border-bottom:1px solid #000;
text-align:left;
}
td
{
vertical-align:top;
border:1px solid #000;
}
</style>
</head>
<body>
<table cellspacing="30">
<tr>
<td>
<table cellspacing="0">
<tr>
<th>BEAUTY</th>
</tr>
<tr>
<td><a href="keywords=perfume" target="_top">Perfume</a>,
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>BUSINESS</th>
</tr>
<tr>
<td><a href="keywords=business" target="_top">Business</a>
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>COMPUTING</th>
</tr>
<tr>
<td><a href="keywords=computing" target="_top">Computing</a
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>CREDIT</th>
</tr>
<tr>
<td><a href="search&id=12336&sid=
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>ED'N/CAREER</th>
</tr>
<tr>
<td><a href="keywords=education" target="_top">Education</a
</tr>
</table></td>
</tr>
<tr>
<td>
<table cellspacing="0">
<tr>
<th>HEALTH</th>
</tr>
<tr>
<td><a href="keywords=aromaterapy
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>FINANCIAL</th>
</tr>
<tr>
<td><a href="keywords=finance" target="_top">Finance</a>,
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>FREE STUFF</th>
</tr>
<tr>
<td><a href="keywords=free" target="_top">Free</a>, <a href="keywords=free+credit
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>OFFICE</th>
</tr>
<tr>
<td><a href="keywords=office+supp
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>HOME</th>
</tr>
<tr>
<td><a href="keywords=home+busine
</tr>
</table></td>
</tr>
<tr>
<td>
<table cellspacing="0">
<tr>
<th>INSURANCE</th>
</tr>
<tr>
<td><a href="keywords=insurance" target="_top">Insurance</a
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>INTERNET</th>
</tr>
<tr>
<td><a href="keywords=internet" target="_top">Internet</a>
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>LAW</th>
</tr>
<tr>
<td><a href="keywords=law" target="_top">Law</a>, <a href="keywords=lawyer" target="_top">Lawyer</a>, <a href="keywords=detective" target="_top">Detective</a
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>LEISURE</th>
</tr>
<tr>
<td><a href="keywords=movies" target="_top">Movies</a>, <a href="keywords=stars" target="_top">Stars</a>, <a href="keywords=tv" target="_top">TV</a>, <a href="keywords=radio" target="_top">Radio</a>, <a href="keywords=cd" target="_top">CDs</a>, <a href="keywords=dvd" target="_top">DVDs</a>, <a href="keywords=ipod" target="_top">ipod</a>, <a href="keywords=data+recove
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>MARKETING</th>
</tr>
<tr>
<td><a href="keywords=marketing" target="_top">Marketing</a
</tr>
</table></td>
</tr>
<tr>
<td>
<table cellspacing="0">
<tr>
<th>OFFICE</th>
</tr>
<tr>
<td><a href="keywords=office+supp
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>RANDOMLY</th>
</tr>
<tr>
<td><a href="keywords=happy" target="_top">Happy</a>, <a href="keywords=fun" target="_top">Fun</a>, <a href="keywords=kerry" target="_top">Kerry</a>, <a href="keywords=marilyn+mon
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>REAL ESTATE</th>
</tr>
<tr>
<td><a href="keywords=real+estate
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>SHOPPING</th>
</tr>
<tr>
<td><a href="keywords=shopping" target="_top">Shopping</a>
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>TRAVEL</th>
</tr>
<tr>
<td><a href="keywords=travel" target="_top">Travel</a>, <a href="keywords=vacations" target="_top">Vacations</a
</tr>
</table></td>
</tr>
</table>
</body>
</html>
This should get you abobut 90% of the way there. Happy cut and pasting.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table
{
width:100%;
table-layout:fixed;
}
table table
{
height:15em;
border-spacing:0;
}
table table td
{
width:200px;
height:13em;
vertical-align:middle;
font: .9em verdana, arial, sans-serif;
border:none;
}
table table th
{
height:2.5em;
background-color:#F0E1FF;
font: bold 0.8em verdana, arial, sans-serif;
color:#cc0000;
border-bottom:1px solid #000;
text-align:left;
}
td
{
vertical-align:top;
border:1px solid #000;
}
</style>
</head>
<body>
<table cellspacing="30">
<tr>
<td>
<table cellspacing="0">
<tr>
<th>BEAUTY</th>
</tr>
<tr>
<td><a href="keywords=perfume" target="_top">Perfume</a>,
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>BUSINESS</th>
</tr>
<tr>
<td><a href="keywords=business" target="_top">Business</a>
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>COMPUTING</th>
</tr>
<tr>
<td><a href="keywords=computing" target="_top">Computing</a
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>CREDIT</th>
</tr>
<tr>
<td><a href="search&id=12336&sid=
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>ED'N/CAREER</th>
</tr>
<tr>
<td><a href="keywords=education" target="_top">Education</a
</tr>
</table></td>
</tr>
<tr>
<td>
<table cellspacing="0">
<tr>
<th>HEALTH</th>
</tr>
<tr>
<td><a href="keywords=aromaterapy
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>FINANCIAL</th>
</tr>
<tr>
<td><a href="keywords=finance" target="_top">Finance</a>,
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>FREE STUFF</th>
</tr>
<tr>
<td><a href="keywords=free" target="_top">Free</a>, <a href="keywords=free+credit
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>OFFICE</th>
</tr>
<tr>
<td><a href="keywords=office+supp
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>HOME</th>
</tr>
<tr>
<td><a href="keywords=home+busine
</tr>
</table></td>
</tr>
<tr>
<td>
<table cellspacing="0">
<tr>
<th>INSURANCE</th>
</tr>
<tr>
<td><a href="keywords=insurance" target="_top">Insurance</a
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>INTERNET</th>
</tr>
<tr>
<td><a href="keywords=internet" target="_top">Internet</a>
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>LAW</th>
</tr>
<tr>
<td><a href="keywords=law" target="_top">Law</a>, <a href="keywords=lawyer" target="_top">Lawyer</a>, <a href="keywords=detective" target="_top">Detective</a
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>LEISURE</th>
</tr>
<tr>
<td><a href="keywords=movies" target="_top">Movies</a>, <a href="keywords=stars" target="_top">Stars</a>, <a href="keywords=tv" target="_top">TV</a>, <a href="keywords=radio" target="_top">Radio</a>, <a href="keywords=cd" target="_top">CDs</a>, <a href="keywords=dvd" target="_top">DVDs</a>, <a href="keywords=ipod" target="_top">ipod</a>, <a href="keywords=data+recove
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>MARKETING</th>
</tr>
<tr>
<td><a href="keywords=marketing" target="_top">Marketing</a
</tr>
</table></td>
</tr>
<tr>
<td>
<table cellspacing="0">
<tr>
<th>OFFICE</th>
</tr>
<tr>
<td><a href="keywords=office+supp
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>RANDOMLY</th>
</tr>
<tr>
<td><a href="keywords=happy" target="_top">Happy</a>, <a href="keywords=fun" target="_top">Fun</a>, <a href="keywords=kerry" target="_top">Kerry</a>, <a href="keywords=marilyn+mon
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>REAL ESTATE</th>
</tr>
<tr>
<td><a href="keywords=real+estate
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>SHOPPING</th>
</tr>
<tr>
<td><a href="keywords=shopping" target="_top">Shopping</a>
</tr>
</table></td>
<td>
<table cellspacing="0">
<tr>
<th>TRAVEL</th>
</tr>
<tr>
<td><a href="keywords=travel" target="_top">Travel</a>, <a href="keywords=vacations" target="_top">Vacations</a
</tr>
</table></td>
</tr>
</table>
</body>
</html>
ASKER
>>>>Well, you're a maniac, as always :-)
LOL - the truth will out!
the solution - sorry - not what I had in mind.
If you go to apple``````ness dot com/inline.jpg you'll see how the top of each row stays in line - only because it's not oversized but that's what I want even when the font is enlarged.
/noline.jpg is what I have now if it oversizes - which is quite similar to sean.jpg that you just gave me.
I'll have a play with it tomorrow. It's time for my medicine......:)...lol - bedtime that is.
PS - PLEASE EDIT YOUR SOLUTION above so that mydomain name doesn't appear - it's really quite embarassing when a google search turns up your domain, care of experts-exchange, saying how do I xyz and and all the thread is laid bare - here we have a case in point.
macuser
LOL - the truth will out!
the solution - sorry - not what I had in mind.
If you go to apple``````ness dot com/inline.jpg you'll see how the top of each row stays in line - only because it's not oversized but that's what I want even when the font is enlarged.
/noline.jpg is what I have now if it oversizes - which is quite similar to sean.jpg that you just gave me.
I'll have a play with it tomorrow. It's time for my medicine......:)...lol - bedtime that is.
PS - PLEASE EDIT YOUR SOLUTION above so that mydomain name doesn't appear - it's really quite embarassing when a google search turns up your domain, care of experts-exchange, saying how do I xyz and and all the thread is laid bare - here we have a case in point.
macuser
ASKER
oops - thos e last 2 images
inline.jpg and sean.jpg got loaded onto mydomain[i```````pure-etc.
inline.jpg and sean.jpg got loaded onto mydomain[i```````pure-etc.
ASKER
Got it!
It was getting the ="top" in the right place - i'll strip out all the extraneous ones and post a link tomorrow - thanks
<table width="100%" border="0">
<tr style="vertical-align:top"
<td style="vertical-align:top"
<tr>
<td bgcolor="#000000"> <table bgcolor="#000000" width="153" height="238" cellspacing="0" cellpadding="2" border="0">
<tr>
<td bgcolor="#F0E1FF" width="153" height="18"><b><font face="Verdana,Arial" color="#cc0000" size="2">OFFICE</font></b>
</tr>
<tr>
<td bgcolor="#000000" width="153" height="1"></td>
</tr>
<tr style="vertical-align:top"
<td bgcolor="#FFFFFF" width="153" height="219"><font color="#990000" size="2" face="Verdana,Arial">
<a href="http://www.search.com/cgi-bin/ppc/search/search.cgi?keywords=office+supplies" target="_top">Office
It was getting the ="top" in the right place - i'll strip out all the extraneous ones and post a link tomorrow - thanks
<table width="100%" border="0">
<tr style="vertical-align:top"
<td style="vertical-align:top"
<tr>
<td bgcolor="#000000"> <table bgcolor="#000000" width="153" height="238" cellspacing="0" cellpadding="2" border="0">
<tr>
<td bgcolor="#F0E1FF" width="153" height="18"><b><font face="Verdana,Arial" color="#cc0000" size="2">OFFICE</font></b>
</tr>
<tr>
<td bgcolor="#000000" width="153" height="1"></td>
</tr>
<tr style="vertical-align:top"
<td bgcolor="#FFFFFF" width="153" height="219"><font color="#990000" size="2" face="Verdana,Arial">
<a href="http://www.search.com/cgi-bin/ppc/search/search.cgi?keywords=office+supplies" target="_top">Office
ASKER
Actually just here was enough...couldn't see the wood for the trees.
<table width="100%" border="0">
<tr style="vertical-align:top"
apple~~~~ness dot com/ tops.html
thanks
<table width="100%" border="0">
<tr style="vertical-align:top"
apple~~~~ness dot com/ tops.html
thanks
>>it's really quite embarassing when a google search turns up your domain, care of experts-exchange, saying how do I xyz and and all the thread is laid bare
lol i've run into that a few times myself. had the mods go back and edit it out.
lol i've run into that a few times myself. had the mods go back and edit it out.
Sean