2013-10-01 98 views
23

我有如下表:拆分表格单元格成两列HTML

<table border="1"> 
    <tr> 
    <th scope="col">Header</th> 
    <th scope="col">Header</th> 
    <th scope="col">Header</th> 
    </tr> 
    <tr> 
    <th scope="row">&nbsp;</th> 
    <td>&nbsp;</td> 
    <td>Split this one into two columns</td> 
    </tr> 
</table> 

我要拆分含有细胞“拆分此一进两列”成两个细胞/列。我如何去做这件事?

Fiddle

+0

定义“拆分为两列”。哪些列?如果你的意思是你想在表格中添加一列并将部分单元格内容移动到新列,那么可能会有什么问题呢?只需添加一列,每行添加一个单元格。 –

回答

28

像这样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">&nbsp;</th> 
    <td>&nbsp;</td> 
    <!-- The following two cells will appear under the same header --> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    </tr> 
</table> 
1

更改<td>被分裂成这样:

<td><table><tr><td>split 1</td><td>split 2</td></tr></table></td> 
10

你有两个选择。

  1. 在标题中使用一个额外的列,并使用<colspan>在你的头伸用单电池的两个或多个列。
  2. 插入td<table> 2列要在额外列。
3

是你想找的?

<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">&nbsp;</th> 
<td>&nbsp;</td> 
<td>Split this one</td> 
<td>into two columns</td> 
</tr> 
</table> 
2

用这个例子,你可以在http://hypermedia.univ-paris8.fr/jean/internet/ex_table.htmlcolspan属性拆分

<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> 

更多的例子。

+0

这个问题是我如何在单击表格标题时对两个tds进行排序, – PirateApp

0

请尝试以下方法。

<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> 
4

我来到这里是为了一个类似的问题,我面对我的表头。

@ 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>