能否用HTML table实现截图所示的一行内两行单元格的布局？

完全可以用HTML Table实现这种布局，不需要依赖<div>，核心是利用表格的rowspan（跨行）属性实现单元格纵向合并，配合常规单元格就能达成你要的效果。

举个对应截图布局的示例代码：

<!-- 假设截图是左侧单元格跨两行，右侧分成上下两个单元格 -->
<table border="1" cellpadding="8" cellspacing="0">
  <tr>
    <!-- 左侧单元格占据2行高度 -->
    <td rowspan="2">跨两行的内容区域</td>
    <td>右侧上方单元格</td>
  </tr>
  <tr>
    <td>右侧下方单元格</td>
  </tr>
</table>

如果你的布局是右侧单元格跨两行、左侧分上下两格，只需要把rowspan="2"移到右侧单元格即可：

<table border="1" cellpadding="8" cellspacing="0">
  <tr>
    <td>左侧上方单元格</td>
    <!-- 右侧单元格占据2行高度 -->
    <td rowspan="2">跨两行的内容区域</td>
  </tr>
  <tr>
    <td>左侧下方单元格</td>
  </tr>
</table>

关键说明 #

• rowspan="n"：指定单元格纵向跨越n行，被跨越的行不需要再重复定义该位置的单元格
• 若需要横向合并单元格，可搭配colspan="n"使用，实现更复杂的表格布局

内容的提问来源于stack exchange，提问作者puntable