代码之家 › 专栏 › 技术社区 › Jeremy

它应该在一个表中,还是在一个DIV或其他的表中?

html-table html

Jeremy · 技术社区 · 15 年前

我不想把精力放在表格/分区辩论上,对于这个项目,我已经决定要对所有非表格的内容使用分区,到目前为止,它运行得很好。

我有一个点需要显示名称-值对,所以在左侧显示名称(标签),在右侧显示值。它不一定是表格式数据,或者至少是我对表格式数据的看法,因为我想象表格式数据,其中标签水平显示在顶部,值以行的形式显示在下面。

但我试着在沙发上展示这一点,并有一些问题。我有两个带浮筒的潜水器:左边。对于每个标签,在最左边的父分区内有一个DIV。对于每个值,我在最右边的父分区内有一个对应的DIV。这通常可以,但如果值DIV为空,则DIV将收缩,标签DIV和值DIV将停止垂直对齐。如果我使用跨度,甚至是ul/li(list-style-type:none)元素,也是一样的。唯一看起来很容易工作的就是一张桌子。我不想在沙发上明确设置高点,因为我认为这是一种逃避,如果我改变字体,所需的高点可能会改变。考虑到我正尝试使用“divs for non-table data”方法,我会使用一个表来打破自己的规则吗?

5 回复 | 直到 7 年前

Jørn Schou-Rode dscher 15 年前

这听起来像是一个语义上有效的表用例。我能想到的唯一选择是定义列表。由于这两种方法似乎都传达了键/值对的语义,所以您也可以选择一种更容易获得所需图形设计的方法:—)

表 (使用一个) <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>

Tom 15 年前

我是一个CSS布局狂热者,“名称-值对”对我来说就像表格数据。

Tony The Lion 15 年前

嗯,我想你坐在桌子上会更容易些。因为您不想显式设置DIV。

Michael Bray 15 年前

您拥有的是没有列标题的两列表格式数据。使用表格。:)

neatlysliced 15 年前

前面提到的表的替代项是定义列表,其中标签是 dt (数据项),字段是 dd (数据定义)

然而,当我单独参加一个活动(前端专家和网络标准爱好者)时,我看到了CSS大师EricMeyer使用:gasp:table将表单组合在一起。正如其他人所说,它可以被视为表格数据。

我问他,你现在怎么用dl,有时用table?

他回答说,这是非常个人的喜好。我的 notes from his talk 说

“预订旅行”部分应该真的是一张桌子-可以说,它是一张数据表单,其中您的数据尚未由用户填写。这个乞丐问题是,所有表格都是表格吗? 为什么Eric使用DLS上的表或无论什么?语义是一个非常主观的东西。他做任何事大多数都是无痛的,所以有时候有时是DL,有时是一张桌子。