在有效的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)？

Answer 1

我认为你已经把"桌子坏了"的概念推向极致.

• 纯粹用于布局的表格(当其他元素更具语义性时)是不好的.
• 表格数据表很好.他们的目的是为了这个目的!

您所拥有的内容非常符合行和列的概念,包含header(<th>)和data(<td>) - 基于语义,而不仅仅是布局.

如果你想更明确地说它是一个地址,那么使用adr Microformat或添加一个<caption>.

错误的方法:

• <dl>:"1010"不是"邮政编码"的定义.另一种方式使它更有意义,但是这种关系与<th>→ 一样清晰<td>,它不依赖于CSS,并且看起来完美无需用户的字体大小.
  如果你使用即使在lynx<th>将完美呈现!没有CSS技巧的地址看起来很奇怪.<dl>
• HTML的<address>元素可能不适用于此,因为它仅适用于页面作者/维护者的联系信息.它还允许内联内容,因此您将丢失地址的结构.

Answer 2

我发现定义列表比这里的表更有意义.dt以特定宽度向左浮动,并在左侧清除.如果标签或数据要包装,你将不得不做一些post-element-float-clearing trickery来使这个工作,但听起来并不像你需要那样.(无论如何,我认为这是值得的;再加上,做一次,你再也不用了.)

:after如果您不介意刷掉IE6,您甚至可以使用自动添加冒号.