As you can see from the attached image, the black box is side-by-side with the gray box. I'd like the gray box to be directly underneath the black box. How can I accomplish this? Thanks
Here is the code:
HTML

<td class="login3">
<br/><table>
<tr><td>
<form method="get" action="search.php">
<div id="siteSearch">
<!--<input type="hidden" name="hl" value="en" />-->
<input type="hidden" name="type" value="videos"/>
<input align="middle" type="text" name="keyword" id="myField"/>&nbsp;&nbsp;<input type="image" src="images/" name="sa" value="Search" id="mySearch"/>
</div>
</form>
</td></tr></table>

<td class="login4">
<table>
<tr><td>
<form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
<label>Username</label><span class="username"><input type="text" name="user_name_login" size="9" style="width:70px;" />
<label>Password</label><span class="password"><input type="password" name="password_login" size="9" style="width:70px;" />
<input type="submit" value="[var.lang_login_now]" class="btn_vid1" /></a><!--<a href="login.php"></a>-->
<input type="hidden" name="submitted" value="yes" />
<input type="hidden" name="remember_me" value="remember_me" />
</form>
</td></tr></table>

CSS:

td.login3 {
background:#000000;
text-align: center;
padding-right:10px;
padding-left:10px:
padding-top:10px;
background-position:top;
padding-bottom:0px;
margin:0px 0px 0px 0px;
width:0px;
height:0px;

}

td.login4 {
background:#696969;
text-align: center;
padding-right:0px;
padding-left:0px:
padding-top:0px;
background-position:bottom;
padding-bottom:0px;
margin:0px 0px 0px 0px;
width:0px;
height:0px;

}

We have added 'stacking’ to the tiling and cascading table layout options. Stacking allows players to place, or 'stack’, all the tables on top of one another while navigating from table to table using the stacking console.
The main features are:

Table list with relative position and timer alerts
Concise and clear hand history
Details of the players still in the hand and in their order to act allowing for quick positional assessment and previous action overlay
Active console table with embedded action buttons
Tables requiring attention, based on the time to act, clearly displayed
Toggle between two tables with our previous table button

Though you haven't inclued it in your code it looks like the two tables are on the same row of an outer table. You need to put the second table on to the next row of this containing table. Stick a </tr><tr> between the 2 tables.
On a separate note, you haven't closed the td tags for the login3 and login4 classes.

<td class="login3">
<br/><table>
<tr><td>
<form method="get" action="search.php">
<div id="siteSearch">
<!--<input type="hidden" name="hl" value="en" />-->
<input type="hidden" name="type" value="videos"/>
<input align="middle" type="text" name="keyword" id="myField"/>&nbsp;&nbsp;<input type="image" src="http://www.webmaster-talk.com/images/" name="sa" value="Search" id="mySearch"/>
</div>
</form>
</td></tr></table>
</td></tr>
 
<tr><td class="login4">
<table>
<tr><td>
<form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
<label>Username</label><span class="username"><input type="text" name="user_name_login" size="9" style="width:70px;" />
<label>Password</label><span class="password"><input type="password" name="password_login" size="9" style="width:70px;" />
<input type="submit" value="[var.lang_login_now]" class="btn_vid1" /></a><!--<a href="login.php"></a>-->
<input type="hidden" name="submitted" value="yes" />
<input type="hidden" name="remember_me" value="remember_me" />
</form>
</td></tr></table>
</td>