Question

I am trying to create brackets using tables and I’ve done all the calculations for the rowspan heights for all the cell elements, but I’m having trouble with how it keeps placing the cells into the table with rowspans defined in previous rows. See this example:

<table border="1">
<tr>
<td style="min-width: 100px">Begin</td>
<td style="min-width: 10px"></td>
<td style="min-width: 10px"></td>
<td style="min-width: 100px">End</td>
</tr>
<tr>
<td colspan="4" style="height: 20px"></td>
</tr>
<tr>
<td rowspan="2">Seed 1</td>
<td rowspan="2"></td>
<td rowspan="5"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
</tr>
</table>

Here, the current heights for each column (excluding the rows above because they are already even) are at 2, 2, 5, and 3. However when adding another element in the next row just to see where it gets placed in the table, it is rendered to the right of the existing row, creating a fifth column that shouldn’t exist. Why is it not placed in the first column making the column heights 3, 2, 5, and 3? I was under the impression that the table would put the element in the next shortest column. Am I completely off with tables? What should I do to make this element actually appear in the first column where it’s supposed to be? Does the entire table need to be completed in order for this to render correctly (usually tables will just leave blank space where cells have not been placed)?

I searched on Google for an hour and couldn’t find anything pertaining to how the cells are actually supposed to be placed when the HTML is processed by the browser. There’s too much other garbage about how tables work and yada yada ya.

Answer 1

Actually, what is happening is that the final cell is trying to go in the next row immediately below the first row. However, the next row is already full, because every cell is at least two rows high. The first row contains [Seed 1] [] [] [], and the second row contains the bottom part of the first two cells, and the middle of the third and fourth cell from the row above.

If you make an empty row and move down to the third row below, you see the cells start to appear in the table as you expected:

<tr></tr>
<tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
    <!-- no room left, now move to row 4 -->
</tr>

Cells don’t automatically flow from one row to the next. You have to explicitly close the row and start the next row when each row is full. In your case, you entirely filled two full rows at once, so you have to skip a row to get to the next row with available cells.

Here is a sample that shows the cells working as you expect: http://jsfiddle.net/UmLqw/1/