Align two tables horizontally HTML/CSS

Question

I have two tables that align horizontally using this syntax:

<table width=100%>
  <tr>
    <td><table1 code goes here>
    </td>
    <td><table2 code goes here>
    </td>
  </tr>
</table>

This is all fine and dandy and they align if the tables have the same number of data rows. But if one has fewer than the other, then they are still aligned in the same positions, but the other table is shrunk, so they look like:

header
data
data
data    header
data    data
data    data
data    data
data
data

Is there any way to getthem to align from the top down, as well?

Like

header    header
data      data
data      data
data      data
data
data
data
data
data

How can I fix this?

Answer 1

You can use valign = top.

<table width=100%> 
  <tr> 
    <td valign="top"><table1 code goes here>
    </td>
    <td valign="top"><table2 code goes here>
    </td>
  </tr>
</table>