在网页中,可以使用div或表格布局,各有哪些优劣呢?
1、div布局
在网页中可以使用很多个 div,使用 div 可以将网页中的任何元素布局到网页中的任何位置。
<div style="样式设置"></div>
如下所示:
<div style="width:100%;border:1px solid red">
<div style="background-color:pink">泸职院</div>
<div style="background-color:skyblue">泸职院</div>
</div>
2、table布局
<table style="width:100%;border:1px solid red" cellspacing="0">
<tr>
<td style="background-color:pink">
泸职院
</td>
</tr>
<tr>
<td style="background-color:skyblue">
泸职院
</td>
</tr>
</table>
两个布局的最终效果如下:
同样的效果,使用 div 布局能比表格更加灵活,但是我们需要根据不同的场景使用不同的布局方式,现在我们来看看两种布局的优缺点。
3、各优缺点
div元素布局
优点
- 符合 W3C 标准。
- 搜索引擎更加友好。
- 样式的调整更加方便,内容和样式的分离,使页面和样式的调整变得更加方便。
- 节省代宽,代码冗余度低。
- 表现和结构分离,在团队开发中更容易分工合作而减少相互关联性
table元素布局
优点
- 理解比较简单。
- 不同的浏览器看到的效果一般相同。
缺点 - 一个页面可能会有大量的 table 元素,代码冗余度高。
- 增加带宽。
- 搜索引擎不喜欢这样的布局。
- 布局的时候灵活度不高。
- 显示样式和数据绑定在一起。