在有效的XHTML中实现制表位的最佳方法是什么？

Question

为了解释，可以想象一个简单的地址。在HTML段落中，如果有换行，则会像这样：

Street: Example Street 1
City: Vienna
Zip Code: 1010
Country: Austria

大多数情况下这是完全可以的，但有时我需要实现以下输出：

Street:   Example Street 1
City:     Vienna
Zip Code: 1010
Country:  Austria

我的想法如下：

1. 应该是有效的XHTML，并且在所有主要浏览器中工作或优雅地降级
2. 强烈建议以语义正确的方式使用标签
3. 由于第二点：我希望有比表格更好的解决方案
4. 问题不仅限于地址——在其他情况下也很有用

如何使用HTML和/或CSS实现此输出？

- Christoph Schiessl

---

表格是展示数据的好方法。问题在于，它们被滥用于几乎任何事情，现在它们名声不佳。 - Toon Krijthe

@Christoph Schiessl，关键在于“tab”这个词。它是“tabulated”的缩写，也就是说，任何涉及制表符的数据都是被制表的数据，因此向用户呈现它的最佳方式是作为表格。否则就是不值得的自我毁灭。 - David Arno

实际上，Christoph有一点道理，多个地址会是数据，但一个地址呢？我想无论它是独立的还是作为集合的一部分，都应该算是数据。如果你真的想要，你可以使用<pre>和制表符 ;) - Ross

@Ross：这正是我的观点。我认为只有由多行（或记录）组成的数据才应该用HTML表格表示。我认为这就是表格应该使用的方式。问题在于：如何在HTML中表示单个“记录”的数据？ - Christoph Schiessl

我决定使用定义列表 - 这可能是目前最清晰的解决方案。 好的解释：http://www.maxdesign.com.au/presentation/definition - Christoph Schiessl

Answer 1

我认为你已经过分强调“表格不好”的概念了。

• 纯粹用于布局的表格（当其他元素更有语义化时）是不好的。
• 用于表格数据的表格是好的。它们就是为此而设计的！

你所使用的内容非常适合行和列的概念，包括标题（<th>）和数据（<td>）——基于语义而非布局。

如果你想更明确地表明这是一个地址，那么可以使用 adr 微格式 或者添加一个 <caption>。

错误的方法：

• <dl>： “1010” 不是 “Zip Code” 的定义。反过来有点更有意义，但是 <th> → <td> 的关系同样清晰，不依赖于 CSS，并且无论用户的字体大小如何，都会完美呈现。
  如果你使用 <th>，甚至在 lynx 中也会完美呈现！没有 CSS 诡计的 <dl> 中的地址看起来很奇怪。
• HTML 的 <address> 元素可能不适用于此，因为它仅用于页面作者/维护者的联系信息。它还允许内联内容，因此你将失去地址的结构。

- porneL

---

当您不将表用于表格布局时，它们是有问题的。;-) - Chris Noe

@Chris，我完全同意。这让我很疯狂，现在反表格热潮如此之高，人们为了避免使用表格来呈现表格数据而采取荒谬的手段。 - David Arno

我曾经写过一个无表格的电子表格来回应一个声称永远不应该使用表格的帖子。再也不会了... - Ross

表格可能会很糟糕，仅因为标记太冗长了。我讨厌“表格不好”的极端主义者，但有时候他们是正确的，即使对于表格数据，如果可以使用替代标记更简单地创建该表格数据。 - Dan Herbert

@porneL：你添加的链接（就在这条评论上面）支持了使用dl作为这项工作的正确工具的观点。只是这么说而已。从TFA中可以看出：“定义列表可用于将任何具有直接关系的项目（名称/值集）联系在一起”。 - nickf

Answer 2

我发现定义列表比表格更有意义。将dt浮动到左侧，并具有特定的宽度，并在左侧进行清除。如果标签或数据中的任何一个需要换行，您将需要进行一些后元素浮动清除技巧才能使其正常工作，但听起来好像您不需要这样做。（我认为这是值得的；而且，只需执行一次，您就永远不必再次执行。）您甚至可以使用:after自动添加冒号，如果您不介意放弃IE6的话。

- Eevee

---

我还没有考虑过那个问题 ;) 我非常喜欢这个想法！ - Christoph Schiessl

我改变了我的看法。最初，我将其下投票，因为它似乎滥用了 dt/dd。然而经过深思熟虑，问题中的数据是符合 dt/dd 模型完美的典型案例，所以我现在投了赞成票 :) - David Arno

如果你喜欢它，克里斯托夫，那么你应该将其标记为“正确”答案。 - David Arno

@David Arno：我知道。只是再等一会儿——也许有人有更好的解决方案；）此外，评论中的交流非常有趣... - Christoph Schiessl

DL存在问题：DT“列”不会自动调整为最长的项目，因此您必须使用已知字段名称（例如，如果用户能够添加具有长名称的字段，则可能会导致行中断）。 另一方面，具有TH标题和TD内容的表格是可以的，语义上更合适，并且会自动调整大小。 - Tomáš Kafka

Answer 3

不要听那些说这是表格数据的人。仅仅因为某些内容以行的形式呈现，并不意味着它是一个表格！

使用 dl、dt 和 dd 标签是一个很好的选择。虽然这有点超出它们最初的用途，但仍然比表格、跨度或 div 具有更多的含义。

<dl>
    <dt>Street</dt>
    <dd>Example Street 1</dd>
    <dt>City</dt>
    <dd>Vienna</dd>
    <dt>Zip Code</dt>
    <dd>1010</dd>
    <dt>Country</dt>
    <dd>Austria</dd>
</dl>

以下是CSS代码：

dt {
    width: 150px;
    float: left;
    clear: left
}
dd {
    float: left;
}

这是相当基础的CSS - 它可能无法适应许多情况（例如：两个连续的dd，一个非常长的dt），但它是一个开始。查看dt的inline-block属性，也许可以设置dd的左边距为150px，而不是使用float。

- nickf

---

如果你在字典中查找“邮政编码”，你不会发现“1010”作为定义（除非它是大本的二进制字典）。你把术语/定义搞反了。 - Kornel

这个没问题，但我不同意在这里使用dl/dt/dd比其他选项更语义化的观点。这些不是定义：它们是标签/值对。由于在 HTML 中没有对应实体，因此此处建议的替代方法（使用div、表格、定义）同样可行。 - Herb Caudill

这种方法的问题在于必须为标签定义宽度。我更愿意设置一个边距，以确保标签与两列文本之间有最小空间，但我认为只有使用表格才能实现这一点。 - Jan Aagaard

“它仍然比表格更有意义”——我不同意这比表格更有意义。如果你有列标题，一个正确标记的表格会比 <dl>版本稍微更有意义。当然，定义列表也很好。 - Paul D. Waite

Answer 4

表格是最好的选择。

- wolfie

Answer 5

正如其他人所提到的，浮动元素是解决这个问题的方法。

以下是我的解决方案：

<p class="details">
    <span class="label">Street:</span>
    Some Street or other.
    <br />

    <span class="label">City:</span>
    A City.
    <br />
</p>

使用以下CSS样式：

p.details {
    padding-left: 200px;
}

p.details span.label {
    float: left;
    clear: left;
    width: 200px;
    margin-left: -200px;
}

由于主要文本不是浮动的，这避免了任何需要换行的长文本导致浮动元素过宽并浮动到标签下方的问题。这意味着即使该文本是多行的，比如您想要一个多行地址，也不需要特殊处理。

同样，如果标签数据需要跨多行换行，此方法也适用，因为下一个标签会清除前一个浮动。

在其中插入换行符意味着即使不使用CSS，它也可以很好地降级并看起来像您期望的那样。

这种方法非常适用于表单布局，其中使用元素而不是，并且可以在CSS中选择作为

子元素的任何段落。

- SpoonMeiser

Answer 6

不需要表格（虽然在这种情况下使用表格也不是完全不合适）。我经常做这种事情。

<div class=DetailsRow>
  <div class=DetailsLabel>Street</div>
  <div class=DetailsContent>123 Main Street</div>
</div>
<div class=DetailsRow>
  <div class=DetailsLabel>City</div>
  <div class=DetailsContent>Vienna</div>
</div>
  ...etc

并且

div.DetailsRow
{
clear:both;
}

div.DetailsLabel
{
float:left;
width:100px;
color:gray;
}

div.DetailsContent
{
float:left;
width:400px;
}

- Herb Caudill

---

你经常写大量的代码来让div表现得像是一个糟糕的表格实现。为什么？你甚至使用了基于固定像素的宽度，所以你的解决方案在可访问性方面很差劲... - David Arno

固定宽度的div并不等同于较差的可访问性。 - nickf

由于div是块级元素，我认为它的降级效果不是特别好。 - SpoonMeiser

固定宽度在可访问性方面并不是“垃圾”。如果文本超出水平宽度，它会自动换行。没有任何损害。 - Herb Caudill

这里给出的情况不是一个表格，也不是定义列表。由于没有HTML元素与此情况完全匹配，我认为div与其他选择相比既不更好也不更差。 - Herb Caudill

Answer 7

或者你可以放弃所有理智（和语义），并使用 CSS 重新创建表格（在 Firefox 和 Chrome 中测试通过）：

<html>
<head>
<title>abusing divs</title>
<style type="text/css">
div.details {
    display: table;
}
div.details > div {
    display: table-row;
}
div.details > div > div {
    display: table-cell;
    padding-left: 0.25em;
    padding-right: 0.25em;
}
</style>
</head>
<body>
<div class="details">
    <div>
        <div>Street</div>
        <div>123 Main Street</div>
    </div>
    <div>
        <div>City</div>
        <div>Vienna</div>
    </div>
    <div>
        <div>This is a very very loooong label</div>
        <div>...</div>
    </div>
</div>
</body>
</html>

开个玩笑。

- panzi