2

在我的另一个问题中，div table 中的单元格间距每个人都说表格比 div 表格更好，并且有人提到 div 表格没有 html 表格的好处。我很困惑，为什么要display: table介绍它，如果它很糟糕，它的意义何在？

4

4 回答 4

5

显示表在单元格间距和拉伸方面以某种方式表现。这种行为很难用其他方法重现。HTML<table>元素应该只用于表格数据（想想 Excel 电子表格）。所以一个是显示行为，另一个是语义（有意义的）标记。您可能想使用一个而不使用另一个，这就是为什么它们是两种不同的东西。

如果您有表格数据，请使用标记<table>并免费获取表格显示行为。如果您有一些确实不是表格数据但您想以表格的行为显示它，请在其上添加一个 CSS 表格显示行为。

于 2013-03-01T23:04:46.430 回答
3

不管在任何给定情况下是否更好地使用表格或 div 的任何其他考虑，display:table存在的原因（以及相关的display:table-rowand display:table-cell）是因为 CSS 应该能够将任意 HTML（甚至 XML）呈现为所需的布局，无需将任何样式效果硬编码到浏览器中。

标准<table>、、、<tr>等<td>元素应用了大量的默认样式；并且在许多方面表现与其他元素完全不同。display:table复制那些不同的行为。

因此，现代浏览器可以简单地display:table用作元素的默认样式table，而不必像旧浏览器那样在引擎中内置硬编码的特定于表格的渲染。

于 2013-03-03T21:54:45.383 回答
0

是否使用一种或另一种的选择更多地基于使用表格来存储数据而不是布局。一个好的经验法则是在您实际尝试使用数据“表”时使用表。

于 2013-03-01T23:06:37.053 回答
0

底线是 HTML 标记 ( <table>) 应该描述内容是什么，而 CSS( display:table) 描述内容应该是什么样子。他们不一样。

您可以在非表格元素上使用它，display:table但当您想要设置实际表格的显示属性时，这是唯一合适的选择。

这是一个易于理解的示例：

<div class="my-tables">
    <table>...</table>
    <table>...</table>
    <table>...</table>
</div>

.my-tables table {
    display:none; /* hide all the tables */
}

你如何展示其中一张桌子，比如第一张？

.my-tables table:first-child {
    /* display:block; not quite... */
    display:table; /* There it is! */
}

表格是标记表格内容的正确工具。仅用于布局的表格是对标签的滥用。使用<p>or<fieldset>布局同样是错误的。

于 2013-03-03T22:07:21.317 回答