Draw table in following format with colspan and rowspan in HTML? - html

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/