CSS布局和TABLE表格相比有哪些明显优势对比

html-css020

CSS布局和TABLE表格相比有哪些明显优势对比,第1张

采用CSS+DIV对网站重构日趋被大家重视起来了，尤其是大型站点，现在你随便打开一个大型门户网站，看看源文件就可以知道是否为div+css构架了，其实，在之前很多人做网页都是使用table表格嵌套，但是随着web2.0、web3.0的不断发展，这种以表格嵌套的方式已经被DIV+CSS逐步取代了，未来网页设计肯定朝着div+css的方向发展。 采用CSS+DIV进行网页相对与传统的TABLE网页布局而具有以下几个显着优势： 1、表现和内容相分离 将设计部分单独分离出来放在一个独立样式文件中，HTML文件中只存放文本信息。 2、提高搜索引擎对网页的索引效率 利用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。 3、提高页面浏览速度 对于同一个页面的视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有後者的1/2大小。 4、易于维护和改版 只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

table： 会作为块级表格来显示（类似 <table>）

table-row： 浏览器会默认创建一个表格行（类似<tr>）

table-cell： 作为一个表格单元格显示（类似 <td>和 <th>）

具体实现

结果：

左边宽度固定，右边自适应

结果：

结果：

结果：

我们要 <div class="box">B</div>" 整个可以使用 text-align: right 属性，也就是整个B框要在红色背景的右边，需要先将他们设置 inline-block 属性

结果：