title: How to format multiple tables for vertical alignment
body: <p>I have inherited some HTML code and have been asked to align the two tables so the text lines up between the two columns.</p>
  
  <p>There is an outer table that provides a two-column look to this thing, then two inner tables (one for each column). Each inner table contains boxes that hold text. It is these boxes of text that the client wants aligned between the two columns.</p>
  
  <p>I can think of some ways to make the lines of text "match" across the two columns, but nothing simple or elegant.</p>
  
  <p>Here's the html code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body  &gt;
      &lt;table width="100%" border="1" cellspacing="2" cellpadding="0"&gt;
      &lt;tr&gt;
      &lt;td width="50%"&gt;
          &lt;hr align="left" /&gt;
          &lt;p&gt;&lt;center&gt;&lt;strong&gt;Left Side&lt;/strong&gt;&lt;/center&gt;&lt;/p&gt;
          &lt;table width="100%" border="1" cellspacing="2" cellpadding="0"&gt;
              &lt;tr&gt;
                  &lt;td width="5%"&gt;
                  &lt;strong&gt;1:&lt;/strong&gt;
                  &lt;/td&gt;
                  &lt;td width="90%"&gt;
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td width="5%"&gt;
                  &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td width="90%"&gt;
                  &lt;hr align="left" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td width="5%"&gt;
                  &lt;strong&gt;2:&lt;/strong&gt;
                  &lt;/td&gt;
                  &lt;td width="90%"&gt;
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td width="5%"&gt;
                  &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td width="90%"&gt;
                  &lt;hr align="left" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/td&gt;
      &lt;td width="50%"&gt;
          &lt;hr align="left" /&gt;
          &lt;p&gt;&lt;center&gt;&lt;strong&gt;Right Side&lt;/strong&gt;&lt;/center&gt;&lt;/p&gt;
          &lt;table width="100%" border="1" cellspacing="2" cellpadding="0"&gt;
              &lt;tr&gt;
                  &lt;td width="5%"&gt;
                  &lt;strong&gt;1:&lt;/strong&gt;
                  &lt;/td&gt;
                  &lt;td width="90%"&gt;
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td width="5%"&gt;
                  &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td width="90%"&gt;
                  &lt;hr align="left" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td width="5%"&gt;
                  &lt;strong&gt;2:&lt;/strong&gt;
                  &lt;/td&gt;
                  &lt;td width="90%"&gt;
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td width="5%"&gt;
                  &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td width="90%"&gt;
                  &lt;hr align="left" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT: Further clarification and restrictions on this thing.</p>
  
  <ol>
  <li><p>It's created by a servlet program, so the ordering of the two columns is loop based. That is, one loop writes the first (left) column, then another loop writes the second (right) column. They are not "blendable" loops - they must run one after the other, severely restricting what I'm allowed to do with the formatting.</p></li>
  <li><p>The client has specified "no javascript" in the servlets. It is a firm restriction.</p></li>
  </ol>
  
  <p>I can use CSS, but the two loops (left, then right) are fixed.</p>