2010-04-01 50 views
11

我知道有各种各样的优秀论点喜欢CSS定位在基于表格的布局。我想知道的是,CSS模型是否完整(假设一个相对较新的浏览器)与表的所有功能有关。表格可以实现的布局是不可能的还是不切实际的CSS?表格可以做CSS定位不能做什么?

回答

5

如果可以的话,我会切换到基于CSS的布局。语篇论证是正确的,但有实际的考虑。表会:

  • 绝对防止“浮动包裹”,其中一个div将下降到下一行,因为没有它
  • 给你同样的高度列
  • 允许动态布局,其中宽度足够的空间和高度不为人所知,直到运行时
  • 提供colspans和rowspans
  • 减少SO问题问如何做的东西,而表:)
数3210

有一些模仿其中的一些CSS显示属性(表格单元格等),但我不相信这种支持已经足够普及到使用它们(除非你可以控制用户的浏览器选择)。

我工作的网站需要在布局中采用竞争性的动态列宽。多个客户使用相同的网站模板,我不知道他们将放入菜单或页面标题或内容单元中。 (并且不知道他们会发现什么吸引人的,这是另一个问题......)使用一个外部表格来布置网站的主要部分可以提供我所需要的灵活性,而不用担心稍微太宽的菜单会推动主要内容框到下一行,或者背景颜色不会填充所需的高度。在一个完美的(对我来说)的世界里,我们将有<table> s为表格数据,另一个几乎相同的一组布局标签 - 称为<layout>(以及相应的行和单元格标签)。或者,为<table>标签添加一个“模式”属性 - 这些值将是“数据”和“布局”,以便屏幕阅读器和搜索引擎知道该怎么做。也许在HTML 6 ...

编辑:我应该添加,关于'浮动包装'的事情 - 有一个当前的问题,以及一个工作得很好的答案here。这并不完美,太复杂了,但它在很多情况下都能解决问题。

+0

+0为第一,-1为第二和第三,+1为第四和第五。 :D – ANeves 2010-04-01 17:16:59

+1

@sr pt:我很高兴你给了我第一个+0,而不是-0 ......认真地说,我已经看到了大部分这些东西的部分解决方法,但从来没有真正动态的宽度(我的第3个)。你有东西给我吗? – Ray 2010-04-01 17:26:03

4

表意和应该用于表格数据,而不能用于结构。就我个人而言,我将桌子看作一个简单的出路,而我从来没有遇到过无法用CSS解决的情况。

表是垂直定位和全高度肯定列更容易,但是这同样可以用CSS来克服。

+0

的 同样的方式我不是一个谁主张切割编程角落,但存在以下情况:一个“黑客”只是比做事“理想”的方式更好。 Html表格工作。在每个浏览器中。总是。他们很容易理解和维护。在布置div时,CSS与此相反。 – Nemi 2010-04-01 17:06:02

+0

@Nemi - Boo!那么标准是什么? – 2010-04-01 17:37:19

+0

+ -0我非常不同意。 *有*情况,如果没有表或JavaScript,就无法处理。 CSS标准的设计者在提供用于布局的'table'的替代方案方面做得不好,为什么,我不知道。至于“简单的出路”,我向你们提出,当选择介于五行“

”结构或80行CSS加上三种针对IE6和7的浏览器专用黑客之间,或者8以及一个因为(Safari | Opera | xyz)不支持这个和那个伪类,所以“简单的出路”确实是正确的方法。 – 2010-05-17 10:30:18

0

可怕的外观?

尽管如此。第

的使用表的人一个很好的例子是,他们让人们更方便呈现表单字段中一个很好看的方式,但它与前往的交通和页面语义完全打乱。您可以通过在CSS中多花点功夫来获得相同的效果。

0

你可以用CSS做同样的事情,但它通常不会很优雅。

表格对于显示表格数据(即,NOT LAYOUTS)很重要。它们是逻辑的,语义结构,应该这样使用。它们包含像列和行这样的概念,CSS本身不包含这些概念。

+0

我不确定我是否购买了“他们是TABULAR”数据的参数。你意识到http/html是用于STATIC内容的,对吗?而网络应用程序和会话中的保存状态就是一种变态,对吧?使用一种工具,因为它工作的很好,即使它最初并不是为了这种使用而设计的,也没有错。它很聪明。 – Nemi 2010-04-01 17:19:16

+0

用你的逻辑Nemi,我们仍然应该使用在线的FONT语句和间隔GIF。不仅技术发展了,而且思考如何使用这项技术也是如此。当然你可以使用表格进行布局,你也可以用ROCK来敲钉子。 – 2010-04-01 17:29:11

-1

save you time

+0

在牺牲什么? – 2010-04-01 16:59:21

+0

很高兴看到你同意我的回答 – Anurag 2010-04-01 17:18:55

1

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

如果你想在同一行两个独立的元素,无论宽度,你必须使用一个表。也就是说,如果这两个元素是内嵌的或浮动的,如果它们动态调整大小并变得比容器更宽,则它们将打破下一行而不是溢出。如果你绝对要求它们保持在同一行,即使第二个溢出容器的宽度,那么它们需要是表格行中的单元格。

编辑:有点测试表明,这只是花车真。如果您的元素以内联或内联方式显示,则可以在容器上设置white-space:nowrap。然而,在这种情况下,似乎(无论如何FF)在元素之间有一个神秘的空间,这对我昨天的目的来说是一个问题。

+0

我不确定这是否属实。有很多方法可以控制CSS中的包装行为。 – jlew 2010-04-01 17:01:37

+0

然后有人在我昨天的问题中对我撒谎。将删除,如果我能找到它。 – Tesserex 2010-04-01 17:02:44

+0

也许他们在某种有限的情况下是正确的。作为一般性陈述,我不认为这是准确的。 – jlew 2010-04-01 17:04:58

6

CSS没有处理真正表格数据的好方法。如果您的数据本身是按行和列组织的,那么table标签仍然是展示它的最佳方式。虽然你可以在CSS中“伪造”它,但它会导致复杂且难以维护的代码,而这并不是真正的原因。

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

+0

+1尽管“没有真正的原因” – ANeves 2010-04-01 17:19:48

+0

@sr pt - 我不同意。最终的结果是用户看到的。如果使用全CSS设计让你感觉良好,但需要三倍的时间才能完成,除了花费公司的时间和金钱外,你没有什么成就。 – Nemi 2010-04-01 17:24:26

+0

丹是正确的 - '表格'的一个很好的定义是'在行和列中整齐排列的东西'。像大多数数据输入表单一样像报纸风格的专栏一样。就像大多数网站的主要结构一样。 – Ray 2010-04-01 17:29:24

0

什么能表做CSS定位不能?
理论上,没有什么,因为您可以使用display: table;display: table-cell;或其他此类值为display

< ArgumentOnSemanticsUsabilityAndAcessibility/>

+0

嗯,是的。但是,这使得它成为一张桌子,所以我认为这个问题的精神之外。 – jlew 2010-04-01 17:17:29

+0

但除''确保[float'ed etc]元素不会溢出''和'液体行/行跨度'我看不到任何他们可以做的事情,你无法用CSS实现。在这场比赛中,大多数情况下唯一可玩的牌是“节省时间”。 – ANeves 2010-04-01 17:26:54

-2

在标记使用它们(表),你 没有打破你的头约 定位或有关的跨浏览器兼容 。表工作几乎跨浏览器

相关问题