Question

我还应该使用桌子吗？

我要替换的表格代码是：

<table>
    <tr>
        <td>Name</td><td>Value</td>
    </tr>
    ...
</table>

从我读过的内容中我应该有类似

的内容

<label class="name">Name</label><label class="value">Value</value><br />
...

在线样本的想法和链接非常感谢。我是一个超出设计深度的开发者。

编辑：我的需要是能够向用户显示数据并以单独（但几乎相同）的形式编辑值。

Answer 1

我认为定义列表在语义上与名称/值对非常接近。

<dl>
    <dt>Name</dt>
    <dd>Value</dd>
</dl>

Definition lists - misused or misunderstood?

Answer 2

横向定义列表工作得很好，即

    <dl class="dl-horizontal">
      <dt>ID</dt>
      <dd>25</dd>

      <dt>Username</dt>
      <dd>Bob</dd>
    </dl>

dl-horizontal类由Bootstrap CSS框架提供。

Answer 3

我认为表格最适合用于表格数据，而您似乎就在那里。

如果您不想使用表格，最好的方法是使用定义列表（<dl> and <dt>）。以下是如何将它们设置为旧的<td>布局。 http://maxdesign.com.au/articles/definition/

Answer 4

将表格用于表格数据是完全合理的。

Answer 5

如果我正在写一个表格，我通常会用这个：

<form ... class="editing">
    <div class="field">
        <label>Label</label>
        <span class="edit"><input type="text" value="Value" ... /></span>
        <span class="view">Value</span>
    </div>
    ...
</form>

然后在我的CSS中：

.editing .view, .viewing .edit { display: none }
.editing .edit, .editing .view { display: inline }

然后使用一点JavaScript我可以将表单的类从编辑交换到查看。

我之所以提到这种方法，是因为您希望以几乎相同的布局显示和编辑数据，这是一种方法。

Answer 6

与macbirdie一样，我倾向于将这样的数据标记为定义列表，除非现有表的内容可以被判断为实际是表格内容。

我建议您避免使用标签。看一下标签标签@ http://www.w3schools.com/tags/tag_label.asp的解释 - 它真的是让你专注于它的相关控制。同时避免使用泛型div和跨度，从语义的角度来看它们很弱。

如果您在一个屏幕上显示多个名称 - 值对，但在编辑屏幕上只编辑一个，我会在前一个屏幕上使用一个表格，在后一个屏幕上使用一个定义列表。

Answer 7

使用float：属性，例如：的CSS：

.left {
  float:left;
  padding-right:20px
}

HTML：

<div class="left">
 Name<br/>
 AnotherName
</div>
<div>
 Value<br />
 AnotherValue
</div>

使用CSS如何最好地显示名称值对？

7 个答案: