HTML tables: merging row cells

user_14931880 0
Viewed 53

I have the following code:

<div style="text-align: center; color: #345; padding-top: 10px;">
  <table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
    <tbody>
      <tr style="height: 126px;">
        <td style="width: 50%; height: 126px;"><strong>abc</strong></td>
        <td style="width: 50%; height: 126px;"><strong>abc</strong></td>
      </tr>
      <tr style="height: 18px;">
        <td style="width: 50%; height: 18px;">x</td>
        <td style="width: 50%; height: 18px;">y</td>
      </tr>
      <tr style="height: 108px;">
        <td style="width: 50%; height: 108px;"><strong>abc</strong></td>
        <td style="width: 50%; height: 108px;"><strong>abc</strong></td>
      </tr>
      <tr style="height: 18px;">
        <td style="width: 50%; height: 18px;">x</td>
        <td style="width: 50%; height: 18px;">y</td>
      </tr>
    </tbody>
  </table>
  <p>&nbsp;</p>
</div>

which produces the following table:

enter image description here

How can I merge my "x" and "y" cells so that the row they're in consists of only one cell "xy"?

html
1 Answers
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
    <tbody>
    <tr style="height: 126px;">
        <td style="width: 50%; height: 126px;"><strong>abc</strong></td>
        <td style="width: 50%; height: 126px;"><strong>abc</strong></td>
    </tr>
    <tr style="height: 18px;">
        <td style="height: 18px;" colspan="2">xy</td>
    </tr>
    <tr style="height: 108px;">
        <td style="width: 50%; height: 108px;"><strong>abc</strong></td>
        <td style="width: 50%; height: 108px;"><strong>abc</strong></td>
    </tr>
    <tr style="height: 18px;">
        <td style="height: 18px;" colspan="2">xy</td>
    </tr>
    </tbody>
</table>

Colspan is what you seek. Also dunno if someone told you but inline css is bad practice you should use class instead

Here you have the code with class instead of inline css : (same result but prettier)

.bigRow {
        height: 126px;
    }
    
    .bigRow-2 {
        height: 108px;
    }

    .bigRow td, .bigRow-2 td {
        height: 100%;
        width: 50%;
    }

    .smallRow {
        height: 18px;
    }
<div style="text-align: center; color: #345; padding-top: 10px;">
    <table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
        <tbody>
        <tr class="bigRow">
            <td><strong>abc</strong></td>
            <td><strong>abc</strong></td>
        </tr>
        <tr class="smallRow">
            <td colspan="2">xy</td>
        </tr>
        <tr class="bigRow-2">
            <td><strong>abc</strong></td>
            <td><strong>abc</strong></td>
        </tr>
        <tr class="smallRow">
            <td colspan="2">xy</td>
        </tr>
        </tbody>
    </table>
    <p>&nbsp;</p>
</div>

user_161952130
Related