老字号校桌

Question

我是一个老学校的网页设计师，仍然倾向于选择桌子而不是div。我发现这样做更容易，尤其是在我们现有的大量浏览器平台下。

我可以很好地完成div，但是在跨浏览器中工作时更容易找到表。

如果我做专业网站，我会被认为做错了，不专业或皱眉？它是非标准的还是老式的？

Answer 1

您正在使用语义表来实现类似于布局的网格。这是错误的(并皱眉)的原因主要是因为布局信息在错误的地方。Html应该用于语义(内容没有外观)，样式应该用css (没有内容的外观)来完成。因此，只有在信息是表格的情况下，才应该使用表标记。

然而，这个问题是一个很好的问题，因为真正好的替代方案还在附近(参见下面即将发布的CSS布局引擎)。

如果你现在应该使用语义表，你该怎么做？

1. 每一行应表示与与对等主题相关的其他行或主题具有相同性质的某些主题。
2. 每一行的每一列都应该与主题的某个方面相关。
3. 在单元格中放置某些信息的决定应该合理地基于1)和2)，而不是基于美学。

现代CSS替代方案

W3C有几种即将推出的解决方案。目前，Chrome、Firefox和Internet (http://dev.w3.org/csswg/css3-grid-layout)实现了与您的需求最接近的一个。这个CSS就是你要找的东西。今年冬天，它将在所有热气腾腾的新浏览器上使用。因此，在接下来的几年中，您应该使用更旧(更麻烦)的CSS (见下文)。

​

​

另一个是CSS (http://www.w3.org/TR/css3-flexbox)。

这些规格是新的一般用途，但这是这样的方式，这种布局将正确进行。

当前CSS替代类似网格的布局。

今天，我会使用CSS网格来避免使用表。您可以使用此代码作为起点。

http://simplegrid.info

像上面的例子一样，使用在所有浏览器上工作的CSS需要更多的工作，但是这在今天的所有浏览器上都是有效的。

Answer 2

表只应用于显示表格数据周期。它们的任何其他用途都是非语义的、错误的和古老的。唯一可接受的布局位置表是HTML电子邮件.

规则是对情况使用最语义的元素，这就是Quentin所指的情况，所以绝对不要这样做：

<table class="header">

并尽量避免：

<div class="header">

(在可能的情况下)选择：

<header>

Answer 3

我不建议，但当前的HTML 5草案规范允许使用表进行布局。

如何区分布局表与数据表

可能是布局表

• 使用具有值表示的角色属性
• 不协调值为0的边框属性的使用
• 值为0的不协调单元格间距和单元格填充属性的使用

可能是一个非布局表。

• 标题、头或第四元素的使用
• 标题和范围属性的使用
• 使用值不是0的边框属性。
• 使用CSS设置显式可见边框

不是一个很好的指标

(布局表和非布局表历史上都有此属性)

• 摘要属性的使用

参考资料：http://dev.w3.org/html5/spec/the-table-element.html#the-table-element

对于跨浏览器的网站，这应该是很容易到达，即使你使用表格或div布局的网页。

但是，通过以WCAG2.0级AA一致性为目标来实现它们的可访问性。WCAG2.0拥有一套完整的HTML技术，可以作为最佳的HTML，并创建可访问的网站。

快速参考指南和技巧:如何满足WCAG2.0

:-)