表格能做什么，CSS定位不能？

Question

我知道有很多好的参数比基于表格的布局更喜欢CSS定位。我想知道的是CSS模型是否完整（假设一个相对现代的浏览器）关于表的所有功能。表格是否可以实现CSS不可能或不切实际的布局？

Answer 1

CSS没有很好的方法来处理真正表格的数据。如果您的数据本身是按行和列结构化的，那么table标记仍然是呈现它的最佳方式。虽然你可以在CSS中“伪造它”，但是由于没有真正的原因，它会导致复杂，难以维护的代码。

请注意，表格数据并不一定只是表示数字表。有时，表单和其他类型的交互式内容也可以是表格式，如果它们的字段在逻辑上将自己分组为列和行。关键是要问自己，“如果我在一个页面上写出来并且计算机与它无关，我会将数据视为行和列吗？”

Answer 2

如果可以，我会切换到基于CSS的布局。语义论证是正确的，但有实际考虑。表格将：

• 绝对防止“浮动换行”，因为没有足够的空间，div会落到下一行
• 为您提供相同高度的列
• 允许动态布局，其中宽度和高度直到运行时才知道
• 提供colspans和rowpans
• 减少SO问题的数量，询问如何在没有表的情况下做事：）

有css显示属性（table-cell等）模仿其中一些，但我不相信支持已经足够广泛使用它们（除非你可以控制用户的浏览器选择）。

我工作的网站需要在布局中提供足够的动态列宽。多个客户使用相同的网站模板，我不知道它们将放入菜单或页眉或内容单元格中。 （并且不知道他们会发现什么有吸引力，这是另一个问题...）使用单个外部表布置网站的主要部分允许我需要的灵活性，而不用担心稍微过宽的菜单会推动主内容框向下到下一行，或者背景颜色不会填满所需的高度。

在一个完美的（对我而言）世界中，我们将<table>用于表格数据，而另一组几乎相同的布局标记集 - 称之为<layout>（以及相应的行和单元格）标签）。或者，为<table>标记添加“模式”属性 - 值将为“数据”和“布局”，以便屏幕阅读器和搜索引擎知道该怎么做。也许在html 6 ......

编辑：关于'浮动换行'的事情，我想补充一点 - 在SO上有一个当前的问题，答案效果很好here。它并不完美，而且我太复杂了，但在很多情况下它会解决问题。

Answer 3

表是指并且应该用于表格数据，而不是结构。就个人而言，我认为表格被用作一种简单的方法，我从未遇到过用CSS无法解决的情况。

对于垂直定位和全高度列，表格肯定更容易，但是再次使用CSS可以克服这一点。

Answer 4

我有一个！有些东西在我看来不可能用css，但可以用表格。我昨天刚问了一个问题并得到了答案。

如果在一行上有两个单独的元素，无论宽度如何，都必须使用表格。也就是说，如果这两个元素是内联的或浮动的，如果它们是动态大小并且变得比容器宽，它们将分解到下一行而不是溢出。如果你绝对要求它们保持在同一条线上，即使第二条线会溢出容器的宽度，那么它们也需要是表格行中的单元格。

编辑：一些测试显示这只适用于浮点数。如果您的元素以内联或内联方式显示，则可以在容器上设置white-space:nowrap。然而，在这种情况下，似乎（无论如何在FF中）元素之间存在一个神秘的空间，这对于我昨天的目的而言应该是一个问题。

Answer 5

看起来很糟糕？

但是，说真的。否。

人们使用表格的一个很好的例子是，它们以一种漂亮的方式呈现表单字段变得容易得多，但它完全混淆了页面的可访问性和语义含义。你可以用更多的努力在CSS中实现相同和更好的效果。

Answer 6

你可以用CSS做同样的事情，但它通常不那么优雅。

表格对于显示表格数据非常重要（即，不是LAYOUTS）。它们是逻辑的，语义的构造，应该这样使用。它们包含像列和行这样的概念，而CSS本身并没有。

Answer 7

CSS定位不能做什么表？
从理论上讲，没有任何内容，因为您可以使用display: table;，display: table-cell;或display的其他此类值。

＆lt; ArgumentOnSemanticsUsabilityAndAcessibility /＆gt;

Answer 8

save you time

Answer 9

  

在标记中使用它们（表格）和你   不必为此而烦恼   定位或关于跨浏览器   兼容性。表几乎可以工作   跨浏览器的方式相同