为了让网页的布局更加美观，HTML提供了容器的概念，即在网页中占用一块区域,在此区域内可以添加多种标签,且这些标签只会在该区域内显示，使得标签有了各自的容器，能在各自的区域内显示内容。
<div> 标签
在HTML中使用<div>标签来建立一个容器。其使用形式如下!
<div>其他标签</div>
被<div>标签所包含的标签都隶属于同一个容器,当使用<div>标签设置属性样式(即style通用样式)时
整个容器都会显示此样式。
示例代码:
<body>
<h1 >我是标题1</h1>
<div style="background: antiquewhite">
<h2>我纻蜞居是腭绠纩定标题2</h2>
<p>我这里可以输入一个段落</p>
</div>
</body>
第2行代码设置了标题标签，此标签并不在容器内，因此不受容器样式的影响。
第3行代码使用<div>标签创建了一个容器，并设置了背景颜色第4行和第5行代码分别创建了<h2>和<p>标签，这两个标签都包含在同一个容器中。
保存代码文件并使用浏览器打开后的网页显示效果如图14-22所示，容器中的内容都被填充了背景颜色。
布局
当需要对网页页面进行布局时，需要设置<div>标签的相应属性。例如以下使用形式:
<div style="width:容器宽度;height;容器高度;float:容器位置"></div>
参数width和height:表示容器的宽度和高度，长度单位为px,即像素。参数foat:表示容器的位置,值可以为right(靠右侧)、left(靠左侧)、bottom(靠底部)、top(靠顶部)。示例代码:
<body>
<h1 >我是标题1</h1>
<div style="background: antiquewhite; width:500px;height: 400px">
<h2>我是标题2</h2>
<div style="background: brown;width:200px;height:300px;float: left">
<p>我这里可以输入一个段落</p>
<p>python <span style="color:blue">办公</span> 自动化</p>
</div>
<d1v style="background:darkcyan; width:300px;height:300px;float:right">
<h3>我是标题3</h3>
</div>
<p>最后一段内容</p>
</div>
</body>
该代码中包含3个<div>容器标签，其中第1个容器标签中包含另外两个容器标签。第3行代码创建了第1个容器(容器1),并设置容器的宽度为500px，高度为400px，背景颜色为antiquewhite.
第5行代码创建了第2个容器(容器2)，第9行代码创建了第3个容器(容器3)，这两个容器都隶属于第1个容器。且容器2的宽度为200px，高度为300px，位置为靠左侧。容器3由于位置是靠右侧，因此会紧靠容器2。容器2的右边还剩余大量空间，因此容器3位于容器2的右边。若容器2右边剩余空间不够容纳容器3，则会换到容器2下面的位置，并且超出容器1的边界。
保存代码文件并使用浏览器打开后的网页显示效果如图14-23所示。如果需要在容器2中显示内容，只需将对应标签嵌套在容器2的标签内即可。
创建表格
在HTML网页中能比较方便地创建表格,通常来说表格也可以作为网页页面的布局。本节将主要介绍如何在网页中创建表格。
表格标签
在HTML中可以使用表格标签<table>创建表格,其中表格的行数由<tr>标签的个数决定,表格的列数由<tr>标签中<td>标签的个数决定。
示例代码:
<body>
<h1 >创建表格</h1>
<table border="2">
<tr>
<td>第1行中的第1格</td>
<td>第1行中的第2格</td>
</tr>
<tr>
<td>第2行中的第1格</td>
<td>第2行中的第2格</td>
</tr>
</table>
</body>
新3行代码使用<table>标签创建了表格，其中属性border表示表格的边框样式，其数据类型为数值类型。
添加表格表头
如果需要在表格中插入表头，可以使用<th>标签来实现。其使用形式如下
<th colspan='2'>表格表头内容</th>
属性colspan:表示表头单元格可横跨的列数。也可以使用rowspan属性,表示表头单元格可横跨的行数
示例代码:
<body>
<h1 >我是标题1</h1>
<table border="2">
<th colspan="2">我是表格表头内容</th>
<tr>
<td>第1行中的第1格</td>
<td>第1行中的第2格</td>
</tr>
<tr>
<td>第2行中的第1格</td>
<td>第2行中的第2格</td>
</tr>
</table>
</body>
第4行代码设置表头的内容为"我是表格表头内容"，表头单元格可横跨的列数为2
添加表格标题
创建表格标题可以使用标签<caption>来实现。其使用形式如下:
<caption>标题内容</caption>
<caption>标签必须位于<table>标签内,且每个表格只能定义一个标题,默认标题位于表格的上方,且居中对齐。
示例代码:
<body>
<h1 >添加表格标题</h1>
<table border="2">
<caption>我是表格标题</caption>
<tr>
<td>第1行中的第1格</td>
<td>第1行中的第2格</td)
</tr>
<tr>
<td>第2行中的第1格</td>
<td>第2行中的第2格</td>
</tr>
</table>
</body>
第4行代码在表格中添加了表格标题标签<caption>,且其内容为"我是表格标题"。如果不使用表格标题标签,而是用文本标签实现将内容设置在表格的上方，会导致表格无法跟着文本标签内容的移动而移动。