如何在 table 中创建 html table

Question

我正在尝试创建一个 table。左侧图像和右侧信息。我不确定是否可行

这是我要制作的结构。

这是我想出的一个粗略的table结构

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

上方 html 代码使右侧 table 垂直居中，我试图将其置于顶部

Answer 1

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

Answer 2

也许你是这个意思？

我添加了垂直对齐并更正了无效的 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 class="container">
        <table class="inner">
          <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>

或者有一个 table 并为图像单元格使用 rowspan

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

Answer 3

没关系我想通了

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

如何在 table 中创建 html table

How to create a html table inside a table

html

html-table