Splitting a table cell into two columns in HTML

Question

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

Answer 1

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> 

Answer 2

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