表格数据的 div 与表格答案

【问题标题】：Divs vs tables for tabular data表格数据的 div 与表格
【发布时间】：2011-07-09 21:37:35
【问题描述】：

是的，另一个 div 与表格的问题...

我到处读到“尝试使用 div 代替表格”，但我有一个显示表格数据的应用程序，基本上我的整个 Web 应用程序都显示表格（具有不同的列和数据），但一切都是表格...我应该使用斗争来使用 div 吗？如果是，为什么？

【问题讨论】：

【解决方案1】：

将表格用于表格数据。当它们仅用于布局目的时，对桌子的敲门声一直存在。他们有自己的目的，它是表格数据。 Div 没有语义意义，不应用于表格数据。

【讨论】：

+1。将表格用于表格数据。并确保正确标记表格标题，以便它们与屏幕阅读器顺利工作。
除了让诸如最大宽度之类的东西工作之外，你必须将每个单元格包装在一个 div 中
如果您的网站不关心屏幕阅读器？我们还应该将表格用于表格数据吗？然后有人可能会争辩说，我可以通过将相关的类名添加到保存我的表格数据的相应 div 中来使我的代码可读（由开发人员）。
我想我的回答是，你为什么不关心屏幕阅读器？
+1 表示“你为什么不关心屏幕阅读器”。为什么你不关心屏幕阅读器？

【解决方案2】：

不！如果表格根本不用于您的代码，它们就会被删除。表格有一个适当的用途，而这种用途是用于表格数据！现在是使用它们的时候了（不是用于演示或设计）。所以一定要使用表格！

我建议在您的表格中提供一个标题标签，以便为可能正在使用屏幕阅读器的人（例如盲人上网者）提供适当的上下文。

例子：

<table>
    <caption>Corporate Information of Current Employees</caption>
    <tr>
        <td class="employeeName">Jim Jones</td> 
...

不要害怕当前的趋势。表格应该用于表格数据。你做对了:)

Dive Into Accessibility 也提供了许多有用的提示。

【讨论】：

【解决方案3】：

用 CSS 正确标记的表格没有任何问题。对于表格数据，表格是自然选择，不要尝试使用 div 来模拟它们；除了在少数情况下 div 可以更干净。

Div 和表格都只是供您使用的工具。了解何时为正确的工作应用正确的工具。

【讨论】：

【解决方案4】：

不，您必须将表格用于表格数据！表是为此目的而存在的，您必须避免使用仅出于布局目的的表，而是使用 div。

【讨论】：

【解决方案5】：

不要将表格用于“布局”，因为您已经在网上找到了很多原因。但是为了显示“DATA”，您仍然可以使用表格。

大多数服务器端脚本语言（如 ASP.NET）都会为 gridViews 生成表格，因此它们不会“使用起来完全错误”。

对于布局，我建议您查看人们为CSS Zen Garden 中的“单一 HTML”设计的不同有趣的布局。

【讨论】：

【解决方案6】：

我不认为你应该努力使用 div，因为我个人不会，但也许这会有所帮助。

【讨论】：