CODEWITHSUNDEEP
htmlcsshtml-table
Sema
Sema

Reputation: 81

Divide bottom row to match top row in table - HTML

I'm wanting to do some formatting with tables and I can't seem to figure out how to equally divide the bottom row to have the same width as the top row.

I want the top row to be like 240px, and have the bottom row divided into two parts with 120px each.

Below is a image for reference:
enter image description here

<table>
<tbody>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

All help would be appreciated!

UPDATE:
enter image description here enter image description here

That is the issue that I'm having with the colspan:

<table>
    <tbody>
        <tr>
            <td colspan="2">Content</td>
        </tr>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Views: 216

Answers (3)

an_owl
an_owl

Reputation: 69

Use colspan attribute in the first tag and set the width of table in CSS. Here is a JSFiddle for reference. https://jsfiddle.net/6dvnafrm/

<table>
  <tbody>

    <tr>
      <td colspan="2">test</td>
    </tr>

    <tr>
      <td>test</td>
      <td>test</td>
    </tr>

  </tbody>
</table>

Upvotes: 1

Amaresh S M
Amaresh S M

Reputation: 3010

Check out this: 

 th, td {
  border: 1px solid black;
 }   
 td{
 width:240px;
 }
 
<body>
<table>      
<tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
  </tr>
</table> 
</body>

Upvotes: 1

Sema
Sema

Reputation: 81

Setting colspan="2" to the top td fixed it.

<tr colspan="2" class="footbar">
    <td colspan="2"><td>
</tr>

Upvotes: 0

Related Questions