Search code examples
htmlcsshtml-table

How to make a table two row in one column


I want to have a table like you see in the picture. enter image description here

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?


Solution

  • 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>