help aligning tables

[HackerX]

Hi, I am having trouble getting 2 of my 2 tables to go next to each other. the one always is under the other. http://www15.brinkster.com/zonewebdesign/js/test.html

<table style="border:1px groove black; width:130" cellspacing=0 cellpadding=0>
<tr><td align=left bgcolor=black>
<font size="2" face="arial" color=silver><u><P> </P></u></font><br>
</td></tr>
<tr><td align=center border=2>
<table cellpadding=0 cellspacing=0 name=link_table id=link_table>
<tr>
<td class="tds" onmouseover="fadeImg2(0)" onmouseout="fadeImgend2(0)" onclick="window.location='#';" style="font-family:arial; border:1px solid silver;background-color:black; width:100; text-align:center; color:silver;">Misc</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(1)" onmouseout="fadeImgend2(1)" onclick="window.location='#';" style="font-family:arial; border:1px solid silver;background-color:black; width:100; text-align:center; color:silver;">Forms</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(2)" onmouseout="fadeImgend2(2)" onclick="window.location='#';" style="font-family:arial; border:1px solid silver;background-color:black; width:100; text-align:center; color:silver;">Buttons</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(3)" onmouseout="fadeImgend2(3)" onclick="window.location='#';" style="font-family:arial; border:1px solid silver;background-color:black; width:100; text-align:center; color:silver;">Images</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(4)" onmouseout="fadeImgend2(4)" onclick="window.location='#';" style="font-family:arial; border:1px solid silver;background-color:black; width:100; text-align:center; color:silver;">BG Effects</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(5)" onmouseout="fadeImgend2(5)" onclick="window.location='#';" style="font-family:arial; border:1px solid silver;background-color:black; width:100; text-align:center; color:silver;">Time/Calenders</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(6)" onmouseout="fadeImgend2(6)" onclick="window.location='#';" style="font-family:arial; border:1px solid silver;background-color:black; width:100; text-align:center; color:silver;">Menus & Navigation</td>
</tr>
<tr>
<td class="tds" onmouseover="fadeImg2(7)" onmouseout="fadeImgend2(7)" onclick="window.location='#';" style="font-family:arial; border:1px solid silver;background-color:black; width:100; text-align:center; color:silver;">System & Browser</td>
</tr>
</td></tr>
</table>
</table>

<table width="100%" border="0" align="center" valign="center">
<tr>
<td><iframe src="http://www15.brinkster.com/zonewebdesign/news.html" name="middle" width="100%" height="480"></iframe></td>
</tr>
</table>

[pyro]

Tables are block style elements. Thus they can't be aligned side-by-side without CSS positioning...

[HackerX]

well could you help me with that? I really want these things side by side...

[pyro]

Here's a quick and dirty example:

<div style="position: absolute; top: 0px; left: 0px;">
<table border="1">
<tr>
<td>Table One</td>
</tr>
</table>
</div>

<div style="position: absolute; top: 0px; left: 80px;">
<table border="1">
<tr>
<td>Table two</td>
</tr>
</table>
</div>

[HackerX]

thx I can figure out the rest that gives me a basic idea.

[pyro]

You bet...

[divaone]

hi there,

to align those tables, expand on what you've already done... nest them. your first main table is nested but the second main is not. nest them in one large table as if they were table cells.

on further observation, why not use css to define your menu styles instead of retyping a style for each individual menu item? they are all the same so make one single declaration[?]

also, your menu text is riiiiiiight on the edge there. a padding of 2 or 3 would look great: padding:2px;

i like the idea of using divisions with absolute positioning. make sure you leave enough space for the menu on the left when/if you use that. test it with several resolutions afterwards to make sure it still looks 'right'.

divaone...