css table布局？css布局
老铁们，大家好，相信还有很多朋友对于css table布局和css布局的相关问题不太懂，没关系，今天就由我来为大家分享分享css table布局以及css布局的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！
请说明HTML中Table和DIV+CSS布局的区别
HTML中TABLE布局是早以前CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单，但是一个大型的网页如果用表格嵌套的表格来布局的话，对于网页的显示是极为不利的，因为，一个表格只有在其完全读取完才会显示出来，大型的表格要读取完需要时间，不利于用户的阅读，用户对网页的等待时间是很短的，你的网页很慢很慢的显示出来的时候，用户早就关掉你的网页开始别的旅程了。
而采用CSS结合DIV来对网页进行布局正是顺应时代发展而出现的，网页的显示不再依托表格，而是嵌套的DIV标签，表格回归她应有的作用：显示数据；
DIV+CSS布局最大的优点还在于，网页布局的更改性，哪天你想要改变网页布局的话，只需要更改你的CSS文件即可，而没有必要像以前那样，重新编制一份大型的表格嵌套表格的网页布局，极大的方便了网页的维护和优化工作。
现在有很多网站都有主题更换功能， QQ空间，人人网，百度空间、新浪博客等都是将一系列主题CSS文件放置在一起，供你选择替换，如果是表格的布局就不可能有这种功能
Div+Css和Table功能实现各有什么优缺点
DIV与TABLE本身并不存在什么优缺点，所谓web标准只是推荐的是正确的使用标签，好比说：DIV用于布局，而TABLE则本来就是转二维数据的。让TABLE做该做的事，并不是说页面里不出现TABLE就是多么多么牛。
用DIV进行排版的优势就是我不说，大家应该都比较清楚。DIV是标准，是大势所趋，但并不意味着所有的页面都适合用它来做。
中国的门户和国外的有很大的区别，中国网民并不喜欢信息量少的页面，YAHOO到了中国页面上的内容就多了不少，而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改了回来。正式由于中国的国情造就了搜狐、新浪这样门户。
为什么DIV不适合他们？下面我从几个方面来逐一说明：
精简代码：
大家都说DIV的布局精简代码，但是用DIV替代TABLE所节约的代码又被CSS（样式）所占用，而这些样式大多用于控制DIV的排版布局。那你会说了，CSS可以放在外部重用啊，要想得到这个问题的答案请往下看。
重用性与下载量：
统一使用一个.css的样式表文件，可以实现修改一次，全站修改的效果，这样使得维护的成本更低。但是请大家换一个角度想，如果所有页面在加载时都要访问一个文件，那这个文件每天的下载量，特别时在搜狐、新浪的网站平台上将达到几亿次，这就需要后面有很多台前端web服务器在做支撑，那后台的成本无形中也提高了很多。如果后台支撑没有做好，那么页面就会出现花屏，之前所作的工作也是白费。很多人会问，这样的几率太小了。我们所作的工作就是为了避免这一两次意外的发生，如果意外发生了，对于门户后果将是不堪设想的。
HTTP通讯：
统一的样式表文件采用外部调用的形式，这样每次加载单个页面都会多一次对服务器的http请求服务器都会增加一次响应，这样对前端web服务器会是很大的消耗。而原来很长时间都是将css和js写在页面前端（大家可以看看sohu和sina的页面，大多都是采用这样的形式），而不是作为外部调用的形式，也是为了尽量避免给服务器增加消耗。
页面缓存：
每次用户访问的页面，都会在浏览器缓存中保存一定时间，以保证用户下次再访问该页面时能够大大提高页面显示速度。而每次修改都会使页面重新下载，对于每个外部导入的样式文件也是如此，如果CSS文件修改，那么访问网站的每一个页面都会重新下载，而以往的将样式写在页面中的方式，只是修改的页面需要重新下载。
兼容性：
对于CSS（样式表）并不是所有浏览器的所有版本都支持的很好，比如IE5以前的浏览器对于CSS的支持就不是很好。而现在使用IE5以前版本浏览器的用户不在少数，这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试，以保证兼容性，无形中也增加很多工作量（至少我接触的开发人员制作div页面比table页面的标准时间要长一些）。
横切与延展性：
横切——传统的布局方式为了使页面下载的更快，把页面自上而下分成若干个块，但是往往采用DIV进行布局的页面都会出现这样的情况，由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应，而出现留白。
相比之下传统的table方式更容易规避这样情况的发生。
以上我们只是讨论某一技术在某一领域的可用性，而非技术本身。
说了这么多并不是说DIV这种布局方式不好，而是说我们应该正确的看待Table在以内容为基础的大型门户中的作用，而不是人云亦云。之所以DIV的布局方式没有在大型网站应用，不是说门户没有用DIV是技术落后，是里面的人没有前瞻性，而是多种原因决定的。网易之所以全部采用DIV的方式是因为内容并不是他们主攻方向。而对于其他门户来说，这样的决策是要靠时间来验证的。只是现在这个时机还不成熟而已。
div+css三行两列布局怎么写,求大神解答
DIV+CSS三行两列经典布局
这个XHTML1标准的DIV+CSS布局是著名网页设计师2004年发布在《网页设计师》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下（在原代码的基础上作了一定规范整理）：
<html>
<head>
<metahttp-equiv='Content-Type'content="text/html;charset=gb2312">
<title>XHTML之经典三行两列布局-seobbs.net</title>
<styletype="text/css">
body
{background:#999;text-align:center;color:#333;fontfamily:Verdana,Arial,Helvetica,sans-serif;}
a:link,visited
{color:#004592;text-decoration:none;}
a:hover{color:#004592;text-decoration:underline;}
a:active{color:#004592;text-decoration:none;}
img{border:0px;}
#header{margin-right:auto;margin-left:auto;padding:0px;width:776px;background:#EEE;height:60px;text-align:left;}
#contain{margin-left:auto;margin-right:auto;width:776px;}
#mainbg{float:left;padding:0px;width:776px;background:#60A179;}
#right{float:right;margin:2px0px2px0px;padding:0px;width:574px;background:#ccd2de;text-align:left;}
#left{float:left;margin:2px2px0px0px;padding:0px;background:#F2F3F7;width:200px;text-align:left;}
#footer{clear:both;margin-right:auto;margin-left:auto;padding:0px;width:776px;background:#EEE;height:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<body>
<divid="header">header</div>
<divid="contain">
<divid="mainbg">
<divid="right">
<divclass="text">text<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p></div></div><divid="left"><divclass="text">left</div></div></div></div>
<divid="footer">footer</div>
</body>
</html>
效果演示及代码：www.st539.com/news_view.asp?id=123
SEO角度分析这个布局的优势：
我们先按网页设计惯例来看页面中的内容分布，一般情况下，头部（A区）为站点导航，底部（D区）为辅助导航及版权信息等，左侧（B区）会放搜索、列表、排行等功能性内容，核心内容就集中在右侧（C区）。
如上图标识所示，按传统的布局，代码编写顺序是“A->B->C->D”，也可以理解为“功能->功能->核心内容->功能”。
都知道，搜索引擎蜘蛛爬行时，是按着页面代码顺序自上而下的，这种情况下蜘蛛很难最快的爬行到核心内容；而当页面代码过多的时候蜘蛛完全有可能没有爬行到核心内容就折回，抓取到的是与其他页面一样的功能内容时，这个页面就成为相似网页。
为了避免这样的情况，包括新浪、搜狐、网易在内的很多网站（可能也包括你^_^），都在设计时将页面中B区和C区对调。
再来看本布局方式，页面代码顺序是“A->C->B->D”，按内容分布可以理解为“功能->核心内容->功能->功能”，在不改变页面展示的情况下，将核心内容部分放到了前面。
这样，蜘蛛爬行时就能在最短时间内索引到网页的核心内容。
如果你还想了解更多这方面的信息，记得收藏关注本站。