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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

which produces the following table:

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

CodePudding user response：

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

use attribute colspan in ur tr element