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

HtmlCss

Html Problem Overview

click to see the image

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?

Html Solutions

Solution 1 - Html

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

Solution 2 - Html

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

Solution 3 - Html

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

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Collapse all group except selected group in expandable listview android

AndroidExpandablelistviewExpandCollapse

Next Solution:

How to deploy a meteor application to my own server?

DeploymentHostingMeteor

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBen Ben-HamoView Question on Stackoverflow
Solution 1 - HtmlAldi UnantoView Answer on Stackoverflow
Solution 2 - HtmlsmilebombView Answer on Stackoverflow
Solution 3 - HtmlFBaez51View Answer on Stackoverflow