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中的标签（取一个有意义的贴合网页内容的标题）、元标签（关键字）、语义化元素（<h1>、<b>、<i>）等，都可以更好、更清晰准确地找到关键字，匹配到更贴合的网站。从而提高搜索的效率。</i></b></h1>
5. 布局更加灵活多样，可以通过选择不同的样式来实现界面设计的更多不同的要求。
缺点：
1. 开发技术高，要考虑兼容不同版本的浏览器

总结：

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

收获还是挺多滴，开心～

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

浅谈table布局和div布局的区别相关推荐

浅谈CSS3中的弹性布局
浅谈CSS3中的弹性布局现在的努力,只是为了实现小时候吹过的牛逼一.什么是弹性布局? Flex是Flexible Box的缩写,意为"弹性布局",他为盒模型提供了最大的灵活性. ...
2017-12-04HTML布局＿div布局
HTML布局＿div布局 <!doctpye> <html> <head><meta charset = 'utf-8'><title>HT ...
html代码id,浅谈html中id和name的区别实例代码
浅谈html中id和name的区别实例代码更新时间:2008年07月28日 23:00:55 作者: 这个是form里面的name与id的区别我们可以通过一段代码来分析一下其中的微妙差别: 在 ...
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式 pth中的路径加载使用
首先xxx.pth文件里面会书写一些路径,一行一个. 将xxx.pth文件放在特定位置,则可以让python在加载模块时,读取xxx.pth中指定的路径. Python客栈送红包.纸质书有时,在用i ...
浅谈Nginx负载均衡与F5的区别
转载地址: http://www.ideadata.com.cn/wisdomAction/readWisdom.do?id=75 前言笔者最近在负责某集团网站时,同时用到了Nginx与F5,如图所 ...
浅谈 JDBC 中 CreateStatement 和 PrepareStatement 的区别与优劣。
浅谈 JDBC 中 CreateStatement 和 PrepareStatement 的区别与优劣.
【python】数据结构和算法 + 浅谈单链表与双链表的区别
有这么一句话说"程序=数据结构+算法",也有人说"如果把编程比作做菜,那么数据结构就好比食材(菜),算法就好比厨艺(做菜的技巧)". 当然这是笼统的说法,不过也 ...
【网摘】浅谈HTTP中GET与POST的区别
文章出处:http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html 浅谈HTTP中Get与Post的区别 Http定义了与服务器交互的不 ...
pytorch保存模型pth_浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
我们经常会看到后缀名为.pt, .pth, .pkl的pytorch模型文件,这几种模型文件在格式上有什么区别吗? 其实它们并不是在格式上有区别,只是后缀不同而已(仅此而已),在用torch.save ...

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

目录

table布局和div布局的区别

背景

table布局

div+css布局

总结：

浅谈table布局和div布局的区别相关推荐

最新文章

热门文章