html - 语义标记的建议

Question

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

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

score 7 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

4 回答 4