title: Align two tables horizontally HTML/CSS
body: <p>I have two tables that align horizontally using this syntax:</p>
  
  <pre><code>&lt;table width=100%&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;table1 code goes here&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;table2 code goes here&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>header
  data
  data
  data    header
  data    data
  data    data
  data    data
  data
  data
  </code></pre>
  
  <p>Is there any way to getthem to align from the top down, as well?</p>
  
  <p>Like</p>
  
  <pre><code>header    header
  data      data
  data      data
  data      data
  data
  data
  data
  data
  data
  </code></pre>
  
  <p>How can I fix this?</p>