[html] Splitting a table cell into two columns in HTML

I have the following table:

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

And I wish to split the cell which contains "Split this one into two columns" into two cells/columns. How do I go about this?

Fiddle

You have two options.

1. Use an extra column in the header, and use <colspan> in your header to stretch a cell for two or more columns.
2. Insert a <table> with 2 columns inside the td you want extra columns in.

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>

I came here for a similar problem I was facing with my table headers.

@MrMisterMan's answer, as well as others, were really helpful, but the borders were beating my game. So, I did some research to find the use rowspan.

Here's what I did and I guess it might help others facing something similar.

<table style="width: 100%; margin-top: 10px; font-size: 0.8em;" border="1px">_x000D_
    <tr align="center" >_x000D_
        <th style="padding:2.5px; width: 10%;" rowspan="2">Item No</th>_x000D_
        <th style="padding:2.5px; width: 55%;" rowspan="2">DESCRIPTION</th>_x000D_
        <th style="padding:2.5px;" rowspan="2">Quantity</th>_x000D_
        <th style="padding:2.5px;" colspan="2">Rate per Item</th>_x000D_
        <th style="padding:2.5px;" colspan="2">AMOUNT</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
        <th>Rs.</th>_x000D_
        <th>P.</th>_x000D_
        <th>Rs.</th>_x000D_
        <th>P.</th>_x000D_
    </tr>_x000D_
</table>

Change the <td> to be split to look like this:

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

is that what your looking for?

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

Use this example, you can split with the colspan attribute

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

More examples at http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html.

Please try this way.

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

Please try the following way.

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

Like this http://jsfiddle.net/8ha9e/1/

Add colspan="2" to the 3rd <th> and then have 4 <td>'s in your second row.

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