table grid uniform problem

Most of the time, we want <table>the displayed grid to be uniform, but in reality, there are many situations. The
example uses width as an example, but the height is the same, just set the height in tr.
This is an ordinary table

<table border="1" cellspacing="0" style="width: 400px;height: 400px">
       <tr>
          <td colspan="2"></td>
          <td></td>
          <td></td>
          <td></td>

       </tr> 
       <tr>
          <td rowspan="2"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr> 
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>

       </tr> 

    </table>

Effect:

But when we write

<table border="1" cellspacing="0" style="width: 400px;height: 400px">
       <tr>
          <td colspan="2"></td>
          <td>blalbal</td>
          <td></td>
          <td></td>

       </tr> 
       <tr>
          <td rowspan="2"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr> 
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>

       </tr> 

    </table>

Effect:
it relentlessly became like this

If you want to be uniform, you can add the width of width to each td, usually in percentages

  <table border="1" cellspacing="0" style="width: 400px;height: 400px">
       <tr>
          <td colspan="2" width="40%"></td>
          <td  width="20%"></td>
          <td  width="20%">blabla</td>
          <td  width="20%"></td>

       </tr> 
       <tr>
          <td rowspan="2"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr> 
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>

       </tr> 

    </table>

Effect:

However, just setting the width may still fail, when the width of the child element overflows the width of the grid. The set width is still invalid

 <table border="1" cellspacing="0" style="width: 400px;height: 400px;">
       <tr>
          <td colspan="2" width="40%"></td>
          <td  width="20%"></td>
          <td  width="20%">blablalbalbalbalbalblablalb</td>
          <td  width="20%"></td>

       </tr> 
       <tr>
          <td rowspan="2"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr> 
       <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>

       </tr> 

    </table>

Effect:

In this case:
①It is best that the sub-elements cannot overflow the grid, and setting overflow is useless.
②If only the grid is not deformed, set css, table-layout: fixed;
③If you really keep the text content, you can add word -wrap:break-word;

<table border="1" cellspacing="0" style="width: 400px;height: 400px;table-layout: fixed;word-wrap:break-word;">
       <tr height="33%">
          <td colspan="2" width="40%"></td>
          <td  width="20%"></td>
          <td  width="20%">blablalbalbalbalbalblablalb</td>
          <td  width="20%"></td>

       </tr> 
       <tr height="33%">
          <td rowspan="2"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
       </tr> 
       <tr height="33%">
          <td></td>
          <td></td>
          <td></td>
          <td></td>

       </tr> 

    </table>

Effect: