当前位置：文档之家 › div+css 和 table的比较

div+css 和 table的比较

  • 格式：doc
  • 大小：25.50 KB
  • 文档页数：1

div+css 和table的比较
EO优化中有一项是网站代码优化，CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，其特别是，搜索引擎喜欢简洁的代码(可以有效的增加了有效关键词在网页总代码的比重)，所以使用DIV+CSS的web标准制作的网站具有搜索引擎友好的一定优势。

其次，DIV+CSS制作的网站，在网站改版的时候比较简单，因为有很多的地方只需改CSS样式就行，而不用改动程序，从而降低了网站改版的成本。

尽管DIV+CSS具有一定优势，不过现在DIV+CSS网站制作方面还存在问题。

1、CSS的高度依赖使网页设计变得比较复杂。

和HTML4.0中的表格布局(table)比，DIV+CSS尽管不是高不可及，但要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及和应用。

2、CSS文件出现异常将会影响整个网站正常浏览。

CSS文件一般都是放在外部文件中，这一个或几个文件要是出现调用错误，那么整个网站将变得惨不忍睹。

3、CSS网站制作的浏览器兼容性问题比较突出。

DIV+CSS设计的网站在IE浏览器里面正常显示，到火狐浏览器(FireFox )中却可能面目全非(这也是为什么建议网络营销人员使用火狐浏览器的原因所在)。

幸运的是在IE4.0之后的版本中几乎不存在浏览器兼容性问题，看来各大浏览器厂商对DIV+CSS制作的网站兼容性还有待于的进一步支持。

4、经常用div+css制作整个网站的设计人员，都会知道div的布局是比较麻烦的，尤其是div里面嵌套div，还有d iv布局的时候，有些页面效果还要舍弃圆形，网站制作公司提示当前还是div+嵌套table比较好。

div 和table 的优点
html 最大的特点就是兼容性和自适应性。

html语言浏览器会自动根据页面的内容进行排版，这是普通的应用程序难以做到的，还有它的灵活性，制作一个html语言的页面要比DIV+CSS快的多。

推荐用VS2005布局，比如一个页面在VS2005的标准样式布局后，再将一个个样式取出到单独css文件中，这是比较快的办法。

其实用什么排版都是可以的，只是看你们需要的是什么，比如有的客户需要的是效果和网站制作的速度，那html语言排版就可以;如果是进行SEO优化，想做关键词推广、那最好是用DIV+CSS来实现。

两者各有千秋，适需要选择!。

合集下载

DIV+CSS布局和TABLE布局的优缺点

DIV+CSS布局和TABLE布局的优缺点

DIV+CSS布局和TABLE布局的优缺点
TABLE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使⽤，Table标签就是表格，是⽤来显⽰数据的，⽽不是⽤来布局⽹页的，虽然它有时候布局⽹页很简单。

现在绝⼤多数的⽹站都是⽤DIV+CSS布局。

这两种布局各有各的优点。

⼀、div+css布局的好处：
1.符合W3C标准，代码结构清晰明了，结构、样式和⾏为分离，带来⾜够好的可维护性。

2.布局精准，⽹站版⾯布局修改简单。

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

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

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

⼆、table布局的好处（table布局也不是⼀点⽤的没有，这点是⽏庸置疑的）
1.容易上⼿。

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

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

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

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

＜ｔ ｂｌ ｗ ｉ ｔ ａ ｅ ｄ ｈ＝” ０ ２ ０” ｂ ｒ ｅ ＝” ｏ ｄ ｒ ０”
Ｂ ｒ ｅ ： ｌ ｘ ｓ ｌ ＃Ｃ Ｃ ｏｄｒ ｐ ｏｉ ｄ Ｃ；
｝
．
ｎ ｗ＿ｉ ｅ ｌ ｔ｛ ｓ
ｓ ｙ ｅ ” ｏｒ ｅ １ ｓ ｌｄ ＃ Ｃ Ｃｌ ｔ ｌ ＝ ｂ ｄ ｒ： ｐｘ ｏｉ Ｃ ”
信 息 技 术
ＳｌＣ ＆Ｔ ＨＯＯＹ ＣＮＥ Ｅ ＮＬＧ Ｅ Ｃ
浅谈 ｔ ｂｅ ｃ ｓ ｄｖ ｃ ｓ 区别 ａ ｌ＋ ｓ 和 ｉ＋ ｓ 的
李 忠 健 （ 广东金融 学院 广东广州 ５ ５ １ １ ２） ０
摘 要： 丹站的 布局无 非两种 方式 ：ｉ ＋ｃｓ ａ ｌ 两种 。 两种布局 各有 千秋 ， ｄｖ ｓ和ｔｂｅ 这 本文 浅谈 两者之 间的不 同点 。 关键 词 ： ｂｅ ｄｖ ｃ 优 缺点 ｔｌ ａ ｉ ｓ ｓ
ｂ ｃ ｇ ｏ ｎ ： ｕ ｌ ｍａ ｅ／ ｉ Ｐ ）Ｄ — ａ ｋ ｒ ｕ ｄ ｒ（ ｇ ｓ ｌ Ｊ ｇ Ｏ 候只 需＜ｄｖ ｉ ＝” ｂ ” ／ ｉ ＞此形 式 即 ｉ ． ｉ ｄ ａ ｃ ＞＜ ｄ ｖ 可 ， 多次 利 用 。 可 ｝ （） 构清 晰 ， ３结 可读 性 非 常 强 ， 容 易被 也
会更 换 。 而Ｔａ ｌ所 有的 图标 都需 要 一 个 个 ｂｅ 重新 更 改 。 琐 程 度不 言 而 喻 。 一 个 就 是 繁 还 ／ ＞＜／ ｄ ｔ ＞ 产 品 图片 展示 这 个地 方 ， ｔｂｅ 做 就 十 用 ａ ｌ去 ＜ ｈ ｉｈ ＝” ４ ＞ 品名 称＜ ｔ ＞ ｅ ｔ ２” 产 ｇ ／ｄ 分简 单 。 但是 ｄｖ ｃｓ 全部 手 写 代码 的 。 ｉ＋ ｓ是 如 ＜／ ｒ ｔ＞ 果 你 数 学 不 好 ， 是 逻辑 思 维 能 力 不 强 的 或 ＜ｔ ｉ ｔ ” ４”ａｉ ＝” ｅ ｔ ｒ ＞＜ｉ ｇ 话 ， 手 写 出来 的 表 格 将是 乱 ７ 糟 ， ｄ ｈｅｇｈ ＝ ２ ｌ￣ ｃｎｅ ” ｍ 你 ８ 出现 表 ｓｃ ｉ ａ ｅ／ ． ｇ ｉ ｄｈ ９ ｅｇ ｔ ９ 格 重 叠和 位 置完全 不 正确 。 ｒ＝” ｇ ｓ ｆ Ｊ ”ｗ ｔ ＝” ”ｈ ｉｈ ＝” ” ｍ ｉ ｐ 因为用 ｄｖ ｃｓ ｉ＋ ｓ ／ ＞＜／ ｄ ｔ＞ 写表 格 时 ， 格 间的 逻 辑 排 列 关 系完 全 是 表 ＜ ｈ ｉｈ＝”４＞产 品名称 ＜ ｔ＞ ｅｇ ｔ ２ ” ／ｄ 靠 自己 手 写 代 码 判 断 ， 果 你 没 有 很 强 的 如 ＜／ ｒ ｔ＞ 手写代码 能力和逻辑性 ， 你所花费的时间 ， ＜ｔ ｅｇ ｔ ２ ”ａ ｇ ：“ｅ ｔｒ＞＜ｔ 比你 用ｔｂｅ 作 时 间至 少是 ２ 左右 。 别 ｄｈ ｉｈ ＝” ４ ｕ ｎ ｃｎｅ ” ｍｇ ａ ｌ￣ 倍 特 ｓｃ ｉ ｇ ｓ ｌ． ｇ’ｗ ｄ ｈ ９ ｅ ｈ ＝” ” 是 遇 到 复 杂 的 嵌 套 关 系 时 。 Ｉ ：” ｍａ ｅ／ｉＪ ’ ｐ ｉ ｔ ＝” ”ｈ ｉ ｔ ９ ｇ
超级牛最详细的Div+CSS布局案例

超级牛最详细的Div+CSS布局案例

DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。

大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。

在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。

我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。

在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。

DIV与TABLE布局的使用

DIV与TABLE布局的使用

DIV与T ABLE布局的使用下面的代码表示三行三列的布局模式，没有用css来控制这些DIV。

•源代码：•<html>•<head>•<title>T ABLE布局</title>•</head>•<body>•<!-表格布局-->•<table border=1 width=100%>•<tr height=100 bgcolor=blue>•<td colspan="3">网页头部</td>•</tr>•<tr height=250>•<td bgcolor=orange>网页体部左边</td>•<td bgcolor=yellow>网页体部中间</td>•<td bgcolor=green>网页体部右边</td>•</tr>•<tr height=80 bgcolor=gray>•<td colspan="3">网页底部</td>•</tr>•</table>•</body>•</html>•下面用DIV布局显示相同的效果，上面的效果先用HTML标记设置好，然后使用CSS代码控制它，代码是用DIV加上样式属性布局。

•源代码:•<html>•<head>•<title>DIV布局</title>•<!-表格布局-->•<diV style="background:blue;height:100px;">头部</div>•<div id="content">•<div style="width:33％;•height:250px;float:right;background:green;">网页体右边</div>•<div style="width:33％;•height:250px;float:left;background:orange;">网页体左边</div>•<div style="width:33％;•height:250px;float:left;background:yellow;">网页体中间</div>•</div>•<div style="height:80px;background:gray;">网页底部</div>••</body>•</html>在代码中用DIV表示，有的DIV被样式属性修饰，如高度、背景等，上面的方式占用代码比较多，有一种更好的方法，可把重复的样式表示成样式文件，再链接进来，本节中所提出的样式链接(以后会学到)在下面章节会具体讲解，代码中演示了提出样式到一个样式文件中的设置。