Question

我在这个网站上看到了很多答案，主张使用表格进行设计，因为使用CSS和Divs无法完成...实际上它可以完成有点聪明才智。

真正无法做到的事情的例子是什么？

我遇到的唯一一个是在另一个盒子里垂直对齐一个盒子。

*编辑：我想我最感兴趣的是使用CSS2无法实现的布局

Answer 1

这个问题的答案取决于许多方面：

你需要向后兼容吗？包括IE6会降低纯CSS的容量;和
您的网站有多少是固定宽度和/或固定高度。在可变宽度和/或高度情况下，CSS中的某些内容即使不是不可能也会变得很难。

并排内容是CSS的问题。您可以使用浮动，但如果宽度的总和超过容器的宽度，尾端浮动将下降到下方。在这方面，表格更有能力，因为它们会在可能的情况下挤压色谱柱，使细胞不会分裂成新的行。

你提到的垂直居中。在纯CSS中，它很简单，有表格，硬盘或不可能（取决于容器和物品的兼容性和固定或可变高度）。

您可能也指悬停内容。 IE6仅支持锚点上的：hover伪元素。该浏览器需要Javascript：类似悬停的行为。

基本上，如果您需要做的事情可以用纯CSS完成，那就去做吧。如果没有，如果你不得不使用桌子，尽管所有的反桌狂热分子（他们都是狂热分子）惊恐地跳来跳去，也不要感到难过。

如果你想要一个相对简单的例子检查Can you do this HTML layout without using tables?。这是一个概念上简单的布局问题，对表格来说是微不足道的，而且还没有人发布满足纯CSS要求的解决方案。

Answer 2

块或文本的垂直对齐。
弹性容器伸展到其内容的宽度。
有几个“行”具有相同的结构，其中“单元格”在所有行的宽度上同步。
让几个“列”同步它们的高度（最长文本块的长度）。

这些是甚至基本设计概念中出现的非常基本的设计师需求。

如果考虑到IE8，可以用CSS解决单元格/列问题，但是直到它的广泛传播（即使IE7在2 - 3年内没有达到预期的市场份额）也需要很多年。

至于“聪明才智”，在软件开发中并不是那么好。几个月后你的同事和你自己的伎俩将无法理解，通常会建立起每个人都害怕接触或决心完全重构/重写的代码库。

记住KISS原则。这样做最简单的方法就是越可靠。

Answer 3

“......实际上可以做到有点聪明才智。“

在CSS中很难做到“避免需要聪明才智”。

）

Answer 4

表应该用于表格数据！我们应该总是尝试使用正确的HTML来标记给定的内容。所以不仅仅是div（span，ul，li，dl，strong，em ......等）这样可以确保内容不仅正确，而且正确（适用于SEO和accessibile原因）

通过不使用表格，我们可以将内容从一种外观转换为下一种内容，而无需更改HTML，请参阅Zen Garden

目前虽然使用当前浏览器可以完成类似布局的CSS表，但是很棘手。有一些技术可以解决许多问题，天气虽然global wrappers通过背景图像完成，或positioning fixes ...其中两篇文章也指使用Javascript逐步增强页面以获取这些您可能需要的其他课程。

当然，您可以使用一些XSL作为中间件，以帮助在CMS处理时进行格式化。

Answer 5

表中的备用行颜色，无需手动（或借助脚本）为每行指定备用样式。

确定一个元素相对于另一个元素的位置。例如，你不能使用CSS来确定一个盒子在一堆使用相同类的浮动盒子中的位置。例如，知道一个盒子是第一个浮动的盒子，还是第二个盒子，或者最后一个盒子。

处理寡妇。寡妇是一个在段落末尾悬挂的单词，即单个单词开始一个段落的最后一行。这是印刷设计的一个重要原因，但在网络世界中很难控制。

Answer 6

浮动多个列中的元素，其中每个单元格中的文本可以扩展元素的高度，但如果发生这种情况，则必须按下整行。

 ---   ---   --- 
|AAA| |BBB| |CCC|
 ---   ---   --- 
 ---   ---   --- 
|AAA| |BBB| |CCC|
|   | |BBB| |   |
 ---   ---   --- 
 ---   ---   ---
|AAA| |BBB| |CCC|
 ---   ---   ---

Answer 7

图像无法放置在具有对齐属性的单元格的正中心。可以通过一些强力来完成。

Answer 8

听起来很明显但你不能用CSS改变内容，它只能用于造型。

Answer 9

罗瑞，我觉得你是对的。垂直对齐可以使用行高，并且在CSS中创建布局确实不是那么难。事实上，当使用绝对/相对定位和浮动时，它更灵活。

仍然使用表格进行设计的人应该按照现行标准进行处理。

继续讨论主题，随着CSS3的出现，很难想到CSS无法做到的事情。图像处理，内容操作，高级选择器，这一切都是可能的。但是，如果我必须说出一件事，那就是使用CSS，你不能（也不会）能够旋转元素。

Answer 10

我无法使用透明度在所有页面上创建可变高度的文本区域。我相信这是不可能的。我最终只是写了一个快速的javascript函数来重置页面加载后的高度，以使布局工作。请参阅http://peterchristopher.com，了解文本区域透明度的含义。

Answer 11

CSS绝对没有表可以做到。

似乎有一种常见的误解，即HTML＆amp; CSS应该很简单。事实并非如此。如果您发现自己想要使用表格，那么您的CSS技能需要改进而不是技术（尽管该技术显然有很多漏洞可以改善）。

使用CSS无法完成的任务

11 个答案: