Float Multiple Tables to the Top

HTML & CSS
1

I am trying to get 3 tables align to the same row. Any help rendered is greatly appreciated

Existing Problem

What I want to achieve

Link to page

Body

<table width="920px">
<tbody>
<tr>
<td width="40%">
<table width="40%">
<tbody>
<tr>
<td class="tableheader" style="text-align: justify;"><span style="color: #ffffff;">Our Subsidiaries</span></td>
</tr>
<tr>
<td class="tablecontent" style="text-align: justify;"><a href="http://www.globaldenso.com/motorsports/index.html" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link1.gif" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-494" /></a>&nbsp;&nbsp;&nbsp;<a href="http://denso-yea.com/" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link2.jpg" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-495" /></a><br/>
<a href="http://www.globaldenso.com/en/aboutdenso/globalnetwork/globalmap/index.html" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link3.jpg" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-496" /></a>&nbsp;&nbsp;&nbsp;<a href="http://www.globaldenso.com/en/" target="_blank"><img src="http://insurancecommissionrefund.com/denso/wp-content/uploads/2012/04/Home_Link4.jpg" alt="" title="" width="119" height="35" class="alignleft size-full wp-image-497" /></a></td>
</tr>
</tbody>
</table>
</td>
</td>
<td width="30%">
<table width="30%">
<tbody>
<tr>
<td class="tableheader" style="text-align: justify;"><span style="color: #ffffff;">Quick Links</span></td>
</tr>
<tr>
<td class="tablecontent" style="text-align: justify;">Find Your Spark Plug

Spark Plug Cross Reference</td>
</tr>
</tbody>
</table>
</td>
<td width="30%">
<table width="30%">
<tbody>
<tr>
<td class="tableheader" style="text-align: justify;"><span style="color: #ffffff;">DENSO Group Companies</span></td>
</tr>
<tr>
<td class="tablecontent" style="text-align: justify;">
Japan
-- <a href="http://www.denso.co.jp/ja/" target="_blank">Japan(Japanese)</a>


America
-- <a href="http://www.densona.com/" target="_blank">North America</a>
-- <a href="http://www.denso.com.br/" target="_blank">Brazil</a>

Europe
-- <a href="http://denso-europe.com/" target="_blank">Europe</a>

Asia/Oceania
-- <a href="http://www.denso.com.au/" target="_blank">Australia</a>
-- <a href="http://denso-europe.com/" target="_blank">Singapore</a>
-- <a href="http://www.denso.co.th/" target="_blank">Thailand</a>
-- <a href="http://www.denso.co.id/" target="_blank">Indonesia</a>
-- <a href="http://www.denso.com.my/home.aspx" target="_blank">Malaysia</a>
-- <a href="http://www.denso.com.cn/" target="_blank">China</a>
-- <a href="http://www.denso.com.ph/" target="_blank">Philippines</a>
-- <a href="http://www.denso.com.tw/" target="_blank">Taiwan</a>
-- <a href="http://www.denso.co.in/DNIN/index.html" target="_blank">India</a></td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>

CSS

td.tableheader {
vertical-align: top;
background-color:#336666;
width: 30%;
padding-top:4px;
padding-bottom:4px;
padding-right:9px;
padding-left:9px;
border-color: #c0c0c0;
border-width: 1px 1px 1px 1px;
border-style: solid;
}

td.tablecontent {
vertical-align: top;
width: 30%;
height: 100px;
padding-top:4px;
padding-bottom:4px;
padding-right:9px;
padding-left:9px;
border-color: #c0c0c0;
border-width: 1px 1px 1px 1px;
border-style: solid;
}
2

Hi :). You have this currently

[COLOR=#000000][FONT=Consolas]table tr td, table tr th[/FONT][/COLOR][COLOR=#000000][FONT=Consolas] {[/FONT][/COLOR]
[LIST]
[*=left][COLOR=#C80000]text-align[/COLOR]: left;
[*][COLOR=#C80000]padding[/COLOR]: 5px 7px 3px 7px;
[*][COLOR=#C80000]vertical-align[/COLOR]: middle;
[*][COLOR=#C80000]border-bottom[/COLOR]: 1px solid white;
[/LIST]
[COLOR=#000000][FONT=Consolas]}

That’s making the table to be vertically aligned in hte middle (the 3rd <td> (with the last column) doesn’t appear to be affected because it’s so long). If you need that to be a default property/value for elsewhere on the site, just reset it for that table :).

Preferably just assign that one parent table a class, and set the vertical-align to top :). Or just remove that vertical-align rule I posted and it’ll be fixed. Either one. Depends on the rest of the needs on your site.[/FONT][/COLOR]

3

Hi Ryan,

Thank you so far. I have managed to find it through firebug. Is there any good tutorials for usage of FireBug?

Chris

4

Not that I know of. Just play with it :).