浅谈table布局和div布局的区别

table布局和div布局的区别

背景

早期的网页布局，基本都是采用table布局的。早期的网页相对来说比较的简单，类似于报纸一样，只有文字和静态的图片。对于这样子的需求，table布局是使用的。但是随着W3C（万维网联盟）以及其他标准的出现，还有现在网页的呈现、网页的布局变得多样化了，table布局也变得不适用了。table现在也只用来显示数据而已，基本没有应用到布局上。

table布局

先来谈一谈table布局吧！

• 首先是table布局的缺点：

  1. 采用table布局的页面，如果table嵌套的层数太多的话，可能会导致页面一直出不来的情况。因为table布局的网页要等table全都加载完，再进行页面的呈现。页面一直出不来，那这样用户的体验感就会很差。
  2. table布局如果嵌套的table太多，会导致代码结构过于复杂，容易混乱。
  3. table布局没有实现结构（html）、表现（css）的分离，这样代码的结构就做不到很清晰了，所有的代码都混杂在一起。

• 但是，table布局还是有其优点的，如下：

  1. 容易上手。table布局就是用table来布局，只要在对应的位置填上对应的内容就可以了。相对来说，还是比较的简单明了的。
  2. 表现上更加的“严谨”，在不同的浏览器，可以做到很好的兼容。

div+css布局

现在普遍使用的人都是div+css布局了，让我们一起来看看她有哪些优势吧！

• 优点：

  1. 加快页面的加载速度。div布局有一个很好的地方是，它是一边加载，一边呈现的，这样网页基本不会出现一直出不来的情况，至少基本网页结构可以很快的呈现出来。这样用户的体验感就会很好。这是比table布局好的一个点。

     我觉得这个点其实是很重要的，你想想，如果是你打开一个网页，打开了好几分钟，还什么都没有出来，你是不是再也不想去访问这个网页了。

  2. div布局符合了W3C的标准，做到了结构、表现、行为（js）的分离。相当于给代码分类，每一类代码做什么事情都清楚明了，使得代码能够更好的维护。

  3. 节约站点所占的空间和站点流量。

  4. 用只包含结构化内容的html代替嵌套的标签，提高搜索引擎对网页的搜索效率。

     原因：当用户进行搜索时，它会从事先抓取到的大量有关联性的索引中，搜索所有包含用户输入的关键字的网页。然后根据算法给每一个网页一个总评分，再根据评分的高低给用户返回搜索结果。这其中包含关键字的内容，可以是文章标题、描述、关键字、内容、甚至还有链接等。而html中的

  5. 布局更加灵活多样，可以通过选择不同的样式来实现界面设计的更多不同的要求。

• 缺点：

  1. 开发技术高，要考虑兼容不同版本的浏览器

总结：

今天上课，老师刚好讲了一点点table布局和div布局的区别，下课后，我便自己查阅了资料，大概整理出来了它们之间的区别。

收获还是挺多滴，开心～

好啦，这次的分享就到这里啦～