浅谈table+css和div+css的区别

从事学校各部门、系部web服务器管理维护工作几年中, 发现本学校中绝大部门的web网页都是使用table+css结构, 而不是目前流行的div+css。虽然两种结构各有优缺点, 但是div+css的优点更突出。

暂且不说这两种方法优缺点, 先看下这两种方法在制作同一块栏目时候的区别。如果要写一个产品列表, 用table的写法是这样的:

但是代码是明显有区别的。如果一旦产品栏目很多, 前面的图标需要更换的话。Div只需要在.new_list li里面更改样式就可以了。那么所有产品名称前面的图标都会更换。而Table所有的图标都需要一个个重新更改。繁琐程度不言而喻。还一个就是产品图片展示这个地方, 用table去做就十分简单。但是div+css是全部手写代码的。如果你数学不好, 或是逻辑思维能力不强的话, 你手写出来的表格将是乱78糟, 出现表格重叠和位置完全不正确。因为用div+css写表格时, 表格间的逻辑排列关系完全是靠自己手写代码判断, 如果你没有很强的手写代码能力和逻辑性, 你所花费的时间, 比你用table制作时间至少是2倍左右。特别是遇到复杂的嵌套关系时。

首先说下table的优点。

(1) 可观性好。

简单方便, 适合初入门的用户操作, 用表格不需要过多了解代码, 只需插入表格, 然后设置长宽, 对齐方式, 表格属性等等。

(2) 可读性好。

(3) 制作效率, 表格的制作效率要高于Div的效率。

(4) 兼容问题。table和div在兼容问题中, table更具有优势。

table的缺点。

(1) 代码冗余,

这是构成一个表格的最基本元素 (此为一行一列的表格) 。

 

(2) 无法再利用, 比方上面已用到一个表格了, 下面还要再用个和上面相同的表格, 此时不好调用, 造成代码太多, 导致网站打开速度慢。

(3) 后期改版麻烦, 需要一个页面一个页面的更改需要变动的地方, 相当于重新设计网页。

(4) 如果用Dreamweaver制作, 做网页产生的垃圾代码过多, 也导致网站打开速度慢。

div+css优点。

(1) 代码精简,

和Table相比较代码简单了许多, 服务器读取代码的时候省了不少时间, 所以网站打开速度要比table快的很多。

 

(2) 可再利用, 比如一个网页中需要用到2～3个Div, 用户只需在css里定义一个样式, 比如定义个样式名为:abc, 插入div的时候只需

此形式即可, 可多次利用。

 

(3) 结构清晰, 可读性非常强, 也容易被搜索引擎搜索到, 优化了seo。

(4) 缩短改版时间。只要简单的修改几个CSS文件就可以改变很多页面。Table要想改变的话, 需要一个页面一个页面的去修改。

(5) 表现和内容相分离, 这点是非常符合w3c标准的。

div+css缺点。

(1) 可观性差, 用户在编辑的时候并不能立即看到编辑效果, 需要预览才可看到效果。

(2) 可读性差, 网站代码几乎全是

而且在代码页面看不到此样式。必须要进css样式才可看到定义样式。

 

(3) 操作繁琐, 相对于初入门的用户, 对代码不是很了解的人来说, 操作起来很是麻烦。

以上简单的介绍了一下Table与Div+css的优缺点, 在此给你们一点点建议:如果你是初入门的新手, 那么你就从Table入手等熟悉了它, 你对html语言也有所了解的时候再接触Div+css, 这样更方便你上手;如果你对html语言已经很了解, 那么建议你用Div+css, 虽然代码可读性比较差, 但是其他在浏览你网站的时候就很舒服, 如果你打开一个网站, 很慢的那种, 请问你还有心思在这等吗?即便他的页面做的再漂亮。所以说建站网站打开速度最重要, 其次就是你网站的页面效果了。如果你具备以上几点, 那么你的网站流量会慢慢涨起来。

摘要：网站的布局无非两种方式:div+css和table两种。这两种布局各有千秋, 本文浅谈两者之间的不同点。

关键词：table,div,css,优缺点