How to create this HTML table with row tds spanning multiple columns

Question

How can I create a table with the following layout?

I'm having problem with the second and third td in the first row. I've been playing with colspan but couldn't get it to work.

Answer 1

Think of a table with 7 cells per row to get that cell distribution (1 + ( 2 * 3 ) cells) and use colspan attributes as follows :

table {
width: 100%;
}
td {
  border: 1px solid #777;
  padding: 10px;
}
td:first-child {
  width: 30%;
}

<table>
  <tr>
    <td>a</td>
    <td colspan="3">b</td>
    <td colspan="3">c</td>
  </tr>
  <tr>
    <td>a</td>
    <td colspan="2">b</td>
    <td colspan="2">c</td>
    <td colspan="2">d</td>

  </tr>
</table>