How can I split the column table in 3 ways?-CodePudding

So I need to split my column table like this

in the middle we got a split by rows it I can do by colspan: 1; but how can I split it by column at the same time

CodePudding user response：

This is how you do it

table td,
table th{
  border: 1px solid #ccc;
  padding:10px
}

<table>
  <thead>
    <tr>
      <th rowspan="2">Head</th>
      <th colspan="2">Split Head </th>
      <th rowspan="2">Head</th>
    </tr>
    <tr>
      <th>asd</th>
      <th>asd</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>