desired table

It turns out to do so, but two extra cells in thead. How to do right?

table, td, th { border: 1px solid black; border-collapse: collapse; } td { width: 50px; height: 50px; } 
  <table> <thead> <tr> <th colspan="2">Test table</th> <td></td> <td></td> </tr> </thead> <tbody> <tr> <td rowspan="2"></td> <td colspan="3"></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> </table>

    1 answer 1

    Get a class for your cells:

     table, td, th { border-collapse: collapse; } td { width: 50px; height: 50px; } .td { border: 1px solid black; } 
     <table> <thead> <tr> <th class="td" colspan="4">Test table</th> </tr> </thead> <tbody> <tr> <td class="td" rowspan="2"></td> <td class="td" colspan="3"></td> </tr> <tr> <td class="td" colspan="2"></td> <td></td> <td></td> </tr> <tr> <td class="td"></td> <td class="td"></td> <td></td> <td></td> </tr> </tbody> </table>