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

Question

我想按以下格式绘制表格：

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

您的标题行非常准确。但是，您需要在后续<td>标签中考虑额外的行和列。由于第 1-4 列和第 7 列是rowspan="2"，因此您需要第二个<tr>带有两个<td>标签的时间来说明第 5-6 列中所需的额外单元格。此外，由于您希望在 5-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/