HTML学习13：div和表格布局_div表格布局

在网页中，可以使用div或表格布局，各有哪些优劣呢？

1、div布局

在网页中可以使用很多个 div，使用 div 可以将网页中的任何元素布局到网页中的任何位置。

<div style="样式设置"></div>
1

如下所示：

<div style="width:100%;border:1px solid red">
  <div style="background-color:pink">泸职院</div>
    <div style="background-color:skyblue">泸职院</div>
</div>
1
2
3
4

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>
1
2
3
4
5
6
7
8
9
10
11
12

两个布局的最终效果如下：

同样的效果，使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。

3、各优缺点

div元素布局
优点

• 符合 W3C 标准。
• 搜索引擎更加友好。
• 样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
• 节省代宽，代码冗余度低。
• 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

table元素布局
优点

• 理解比较简单。
• 不同的浏览器看到的效果一般相同。
  缺点
• 一个页面可能会有大量的 table 元素，代码冗余度高。
• 增加带宽。
• 搜索引擎不喜欢这样的布局。
• 布局的时候灵活度不高。
• 显示样式和数据绑定在一起。