在HTML中使用colspan和rowspan以下列格式绘制表格？

我想画一个表格式如下：在HTML中使用colspan和rowspan以下列格式绘制表格？

table that I wanted to draw

但它无法正常显示。它在最后一列之后插入一些行。如何修复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>

来源

2012-07-12 Vinay

PLZ向我们展示你如何尝试在HTML和expln你是STK哪里。 – Oded 2012-07-12 13:23:43

到目前为止，您的HTML代码是什么？ – Sirko 2012-07-12 13:23:53

你可以创建一个http://jsfiddle.net？ – 2012-07-12 13:37:59

您的标题行非常准确。但是，您需要在后续的<td>标签中考虑额外的行和列。由于第1-4列和第7列为rowspan="2"，因此需要第二个<tr>以及两个<td>标签来说明第5-6列中所需的额外单元。此外，由于您希望每个列5-6下有三个单元格，因此您需要将此数字加倍。因此，有6个是需要：

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

低于所有后续行都将需要11个<td>标签，因为你必须考虑到所有的七列，加上四个额外的细胞。

<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小提琴：http://jsfiddle.net/Aj5k7/2/

教程的rowspan和colspan属性：http://www.tizag.com/htmlT/tables.php/

来源

2012-07-12 13:43:43 JSW189

打我吧！另一个工作jsfiddle在这里：http://jsfiddle.net/jfrej/U453N/1/ – jfrej 2012-07-12 13:48:15

在HTML中使用colspan和rowspan以下列格式绘制表格？

回答

相关问题