jfwfmt jfwfmt - 7 months ago 7
HTML Question

Trying to layout a table in html

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

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>