html表格布局帮助

我想用html表格显示下面的布局

 foo      : jack
 products : bag
            bat
            ball
            shoes
 blah     : olah

我试过了，但没有达到我的预期

<table border="1">
  <tr>
  <th>row 1</th>
  <td> Hello</td>
  </tr>
  <tr>
  <th>row 1</th>
  <td>
  <table>
  <tr>foo1</tr>
  <tr>foo2</tr>
  </table>
  </td>
  </tr>
  <tr>
  <th>row 1</th>
  <td> Hello</td>
  </tr>
  </table>

第1行
你好
第1行
foo1
食物2
第1行
你好

这可以通过使用rowspan来实现，您可以使用多种方法来处理它，但我只是快速创建它

傅：
杰克
产品：
1.
2.
3.
4.
废话：
奥拉

或者您可以使用rowspan来实现这一点。

傅：
杰克
产品：
1.
2.
3.
4.
5.
废话：
奥拉

我认为问题在于，在嵌入的表中

<table>
    <tr>foo1</tr>
    <tr>foo2</tr>
</table>

福：杰克
产品:手袋
蝙蝠
球
鞋
废话：奥拉

产生：

---

关键是冒号在它们自己的列中。

这必须是一个

表吗？似乎定义列表之类的东西可能更适合您的使用，因此我建议以下选项：

HTML:

以及。

福：杰克
产品:手袋
蝙蝠
球
鞋
废话：奥拉

还有一个例子需要完成
 啊，你的HTML中的元素和你想显示的不一样？！这只是我尝试的一个演示..我不知道为什么要使用嵌套表。关于布局的表，请看这里：如果第一列中的字符串长度发生变化，那么您自己使用pre和计算空格就不是很灵活了。另外，您可能不喜欢pre使用的字体。谢谢您的回复，但我可以看到您的固定高度为59…只是我很好奇，如果列表产品我事先不知道列表大小，那么它看起来会很奇怪…此外，如果我没有表边框…在这种情况下它看起来不好…看起来好的是产品标签应该和起始产品在一起。嗨，这只是一个例子，提问者只想展示数据，有更好的方法使用div，等等，。但问题是假装学习这些东西。我只是在DreamVie中创建它。如果我有一个产品列表，像上面这样的一个快速问题将不起作用。我的意思是我将迭代列表并为产品创建所有html元素…对于上面的html似乎不可能。一个真正的答案，嗯？与……相反=b但是谢谢你！我很高兴能帮上忙。即使我给你的分数与你想要的完全不同=D
<table width="300" border="1">
 <tr>
<td width="88">foo      : </td>
<td width="196">jack</td>
 </tr>
 <tr>
<td height="99" rowspan="5">products : </td>
<td>1</td>
 </tr>
 <tr>
  <td>2</td>
 </tr>
  <tr>
   <td>3</td>
  </tr>
 <tr>
   <td>4</td>
 </tr>
  <tr>
  <td>5</td>
</tr>
<tr>
  <td height="23">blah     :</td>
  <td>olah</td>
</tr>
 </table>

<table>
    <tr>foo1</tr>
    <tr>foo2</tr>
</table>

<table>
    <tr><td>foo1</td></tr>
    <tr><td>foo2</td></tr>
</table>

<th valign="top">row 1</th>

<table>
<tr>
<td>foo</td><td>:</td><td>jack</td>
</tr>  
<tr>
<td>products</td><td>:</td><td>bag</td>
</tr>
<tr>
<td><td/><td>bat</td>
</tr>
<tr>
<td><td/><td>ball</td>
</tr>
<tr>
<td><td/><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>

<dl>
    <dt>Foo:</dt>
    <dd>Jack</dd>
    <dt>Products:</dt>
    <dd>Bag</dd>
    <dd>Bat</dd>
    <dd>Ball</dd>
    <dd>Shoes</dd>
    <dt>Blah:</dt>
    <dd>Olah</dd>
</dl>

dl {
    width: 50%;
    margin: 0 auto;
}
dt, dd {
    font-size: 1em;
    line-height: 1.2em;
}
dt {
    width: 49%;
    display: inline-block;
    margin-top: 0.2em;
}
dd {
    width: 49%;
    display: block;
    margin-left: 51%;
}

dt + dd {
    display: inline-block;
    margin-left: 0;
    margin-top: 0.2em;
    position: relative;
}

dt + dd:before {
    content: " : ";
    position: absolute;
    left: -1em;
}

<table>
    <tr>
        <td style="width: 70%;">foo</td><td style="width: 10%;">:</td><td style="width: 20%;">jack</td>
    </tr>
    <tr>
        <td>products </td><td>:</td><td>bag</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td><td>bat</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td><td>ball</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td><td>shoes</td>
    </tr>
    <tr>
        <td>blah</td><td>:</td><td>olah</td>
    </tr>
</table>