4

我是一个老派网页设计师，仍然倾向于选择表格而不是 div。我发现以这种方式创建公共网站更容易，尤其是在我们现有的浏览器平台数量众多的情况下。

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

如果我做专业网站，我会被认为做错了，不专业或不受欢迎吗？它会被归类为非标准还是老式？

4

3 回答 3

5

您正在使用语义表来实现类似网格的布局。这是错误的（并且不赞成）的原因主要是因为布局信息在错误的位置。Html 应该用于语义（没有外观的内容），样式应该在 css 中完成（没有内容的外观）。因此，只有当信息是表格时，您才应该使用 table 标记。

然而，这个问题是一个很好的问题，因为真正好的替代方案仍然指日可待（请参阅下面即将推出的 CSS 布局引擎）。

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

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

现代 CSS 替代品

W3C 有几个即将推出的解决方案。Chrome、Firefox 和 Internet Explorer ( http://dev.w3.org/csswg/css3-grid-layout )目前正在实现最符合您需求的一个。这个 CSS 就是你要找的。它将在今年冬天在所有炙手可热的新浏览器中可用。所以在接下来的几年里，你应该使用旧的（也更麻烦的）CSS（见下文）。

CSS 网格布局

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

虽然这些规范对于一般用途来说是新的，但这是正确执行此类布局的方式。

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

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

http://simplegrid.info

如上例所示，使用适用于所有浏览器的 CSS 需要做更多工作，但这适用于今天的所有浏览器。

于 2012-10-16T10:03:53.567 回答
1

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

规则是针对情况使用最语义化的元素，这就是昆汀所暗示的，所以绝对不要这样做：

<table class="header">

并尽量避免：

<div class="header">

改为（在可能的情况下）选择：

<header>
于 2012-10-16T10:02:06.057 回答
1

我不会推荐，但当前的 HTML 5 草案规范允许使用表格进行布局。

如何区分布局表与数据表

可能是一个布局表

  • 角色属性与值表示的使用
  • 使用不符合值 0 的边框属性
  • 使用值为 0 的不合格单元格间距和单元格填充属性

可能是非布局表

  • 使用 caption、thead 或 th 元素
  • 标题和范围属性的使用
  • 使用非 0 值的边框属性
  • 使用 CSS 设置显式可见边框

不是一个好的指标

（历史上布局和非布局表都被赋予了这个属性）

  • 摘要属性的使用

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

关于做跨浏览器网站，即使您使用表格或 div 来布局网页，也应该很容易访问。

但是，如何通过瞄准WCAG 2.0 AA 级一致性来使它们易于访问。WCAG 2.0拥有一套完整的HTML 技术，可用作最佳 HTML 编码实践并创建可访问的网站。

指南和技术快速参考：如何满足 WCAG 2.0

:-)

于 2012-10-16T15:52:58.433 回答