Разбиение ячейки таблицы на два столбца в 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

Ответы

Ответ 1

Подобно 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>

Ответ 2

Я пришел сюда для аналогичной проблемы, с которой столкнулся мой стол.

Ответ на

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

Ответ 3

У вас есть два варианта.

Используйте дополнительный столбец в заголовке и используйте <colspan> в своем заголовке, чтобы растянуть ячейку для двух или более столбцов.
Вставьте <table> с двумя столбцами внутри td, в которые вы хотите добавить дополнительные столбцы.

Ответ 4

это то, что вы ищете?

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

Ответ 5

Измените <td>, который нужно разбить, чтобы выглядеть так:

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

Ответ 6

Используйте этот пример, вы можете разделить его с атрибутом 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.

Ответ 7

Пожалуйста, попробуйте следующее.

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

Ответ 8

живая скрипка

Код

<table class="table table-bordered">
  <thead>
    <tr>
        <td rowspan="2" style="vertical-align: middle;">
            first
        </td>
        <td rowspan="2" style="vertical-align: middle;">
            Second
        </td>
        <td rowspan="2" style="vertical-align: middle;">
            Third
        </td>
        <td rowspan="1" colspan="2">
            Fourth
        </td>
    </tr>
    <tr>
        <td>
          fifth
        </td>
        <td>
          sixth
        </td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>