<div>元素而不是?<table> </table> </div>

时间:2009-05-04 08:13:57

标签: html css layout css-tables

重复:


最近有很多关于使用div而非桌面标签的讨论,以使您的网页更加灵活。为什么div更好?

9 个答案:

答案 0 :(得分:15)

这里的关键点是使用它们进行布局。表格数据的表格没有任何问题,请注意。这就是他们的目的。

但是当您使用表格进行布局时,您会创建一个非常严格的页面结构,通常不适合不同的屏幕尺寸,用户代理(想想盲人的移动浏览器或屏幕阅读器。特别是在后一种情况下,你是销毁应该向用户读取内容的任何顺序)。不幸的是,表格仍然是构建页面的最强大的机制之一,因为几乎没有不同的实现,它们可以完美地工作十多年 - CSS在这里完全不同。

但基本上归结为:

  • 违反内容和陈述的区别
  • 从长远来看是笨重且难以维护的,尤其是在尝试以类似方式更改多个页面的布局时
  • 没有强烈的语义含义,这对于可能只依赖于朗读文本的受损人群非常重要。这里逐列逐行读取表格,这在基于表格的布局中几乎总是没有用处

CSS布局

  • 更难做到(至少是为了演示)
  • 允许(有时)清晰分离内容和演示文稿。请注意,有时因为您经常需要在HTML中使用多个容器元素以允许某些布局和样式正常工作,因为CSS有一些限制
  • 允许底层标记的更好语义含义 iff 您不要盲目使用<div><span>。有许多标签具有意义,应该这样使用。例如,如果可以使用<div class="heading1">,请不要使用<h1>

答案 1 :(得分:14)

有几个原因:

1)在大多数情况下,div在语义上更正确。在表结构中对其站点进行编码的人不使用表来表示它们的用途,这是表格数据。 div代表页面的“分区”或部分,因此将项目放在div中更为正确。

2)div更灵活,更容易设计和维护。每当你想写一些东西时,你不必写<table><tr><td>Text here</td></tr></table>代替<div>Text here</div>。你可以为表和div添加css钩子(即类或元素),但是使用div它可以更加灵活。

3)表结构化网站简直太丑了:)

答案 2 :(得分:6)

因为表格传达了语义含义 - 正如您当前正在显示表格数据,就像h1意味着您有一个标题。因此,如果您使用表来格式化输出,则会误导您对代码语义的解释。

例如,这可能会导致使用屏幕阅读器的人员出现无障碍问题。

答案 3 :(得分:2)

答案 4 :(得分:1)

使用div比使用表更好,因为它易于控制设计,并且它可以是控件的容器而不是表,并且表主要用于对具有simillar结构的数据进行分组,所以它的设计是为了这个任务而div是被认为是容器,主要是表。 我发现收集许多控件和我可以控制容器之间的区别但是在表格中我感到困惑,因为我必须插入内部并且在内部相互循环。

答案 5 :(得分:0)

大多数人都在谈论表应该如何仅用于数据,并且在将其用于布局时会引入性能问题。此外,它应该更灵活,因为你可以使&lt; div&gt;向左流动,向右流动,流向其他地方。

然而,恕我直言,它不值得努力。特别是当您有一些控件列应该与相应的标签正确对齐时,只需要很长时间就可以正常排列。

答案 6 :(得分:0)

使用表格进行布局对于网页设计来说是革命性的,但那是在十五年前,没有其他选择。正是因为这个历史,今天甚至考虑将表格用于布局。

基于CSS的布局比基于表格的布局灵活得多。使用表格仍然有一些更容易实现的事情,但另一方面,使用CSS非常容易做很多事情,这些事情非常复杂或无法用表格完成。

答案 7 :(得分:0)

我告诉你使用div的个人主要原因:

  • 表只有一个静态网格,而div是动态的: 表的第一行定义所有cols(如在MS Excel中)。在下一行中,您可以组合这些列,但不能更改在第一行中定义的基本布局。 Div是动态的:您可以创建拼凑,让div重叠或在它们之间留出一些空间。任何你想要的。你不是被迫在行中思考。你自由了。更灵活。

  • 表导致呈现和跨浏览器不兼容问题: 表看起来并不总是相同的。每个浏览器都为您提供了对表及其内容的自己的解释。因此,很多令人不安的惊喜。一个浏览器会将您的常规文本显示为粗体字体。另一个浏览器为您的表提供了与其他html元素相比更多或更少的余量,因此,表格没有很好的定位。通过复杂的解决方法解决这些问题需要花费数小时的时间。 Div在所有浏览器中看起来总是相同。即使是IE(众所周知,作为网络程序员的麻烦制造者)如果使用div也会造成较少的问题。

  • Divs渲染速度更快: Div的加载速度比表快。页面之间的浏览速度更快。更好的外观和感觉。

希望它有所帮助。欢呼声。

答案 8 :(得分:-3)

我正在使用CSS和表格,有时候使用DIV,但表格非常全面! 它们在Dreamweaver,Frontpage中看起来很漂亮...... 提供表格很难,但似乎我会这样,因为有必要让我的页面加载更快!