How to make one <td> span both columns in a two column table?

Question

How can I create a table like the above example in HTML and CSS. I've tried the following:

<table> 
  <tr> 
    <td style="width:50%">TEXT</td>
    <td style="width:50%">TEXT</td> 
  </tr>
  <tr> 
    <td style="width:100%">TEXT</td> 
  </tr>

but it won't work. Can anyone help?

Answer 1

You should use colspan for your second row. Like this :

<table>
    <tr>
        <td style="width:50%">TEXT</td>
        <td style="width:50%">TEXT</td>
    </tr>
    <tr>
        <td colspan="2" style="width:100%">TEXT</td>
    </tr>
    ...
</table>

For learn -> HTML Colspan

Answer 2

<td>s have a colspan attribute that determine how many columns it should span over. You example has 2 columns to span, so your cleaned up code would look like this:

<table>
    <tr>
        <td width="50%"></td>
        <td width="50%"></td>
    </tr>
    <tr>
        <td width="50%"></td>
        <td width="50%"></td>
    </tr>
    <tr>
        <!-- The important part is here -->
        <td colspan="2">This will have 100% width by default</td>
    </tr>
    <tr>
        <td width="50%"></td>
        <td width="50%"></td>
    </tr>
    <tr>
        <td width="50%"></td>
        <td width="50%"></td>
    </tr>
</table>

Answer 3

<table border="1">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td colspan="2">Cell 3 (Two columns)</td>
  </tr>
</table>

colspan will help you. Link to more info.