语义标记的建议答案

【问题标题】：Suggestion for Semantic Markup语义标记的建议
【发布时间】：2009-09-29 16:41:03
【问题描述】：

我正在为我正在开发的应用程序创建一个 Web GUI。该特定部分将位于具有良好语义构成的较大页面中。但是，我不确定在语义上标记以下屏幕的最佳选择是什么。

我最初的想法是通过 div 将上半部分与下半部分分开。因此，顶部的标记非常容易。离开底部，这是我感到难过的地方。最简单的答案是表格，但此内容不容易适合表格数据规则的唯一使用表格。特别是考虑到标题在这种布局中看起来很显眼。有什么建议吗？

【问题讨论】：

【解决方案1】：

我会为下部使用一个表格，因为在我看来这个是表格数据。我看到 4 列（图标、项目名称、项目描述和操作按钮）。我看不出有什么理由不为此布局使用表格（更不用说任何其他可以使此布局正确缩放的方法都需要 JavaScript 和很多令人头疼的工作才能正常工作）。

【讨论】：

虽然我违反了语义标记规则，但没有列标题？
@ahsteele 您可以添加标题...并通过 css 隐藏 - 这将是一个样式决定，您的 html 不需要因此受到影响
技术上是的，但是好的 Web 开发是理想主义和实用主义之间的平衡。
@Freddy - 很好的建议！
@OP：我也会使用表格。我不确定“......标题看起来很明显......”是什么意思 - 所以不要包含标题。 :-) 尝试以任何与浏览器广泛兼容的方式在没有表的情况下执行此操作将是复杂的、难以维护且容易出错的——例如，这不是花费宝贵开发时间的有用方式。总有一天，CSS 会以一种合理的方式来满足它，并且它的必要特性将得到足够好的支持，但是虽然今天可能存在对前者的争论，但没有后者。不要浪费你的时间。

【解决方案2】：

如果您将这些内容放在表格中，我认为这不会是对语义标记最严重的违反。除了按钮，它对我来说看起来很表格。我认为 CSS 之神会原谅你 :)

【讨论】：

【解决方案3】：

我同意安德鲁的观点。这是表格数据，因此您应该使用<table>，但请记住，您应该正确定义表格标题、列和页脚。

您的另一个选择是使用无标题表，您将使用<div> 作为页眉和页脚，并使用<table> 作为正文。但是，我不建议这样做。一个原因是，如果您使用 JavaScript，您可能需要诸如客户端排序之类的标头。

【讨论】：

【解决方案4】：

您没有违反任何将其放在表格中的内容。当然，有些人会抱怨它，但它与表格数据非常接近，您也可以这样做。

【讨论】：