网页表格布局缺点

Posted 2020-12-09 bzluohai

网页表格布局缺点

TABLE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。却会导致以下一些问题。

1.布局管理困难,建立的网页中有层层叠叠的嵌套表格，变得越来越难以维护,每次修改都意味着要改动一个或多个表格,还要注意别破坏整个网页，直到调整正确为止，修改时间长，维护成本高。

2.降低网页浏览速度。
（1）、Table要比其它html标记占更多的字节。Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。延迟下载时间，占用服务器更多的流量资源。)

（2）、使用嵌套表格的方法来布局网页框架会改变浏览器渲染引擎的渲染顺序,延迟页面的生成速度，让用户等待更久的时间。因为table中的内容是自适应的，为了自适应，它要计算嵌套最深的节点以满足自适应，所以有可能会有一断时间出现空白才显示。所以是会有问题的。

3.降低页面可用性，浏览器和文本浏览器处理表格的方式通常与处理其他内容的方式不同，当用户把网页内容复制出来时候，往往带有大量的表格，便内容在不同的平台上，排版变型严重，这会给用户带来过多的负担。

4.降低网页搜索引擎收录机率，由于多层嵌套表格原因，导制搜索引擎无法抓取网页内容，造成搜索引擎不收录的问题。

后来绝大多数的网站都是用DIV+CSS布局。这两种布局各有各的优点。

一、div+css布局的好处：

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

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

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

二、table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）

1、容易上手，结构位置更简单 。

2、可以形成复杂的变化，简单快速。

3、表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

4、 数据化的存放更合理。例如，学生信息这样的表，如果要在网页中显示，表格布局反而会更简单，相反利用div+CSS会使得事情更加复杂化！

综合上面对两种不同网页布局的分析，大家也很显然看得出HTML+CSS的布局是很占据优势的，这也是现在HTML+CSS成为主流的原因吧