Question

我并不是想在桌面/ div辩论上加油，因为这个项目我已经决定将div用于所有不是表格的东西，到目前为止它运作良好。

我有一个地方需要显示名称值对，所以在左边我显示名称（标签），在右边我显示一个值。它不一定是表格数据，或者至少是我对表格数据的看法，因为我想象表格数据，其中标签在顶部水平显示，值在行中。

但是我试图在div中显示这个并且遇到了一些问题。我有2个div与浮动：左。对于每个标签，我在最左边的父div中有一个div。对于每个值，我在最右边的父div中有一个相应的div。这通常是正常的，但如果值div为空，则div缩小，标签div和值div停止垂直对齐。如果我使用跨度，甚至ul / li（list-style-type：none）元素，则相同。唯一似乎很容易工作的是桌子。我不想明确地在div上设置权重，因为我认为这是一个警察，如果我改变字体，所需的高度可能会改变。鉴于我正在尝试使用“非表格数据的div”方法，我是否会通过使用表来破坏自己的规则？

Answer 1

我是CSS布局狂热者，“名称值对”听起来就像表格数据一样。

Answer 2

这肯定听起来像表的语义有效用例。我能想到的唯一选择是定义列表。由于两者似乎都传达了键/值对的语义，因此您可以选择使您更容易获得所需图形设计的语义： - ）

表格（每行使用一个<th>和一个<td>）

<table>
    <tr>
        <th>Foo</th>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
    <tr>
        <th>Bar</th>
        <td>Etiam varius volutpat sem sed porta.</td>
    </tr>
</table>

定义列表

<dl>
    <dt>Foo</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
    <dt>Bar</dt>
    <dd>Etiam varius volutpat sem sed porta.</dd>
</dl>

Answer 3

恕我直言，我觉得用桌子会更容易。因为您不想显式设置div。

Answer 4

您拥有的是没有列标题的双列表格数据。使用表格。：）

Answer 5

上述表格的替代方案是定义列表，其中您的标签是dt（数据术语），字段是dd（数据定义）

但是，当我参加An Event Apart（前端大师和网络标准爱好者）时，我看到了CSS Master的Eric Meyer，他使用：gasp：table将表单放在一起。与其他人说的一样，它可以被视为表格数据。

我问他，现在怎么样，你有时会使用dl，有时会为此表吗？

他回答说，这是个人偏好。我的notes from his talk说

“预订旅行”部分应该真的是一张桌子 - 可以说，它是一张桌子您的数据尚未到达的数据格式由用户填写。这乞求问题，是所有表格表吗？为什么Eric使用表格而不是dls或随你？语义是非常的主观的东西。他做了什么最无痛，所以有时OL，有时DL，有时候是桌子。

这应该在桌子或div还是其他？

5 个答案: