Line up two table columns to each other

Question

Is it possible to line up these two tablecolums so cell 1a is in line with cell 2a? As it is right now the outer left column seem to be vertically centered to the outer right column

Further down is the source (html) and then a screenshot

<table>
  <tr> 
    <td>
      <table class="payment"> 
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (1a)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
      <table class="payment"> 
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (1b)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
      <table class="payment"> 
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (1c)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
    </td>

    <!-- OUTER COLUMN 2 -->
    <td>
      <table class="payment"> 
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (2a)</td>
        </tr>
        <tr>
          <td></td>
          <td> decr ...</td>
        </tr>
      </table>
      <table class="payment">
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (2b)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
      <table class="payment">
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (2c)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
      <table class="payment">
        <tr>
          <td> <input type="checkbox"></td>
          <td>info (2d)</td>
        </tr>
        <tr>
          <td></td>
          <td> descr ...</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

image

[And do you really need to use tables for layout?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) — neilsimp1, Jun 24 '16 at 19:19

score 3 · Accepted Answer · answered Jun 24 '16 at 19:22

Straight html add valign=top to you first tr:

<table>
    <tr valign=top> 
        <td>

        <table class="payment"> 
            <tr>
                <td> <input type="checkbox"></td>
                <td>info (1a)</td>
            </tr>
            <tr>

That is, unless something in the class="payment" style is effecting the positioning

Line up two table columns to each other

1 Answers1