Trying to layout a table in html

Question

I'm trying to layout a table containing four columns: column 1 cell is six rows deep; column 2 cell is six rows deep; column 3 contains a cell four rows deep, and 2 cells one row deep; column 4 contains a cell three rows deep and a cell one row deep, with the last two cells in the column empty and unspecified.

ABCD
ABCD
ABCD
ABCE
ABFx
ABGx

I tried to follow what I think is the rule for doing this, namely: the first <tr> contains <td>s for everything in the first row; the second <tr> contains the <td>(s) to fill in columns for the first non-specified column(s) [in this case the cell called "E"], and the next two <tr>s contain a <td> each for "F" and "G".

The following code is my attempt:

    <table border='1'>
        <tr>
            <td rowspan='6'>A<br/>A<br/>A<br/>A<br/>A<br>A</td>
            <td rowspan='6'>B<br/>B<br/>B<br/>B<br/>B<br>B</td>
            <td rowspan='4'>C<br/>C<br/>C<br/>C</td>
            <td rowspan='3'>D<br/>D<br/>D</td>
        </tr>
        <tr>
            <td>E</td>
        </tr>
        <tr>
            <td>F</td>
        </tr>
        <tr>
            <td>G</td>
        </tr>
    </table>

This gives me:

ABCDx
ABCDx
ABCDE
ABCDF
ABCGx

If I "guide it" with an unwanted column:

1ABCD
2ABCD
3ABCD
4ABCE
5ABF
6ABG

using:

    <table border='1'>
        <tr>
            <th>1</th>
            <td rowspan='6'>A<br/>A<br/>A<br/>A<br/>A<br>A</td>
            <td rowspan='6'>B<br/>B<br/>B<br/>B<br/>B<br>B</td>
            <td rowspan='4'>C<br/>C<br/>C<br/>C</td>
            <td rowspan='3'>D<br/>D<br/>D</td>
        </tr>
        <tr>
            <th>2</th>
        </tr>
        <tr>
            <th>3</th>
        </tr>
        <tr>
            <th>4</th>
            <td>E</td>
        </tr>
        <tr>
            <th>5</th>
            <td>F</td>
        </tr>
        <tr>
            <th>6</th>
            <td>G</td>
        </tr>
    </table>

it comes out as expected. So what am I doing wrong?

Answer 1

First of all, to activate 6 rowspan, you need 6 not empty rows, like that http://codepen.io/Toomean/pen/dMeaqd

<table border='1'>
  <tr>
    <td rowspan='6'>A<br/>A<br/>A<br/>A<br/>A<br>A</td>
    <td rowspan='6'>B<br/>B<br/>B<br/>B<br/>B<br>B</td>
    <td rowspan='4'>C<br/>C<br/>C<br/>C</td>
    <td rowspan='3'>D<br/>D<br/>D</td>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr>
    <td>E</td>
  </tr>
  <tr>
    <td>F</td>
  </tr>
  <tr>
    <td>G</td>
  </tr>
</table>

Answer 2

Add two empty rows before row containing E

  <table border='1'>
    <tr>
        <td rowspan='6'>A<br/>A<br/>A<br/>A<br/>A<br>A</td>
        <td rowspan='6'>B<br/>B<br/>B<br/>B<br/>B<br>B</td>
        <td rowspan='4'>C<br/>C<br/>C<br/>C</td>
        <td rowspan='3'>D<br/>D<br/>D</td>
    </tr>
    <tr></tr>
    <tr></tr>
    <tr>
        <td>E</td>
    </tr>
    <tr>
        <td>F</td>
    </tr>
    <tr>
        <td>G</td>
    </tr>
</table>