How to make a table two row in one column-CodePudding

I want to have a table like you see in the picture.

But I am really unsuccessful in this. here is my code:

table,
td,
th {
  border: 1px solid black;
}

table {
  width: 100%;
  border-collapse: collapse;
}

<table>
  <tr>
    <td>SOL</td>
    <td>K</td>
    <td>Y</td>
    <td>M</td>
  </tr>
  <tr>
    <td>
      <td>b</td>
      <td>a1</td>
    </td>
    <td>b</td>
    <td>b</td>
  </tr>
</table>

Could you please help me on this?

CodePudding user response：

Here's the solution

table {
  width: 100%;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid lightgray;
  font-family: sans-serif;
  padding: 7px 15px;
}

<table>
  <tbody>
    <tr>
      <th colspan="2">SOL</th>
      <th>K</th>
      <th>Y</th>
      <th>M</th>
    </tr>
    <tr>
      <td></td>
      <td>a1</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td rowspan="2">1</td>
      <td>a2</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>b1</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>b2</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>