我有下表：
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td>Split this one into two columns</td>
</tr>
</table>
我希望将包含“将这一列分成两列”的单元格拆分为两个单元格/列。我该怎么办？
【问题讨论】：
标签： html css html-table
点赞http://jsfiddle.net/8ha9e/1/
将colspan="2" 添加到第三个<th>，然后在第二行有4 个<td>。
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col" colspan="2">Header</th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<!-- The following two cells will appear under the same header -->
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
【讨论】：
我来到这里是因为我在使用表格标题时遇到了类似的问题。
@MrMisterMan 的回答以及其他人的回答确实很有帮助，但边界正在击败我的游戏。所以，我做了一些研究以找到 rowspan 的用途。
这就是我所做的，我想这可能会帮助其他面临类似问题的人。
<table style="width: 100%; margin-top: 10px; font-size: 0.8em;" border="1px">
<tr align="center" >
<th style="padding:2.5px; width: 10%;" rowspan="2">Item No</th>
<th style="padding:2.5px; width: 55%;" rowspan="2">DESCRIPTION</th>
<th style="padding:2.5px;" rowspan="2">Quantity</th>
<th style="padding:2.5px;" colspan="2">Rate per Item</th>
<th style="padding:2.5px;" colspan="2">AMOUNT</th>
</tr>
<tr>
<th>Rs.</th>
<th>P.</th>
<th>Rs.</th>
<th>P.</th>
</tr>
</table>【讨论】：
你有两个选择。
<colspan> 将单元格拉伸为两列或更多列。td 内插入一个带有 2 列的 <table>，您希望在其中添加额外的列。【讨论】：
将要拆分的<td> 更改为如下所示：
<td><table><tr><td>split 1</td><td>split 2</td></tr></table></td>
【讨论】：
这就是你要找的吗？
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col" colspan="2">Header</th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td>Split this one</td>
<td>into two columns</td>
</tr>
</table>
【讨论】：
使用此示例，您可以使用colspan 属性进行拆分
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD>
<TD>Item 3</TD>
<TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE>
更多示例请访问http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html。
【讨论】：
请尝试以下方式。
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
【讨论】：
请试试这个方法。
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th colspan="2">Header</th>
</tr>
<tr>
<td scope="row"> </td>
<td scope="row"> </td>
<td scope="col">Split this one</td>
<td scope="col">into two columns</td>
</tr>
</table>
【讨论】：
https://jsfiddle.net/SyedFayaz/ud0mpgoh/7/
<table class="table-bordered">
<col />
<col />
<col />
<colgroup span="4"></colgroup>
<col />
<tr>
<th rowspan="2" style="vertical-align: middle; text-align: center">
S.No.
</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">Item</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">
Description
</th>
<th
colspan="3"
style="horizontal-align: middle; text-align: center; width: 50%"
>
Items
</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">
Rejected Reason
</th>
</tr>
<tr>
<th scope="col">Order</th>
<th scope="col">Received</th>
<th scope="col">Accepted</th>
</tr>
<tr>
<th>1</th>
<td>Watch</td>
<td>Analog</td>
<td>100</td>
<td>75</td>
<td>25</td>
<td>Not Functioning</td>
</tr>
<tr>
<th>2</th>
<td>Pendrive</td>
<td>5GB</td>
<td>250</td>
<td>165</td>
<td>85</td>
<td>Not Working</td>
</tr>
</table>
【讨论】：