Question

我想使用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>

Answer 1

这必须是table吗？似乎定义列表可能更适合您的使用，所以我建议以下选项：

HTML：

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

CSS：

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

JS Fiddle demo。

Answer 2

这可以通过使用rowspan

来实现

Answer 3

您可以使用多种方式处理它，但我只是快速创建它。

http://jsfiddle.net/dXU8D/

 <table width="300" border="1">
 <tr>
   <td width="88">foo      : </td>
    <td width="196">jack</td>
 </tr>
  <tr>
  <td height="99">products : </td>
<td><table width="200" border="1">
  <tr>
    <td>1</td>
   </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
        <td>3</td>
  </tr>
  <tr>
       <td height="59">4</td>
  </tr>
</table></td>
</tr>
<tr>
  <td height="23">blah     : </td>
    <td>olah</td>
  </tr>
</table>

或者您可以使用rowspan来实现此目的。 http://jsfiddle.net/Mzyzx/

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

Answer 4

我认为问题在于，在您的嵌入式表格中......

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

...你忘了将它们包裹在<td>元素中：

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

但是，当然，你遇到的问题是相应的<th>在表格单元格的中间而不是顶部对齐。但这可以通过valign属性修复：

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

Answer 5

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

产地：

enter image description here

关键是冒号位于他们自己的一列中。

Answer 6

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

还有一个完整的例子。 http://jsfiddle.net/2ufsD/

帮助html表格布局

6 个答案: