如何在表格内创建一个html表格答案

【问题标题】：How to create a html table inside a table如何在表格内创建一个html表格
【发布时间】：2022-01-11 16:08:05
【问题描述】：

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

这是我正在尝试制作的结构。

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

<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 代码使右侧表格垂直居中，我试图将位置设置为顶部

【问题讨论】：

<h4 align="center">table</h4> 不是<table> 的有效子代，并且您没有关闭图像标签。最后请使用 CSS 来设置样式而不是弃用的内联属性
它不是表的孩子。只是一个描述。我猜你编辑了帖子并添加了图片链接。
您对此有何疑问？有什么不能使用给定的代码吗？
标题不是表格标签的有效 HTML 子标签
抱歉，问题已编辑。

标签： html html-table

【解决方案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>

【讨论】：

谢谢，但问题是右侧 td 结构垂直对齐显示中心 i.postimg.cc/DzVcL9R2/image.png
请添加您的代码的一些描述
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案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>

或者有一个表格并使用行跨度作为图像单元格

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

【讨论】：

【解决方案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>

【讨论】：