Design table with HTML and CSS-CodePudding

I want to design a table with HTML and CSS as the image. But I have no idea how to do the task.

I have given my testing code:

td {
  background-color: white;
}

.tb {
  background-color: blue;
}

.tg {
  background-color: green;
}

<table >
  <tr>
    <td>I am outer table</td>
    <td>
      <table >
        <tr>
          <td>I am the first row of first table</td>
        </tr>
        <tr>
          <td>I am the second row of first table</td>
        </tr>
        <tr>
          <td>I am the third row of first table</td>
        </tr>
        <tr>
          <td>I am the fourth row of first table</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Can anyone please help me with this problem? How can I complete the design as per the image? What should I do?

Thank you. I appreciate your time.

CodePudding user response：

 .bigBorderBlue {
    border:5px blue solid;
  }

  .borderBlue {
    border: 2px blue solid
  }
  .toBorderGreen > tr > td, .borderGreen {
    border: 2px green solid
  }
  .bigBorderGreen {
    border: 5px green solid
  }

  .bgRed {
    background-color: red;
  }

  .bgWhite {
    background-color: white;
  }

  .bgGreen {
    background-color: green;
  }

  .borderWhite {
    border: 2px white solid 
  }

<table >
  <tr >
    <td >
      I am outer table
    </td>
    <td >
      <table >
        <tbody >
          <tr>
            <td>I am the first row of first table</td>
          </tr>
          <tr>
            <td>I am the second row of first table</td>
          </tr>
          <tr>
            <td>I am the third row of first table</td>
          </tr>
          <tr>
            <td>I am the fourth row of first table</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>