tách một ô trong bảng thành hai cột trong HTML

Question

Tôi có bảng sau:

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

Và tôi muốn chia tế bào, trong đó có "chia này thành hai cột" thành hai tế bào/cột. Làm thế nào để tôi đi về điều này?

Fiddle

Answer 1

Như thế này http://jsfiddle.net/8ha9e/1/

Thêm colspan="2" đến 3 <th> và sau đó có 4 <td> 's ở hàng thứ hai của bạn.

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

Answer 2

Thay đổi <td> được chia để trông như thế này:

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

Answer 3

Bạn có hai lựa chọn.

1. Sử dụng cột phụ trong tiêu đề và sử dụng <colspan> trong tiêu đề để kéo giãn ô cho hai hoặc nhiều cột.
2. Chèn một <table> với 2 cột bên trong td bạn muốn cột thêm vào.

Answer 4

là những gì bạn đang tìm kiếm?

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

Answer 5

Sử dụng ví dụ này, bạn có thể chia với thuộc tính 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> 

Thêm ví dụ tại http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html.

Answer 6

Vui lòng thử cách sau.

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

Answer 7

Tôi đến đây vì một vấn đề tương tự mà tôi đang đối mặt với tiêu đề bảng.

@ Câu trả lời của MrMisterMan, cũng như những người khác, thực sự hữu ích, nhưng biên giới đã đánh bại trò chơi của tôi. Vì vậy, tôi đã làm một số nghiên cứu để tìm việc sử dụng rowspan.

Đây là những gì tôi đã làm và tôi đoán nó có thể giúp những người khác phải đối mặt với một cái gì đó tương tự.

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