我最近与另一位使用<table>
的开发人员讨论了非表格数据。
<table><tr><td> Server: </td><td> Development </td></tr></table>
我指出tabular data has more than one dimension, and use of tables for styling/presentation is discouraged。他回答说,仅仅因为表格是一行并不意味着数据是非表格式的。
在我看来,如果“表格数据”具有多个维度,则需要至少两行和两列。但是,他指出<table><tr><td></td></tr></table>
(以及<table></table>
)both validate,如果他错误地使用<table>
,那么W3C就不清楚了,他们做得不好用他们的验证器。
我认为<table>
应该用于表示表格式的数据,无论结果结构是否为表格,因为它们可以是警告。在上面的示例中,将只有一个服务器,但您可能有零行或多行多列数据,可能会在日期范围内进行过滤。
我的问题是谁在这里?如果我误解了规范,那么 我是如何误解的?如果您的数据是表格但没有足够的过滤数据来打印多行(例如,如果它在较小的日期范围内过滤),那么仅打印列标题是不正确的吗?你应该打印一个“没有找到结果”的完整colspan行吗?如果<table>
中的数据必须是多维的,为什么单列和/或单行表会验证?
答案 0 :(得分:3)
我同意其他人,标记的有效性并不等同于标记的语义。
表格数据应该有一个列标题来描述它所拥有的数据。所以最小的表是(1列有1行数据,该列应该有标题):
<table>
<thead>
<tr>
<th>My Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>my value</td>
</tr>
</tbody>
</table>
如果您想表示"no results found"
,它应该显示在表格之外。因为no results found
不是数据。没有结果应该在表格中显示任何内容,或者更好的是,隐藏表格并显示您的no results found
消息。
答案 1 :(得分:1)
在我看来,如果“表格数据”具有多个维度,则需要至少两行和两列。但是,他指出
<table><tr><td></td></tr></table>
(以及<table></table>
)都验证了,如果他错误地使用<table>
,W3C就不清楚了,他们的验证工作做得不好
标记的有效性与语义完全无关。 <p>
本身就是有效的HTML,即使空段落在写作中没有意义。同样,以下三个表都是有效的,即使它们不包含实际数据:
<table></table>
<table>
<tbody>
</table>
<table>
<thead><tr><th>
<tbody>
<tfoot><tr><th>
</table>
正如您所观察到的那样,没有孩子的<tr>
元素无效:
<table>
<tr>
</table>
我不清楚为什么会出现这种情况,因为我在the current HTML 5.0 CR中找不到任何说明<tr>
元素必须至少有一个孩子<td>
的规则}或<th>
元素(它只是说它可能包含zero or more of either kind)。
无论如何,如果一个表只包含一行,那就这样吧;这只是意味着表中只列出了一条记录。但表格数据语义不是这个表是否只有一行,而是这个结构是否适合以二维格式表示的任意数量的数据记录的问题。这就是表格数据的构成。
在您的示例中,“服务器”可能会有多个条目(顺便说一句,如果它是真正的表格标题,它应该是<th>
而不是<td>
并且它不应该包含冒号)?如果没有,并且您想要做的就是告诉用户他们所在的服务器,那么表格不是用于呈现此信息的最合适的元素。您应该使用标题或标签,以及值“开发”的其他文本容器。
如果您的数据是表格,但没有足够的过滤数据来打印多行(例如,如果它在较小的日期范围内过滤),那么仅打印列标题是不正确的吗?您是否应该打印“没有找到结果”的完整colspan行?
您是否选择显示“未找到结果”的行取决于您;无论哪种方式都可以接受。在这种情况下,您所拥有的只是一个旨在包含表格数据的表,但由于某种原因,没有任何数据可供呈现。
如果
<table>
中的数据必须是多维的,为什么单列和/或单行表会验证?
因为即使1x1平方(即1²)网格仍然被认为是二维的,即使这个单个单元格是<th>
而没有伴随行(同样,有效性和语义是两个非常不同的事项)。 / p>
答案 2 :(得分:0)
有效!=语义,让我们从那开始吧。我可以单独使用<div>
创建整个网页,这是否会使其成为语义?否。
表格数据不是必然意味着它有多个维度(虽然这确实有帮助!)。表格数据表示“将表格放在表格中最有意义的表格”。它确实需要数据,根据定义将导航链接放在表中是非语义的。
这取决于他放在那张桌子里的确切内容。可能是一张桌子很好,试着给出一个他实际放在那里的例子。
答案 3 :(得分:0)
我对表的问题 - 我和那些只知道如何使用它们的开发人员合作 - 是我无法像在div标签中那样轻松地移动表标签中的内容。当然,您可以将表格放入几乎任何东西,并且几乎像div标签一样轻松地移动它,但是表格本身涉及更多的开销(更多标签)。
您最终需要花费更多时间来调整填充,间距等。与使用DIV相比,使用表格的效率要低得多,并且需要更多代码/更少视觉上易于阅读的代码。我喜欢我的表格标签在漂亮的单个行中,就像另一个回答者提供的代码示例;否则你冒着奇怪的嵌套风险。使用DIV时,你的嵌套问题要少得多。
尽管如此,许多人发现DIV令人困惑,不知道如何处理更灵活的标签。
所以这是个人偏好问题,真的。您知道并且愿意学习的CSS越多,您使用DIV的可能性就越大。网站越简单,越不了解您希望能够使用的CSS的开发人员越多,使用表格就越容易。在重新格式化页面时,您只需限制自己的生存能力,而无需触及HTML代码。 (或生成HTML代码的后端服务器代码)