Solution 1 :

Did you want something like this, an empty cell before ‘E’ cell I have added an empty <td></td> before it and to maintain table structure as demanded added empty <th></th> as well.

 table,th,td {
         border: 1px solid black;
         border-collapse: collapse;
     }
     
     th {width: 50px; padding-top: 6px;}
     td {text-align: center;} 
    <body>

    <table>  
    <thead>
    <tr>
    <th colspan="5" style="width: 300px; height: 60px; background-color: gold;">  ABC</th>

    </tr>
    </thead>
              
    <tbody>
               
    <tr>
<th></th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>

    </tr>
              
    <tr>
<td></td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    </tr>

    </table>   

     </body>

Problem :

I want one more empty squere to appear from the left side of the ‘E’ square without moving the table’s stracture…

thanks to all the helpers!

 table,th,td {
         border: 1px solid black;
         border-collapse: collapse;
     }
     
     th {width: 50px; padding-top: 6px;}
     td {text-align: center;} 
    <body>

    <table>  
    <thead>
    <tr>
    <th colspan="4" style="width: 300px; height: 60px; background-color: gold;">  ABC</th>

    </tr>
    </thead>
              
    <tbody>
               
    <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>

    </tr>
              
    <tr>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    </tr>

    </table>   

     </body>

Comments

Comment posted by David Umansky

I need only the lower square without the upper

By