CODEWITHSUNDEEP
htmlhtml-table
Vinay
Vinay

Reputation: 347

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

I want to draw a table in following format:

table that I wanted to draw

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>

Upvotes: 0

Views: 1836

Answers (1)

JSW189
JSW189

Reputation: 6325

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/

Upvotes: 1

Related Questions