How to create a html table inside a table-CodePudding

I am trying to create a table. left side image and right side information. i am not sure if it's possible

here is the structure i am trying to make.

here is a rough table structure I came up with

<table border="2" bordercolor="green">
  <tr>
    <td><img src="https://i.postimg.cc/sD9MZPKb/image.png"></td>
      <td><table border="2" bordercolor="green">
      <tr><td>test</td><td>second cell</td></tr>
      <tr><td>test</td><td>second cell</td></tr>
      <tr><td>test</td><td>second cell</td></tr>
     <tr><td>test</td><td>second cell</td></tr>
     <tr><td>test</td><td>second cell</td></tr>
     <tr><td>test</td><td>second cell</td></tr>
  
  </td>
  </tr>
</table>

above html code making the right side table vertically center, which i am trying to make the position top

CodePudding user response：

<table border="2" bordercolor="green">
  <tr>
    <td>main Table row 1 column 1</td>
    <td>main Table column 2
      <table border="2" bordercolor="blue">
        <tr>
          <td>inner Table row 1 column 1</td>
          <td>inner Table row 1 column 2</td>
        </tr>
        <tr>
          <td>inner Table row 2 column 1 </td>
          <td>inner Table row 2 column 2</td>
        </tr>
        <tr>
          <td>inner Table row 3 column 1 </td>
          <td>inner Table row 3 column 2</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td> main Table row 2 column 1 </td>
    <td> main Table row 2 column 2 </td>
  </tr>
</table>

CodePudding user response：

Perhaps you mean this?

I added vertical align and corrected the invalid HTML

.container { vertical-align:top; }
table {
  border: 1px solid black;
}

table.inner {
  border: 1px solid red;
}

td {
  border: 1px solid green;
}

img { width: 200px }

<table>
  <tbody>
    <tr>
      <td><img src="https://m.media-amazon.com/images/M/MV5BOTgzMjMxOTYtYzQzZi00NWM1LTljZDMtN2UwZWE3MjlhZDdlXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg"> </td>
      <td >
        <table >
          <thead>
            <tr>
              <th colspan="2">
                <h4 align="center">table</h4>
              </th>
          </thead>
          <tr>
            <td>table one</td>
            <td>table two</td>
          </tr>
          <tr>
            <td>nested one</td>
            <td>table two</td>
          </tr>
        </table>
      </td>
      </tr>
  </tbody>
</table>

Alternatively have one table and use rowspan for the image cell

.container {
  vertical-align: top;
}

table {
  border: 1px solid black;
}

td {
  border: 1px solid green;
}

img {
  width: 200px
}

<table>
  <tbody>
    <tr>
      <td rowspan="4"><img src="https://m.media-amazon.com/images/M/MV5BOTgzMjMxOTYtYzQzZi00NWM1LTljZDMtN2UwZWE3MjlhZDdlXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg"> </td>
    </tr>
    <tr>
      <th colspan="2">
        <h4 align="center">table</h4>
      </th>
      <tr>
        <td>table one</td>
        <td>table two</td>
      </tr>
      <tr>
        <td>nested one</td>
        <td>table two</td>
      </tr>
  </tbody>
</table>

CodePudding user response：

never mind i figure it out

<table border="2" bordercolor="green">
  <tr>
    <td><img src="https://i.postimg.cc/sD9MZPKb/image.png"></td>
      <td vertical-align:top"><table border="2" bordercolor="green">
      <tr><td>test</td><td>second cell</td></tr>
      <tr><td>test</td><td>second cell</td></tr>
      <tr><td>test</td><td>second cell</td></tr>
     <tr><td>test</td><td>second cell</td></tr>
     <tr><td>test</td><td>second cell</td></tr>
     <tr><td>test</td><td>second cell</td></tr>
  
  </td>
  </tr>
</table>