Question

I want to draw a table in following format:

But it’s not displaying properly. It’s inserting some rows after the last column.
How can I fix the HTML?

<tr>
    <th rowspan="2">Client ID</th>
    <th rowspan="2">Trade ID</th>
    <th rowspan="2">Symbol</th>
    <th rowspan="2">Average Price</th>
    <th colspan="3">DTD</th>
    <th colspan="3">MTD</th>
    <th rowspan="2">Net YTD</th>
</tr>


<tr>
    <td><core:out value="${orderBookData.clientID}" /><br></td>
    <td><core:out value="${orderBookData.tradeID}" /></td>
    <td><core:out value="${orderBookData.symbol}" /></td>
    <td><core:out value="${orderBookData.averagePrice}" /></td>
    <td><core:out value="${orderBookData.DTD}" /></td>
    <td><core:out value="${orderBookData.MTD}" /></td>
    <td><core:out value="${orderBookData.YTD}" /></td>
    <td><core:out value="${orderBookData.DTD}" /></td>
    <td><core:out value="${orderBookData.MTD}" /></td>
    <td><core:out value="${orderBookData.YTD}" /></td>
    <td><core:out value="${orderBookData.YTD}" /></td>
</tr>

Answer 1

Your header row is perfectly accurate. However, you need to account for the extra rows and columns with your subsequent <td> tags. Since columns 1-4 and 7 are rowspan="2", you need a second <tr> with two <td> tags to account for the extra cells needed in columns 5-6. Further, since you want three cells each under columns 5-6, you need to triple this number. Thus six would be needed:

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>

All subsequent rows below that will need 11 <td> tags, since you must account for all seven columns plus the four extra cells.

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>

JS Fiddle: http://jsfiddle.net/Aj5k7/2/

Tutorial on the rowspan and colspan attributes: http://www.tizag.com/htmlT/tables.php/