You need to use valign="top" on the <td> tag surrounding the shorter table, as in this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>Table Vertical Alignment</title>
</head>
<body>
<h1>Table Vertical Alignment</h1>
<table width="100%" border="1">
<tr><td>
<table border="1">
<caption>Left Hand Inner Table</caption>
<tr><th>Row</th><th>Content</th></tr>
<tr><th>1</th><td>Here is</td></tr>
<tr><th>2</th><td>a table</td></tr>
<tr><th>3</th><td>with many</td></tr>
<tr><th>4</th><td>rows of</td></tr>
<tr><th>5</th><td>data.</td></tr>
</table>
</td><td valign="top">
<table border="1">
<caption>Right Hand Inner Table</caption>
<tr><th>Row</th><th>Content</th></tr>
<tr><th>1</th><td>Table with</td></tr>
<tr><th>2</th><td>few rows.</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
However you should only use tables to display tabular data, such as price lists.
For page layout you should use CSS. For more on tables (and alternatives for page layout) see: http://www.html-tags-guide.com/html-table-tag.html