html - 在 HTML 中显示表格数据

Question

我以前总是用桌子。然而，有人告诉我，在现代 HTML 设计中使用表格是一个很大的禁忌。在现代 HTML 中显示表格数据有哪些好的和“公认”的方法？

我想做这样的事情：

名字姓氏电话号码
布兰妮斯皮尔斯 555-555-5555
乔恩·邦乔维 444-444-4444

我不是 100% 清楚为什么我不应该为此使用表格。但是我看到人们使用<li>'s 他们使用 CSS 使行为更像<div>'s

使用 HTML 和 CSS 设置这样的数据的好方法是什么？

score 6 · Accepted Answer

您应该为此使用表格。

它的表格数据，所以它属于 HTML 表格。

由于过度使用表格进行布局，表格的名声不好。但它们并不邪恶，并且是在网页上显示数据表时使用的完全可接受的元素。

score 6 · Accepted Answer

您的示例是规范所描述的表格的完全有效用途（强调我的）：

table 元素代表一个表格；即多维数据。

对表格数据使用 CSS 是可能的，但很快就变得难以处理 100% 宽度、单元格等高、文本换行、溢出等。表格的布局和渲染模型针对这些场景进行了良好定义和优化，而a divor a dlor olis not。

有不同的显示类型在非表格元素上支持更多类似表格的布局，但目前还没有很好地实现。

score 4 · Accepted Answer

对于表格数据，请使用表格元素！这就是它的目的，它仍然存在（参见 HTML5 规范）并被推荐。

当您可以使用 CSS 进行布局时，不要使用表格来布局屏幕（占所有情况的 99% 以上）。

3 回答 3