在divs的守旧派表

Question

我是一名老派网页设计师，仍倾向于选择桌面而不是div。我觉得更容易做公共网站，特别是我们现有的浏览器平台数量。

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

如果我在做专业网站，我会被视为做错了，不专业或不赞成？它会被归类为非标准或老式吗？

Answer 1

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

然而，问题是一个很好的问题，因为非常好的替代方案仍然存在（参见下面即将推出的CSS布局引擎）。

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

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

现代CSS替代

W3C有几个即将推出的解决方案。目前正在Chrome，Firefox和Internet Explorer（http://dev.w3.org/csswg/css3-grid-layout）中实施最符合您需求的产品。这个CSS就是你要找的。今年冬天，它将在所有吸烟热门的新浏览器中提供。因此，在接下来的几年中，您应该使用较旧（且更麻烦）的CSS（见下文）。



另一个是CSS Flexbox（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草案规范允许使用表格进行布局。

如何区分布局表与数据表

  

可能是布局表

     

  
• 使用带有值表示的role属性
  
• 使用不符合值0
的border属性   
• 使用不合格的cellspacing和cellpadding属性，值为0
  

     

可能是非布局表

     

  
• 使用标题，thead或th元素
  
• 标题和范围属性的使用
  
• 使用border属性不是0
的border属性   
• 使用CSS
设置显式可见边框   

     

不是一个好的指标

     

（历史上已经为布局和非布局表赋予了此属性）

     

  
• 使用摘要属性
  

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

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

但是，通过针对 WCAG 2.0 AA级一致性来实现它们的可访问性。 The WCAG 2.0有一整套Techniques for HTML，可用作最佳HTML编码实践并创建可访问的网站。

Quick reference to the guideline and techniques: How to Meet WCAG 2.0

： - ）