How to make one 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 fol

Answer 1

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

Answer 2

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 3

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