51工具盒子1.表格
表格可以更清晰地排列数据
1.1基本结构
在HTML中，一个表格一般会由table,tr,td3个部分组成 语法：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>17</td>
</tr>
</table>
</body>
</html>
1.2表格边框和边框颜色 默认情况下，表格是没有边框的，我们需要通过边框属性为其添加设置。除了表格中可以边框和边框颜色，在行、列以及在单元格中也可以设置 语法：
<table boder="边框" bordercolor="边框颜色">
</table>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框和边框颜色</title>
</head>
<body>
<table border = "5" bordercolor="red" >
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
1.3表格标题
表格一般都会有一个标题，我们可以使用caption标签来实现。 语法：
<table border="1">
<caption>表格标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
说明:一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题都是位于整个表格内的第一行 案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<table border = "1" >
<caption>表格标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
1.4表头
表头使用th标签来实现 语法:
<th>表头单元格</th>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表头</title>
</head>
<body>
<table border="1" >
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>17</td>
</tr>
</table>
</body>
</html>
1.5表格宽和高 除了表格中可以设置宽高，在行、列以及在单元格中也可以设置 。语法：
<table width="宽" heigth="高">
</table>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>宽高</title>
</head>
<body>
<table border="1" width="300" height="50">
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>17</td>
</tr>
</table>
</body>
</html>
1.6内外边距
cellspacing属性用于设置表格内部每个单元格之间的间距 cellpadding属性来设置表格边框和表格文字内容之间的距离 语法：
<table border = "1" cellspacing="5" cellpadding="10" >
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内外边距</title>
</head>
<body>
<table border="1" width="300" height="50" cellpadding="5" cellspacing="10">
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>17</td>
</tr>
</table>
</body>
</html>
1.7表格背景
表格的背景颜色属性bgcolor主要是针对整个表格的，通过bgcolor这个属性来定义颜色可以被行、列、单元格定义的背景颜色所覆盖。 语法：
<table bgcolor="背景颜色" >
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内外边距</title>
</head>
<body>
<table border="1" width="300" height="50" cellpadding="5" cellspacing="10" bgcolor="pink">
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>17</td>
</tr>
</table>
</body>
</html>
1.8背景图片
除了可以为表格设置背景颜色之外，还可以为表格设置更加美观的背景图像。 语法：
<table background="背景图片地址" >
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
</head>
<body>
<table border="1" width="300" height="300" cellpadding="5" cellspacing="10" bgcolor="pink" background="img/背景.png">
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>17</td>
</tr>
</table>
</body>
</html>
1.9单元格的合并行、合并列属性 在设计表格时，有时我们需要将"横向的N个单元格"或者"纵向的N个单元格"合并成一个单元格（类似word的表格合并），这个时候就需要用到"合并行"或"合并列" 语法：
<td colspan= "合并的列数" rowspan= "合并的行数" >
合并行案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合并行</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">单元格1</td>
<td >单元格2</td>
</tr>
<tr>
<!--<td>单元格3</td> -->
<td>单元格4</td>
</tr>
</table>
</body>
</html>
合并列案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合并列</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">单元格1</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
1.10对齐属性 表格对齐语法：
<table align= " left/center/right " >
单元格对齐语法：
<table align= "left/center/right " valign= " top/middle/ bottom" >
案例：
<table border="1" width="500" height="500" align="center">
<tr>
<td align="left" valign="top">左上</td>
<td align="left" valign="middle">左中</td>
<td align="left" valign="bottom">左下</td>
</tr>
<tr>
<td align="center" valign="top">中上</td>
<td align="center" valign="middle">中中</td>
<td align="center" valign="bottom">中下</td>
</tr>
<tr>
<td align="right" valign="top">右上</td>
<td align="right" valign="middle">右中</td>
<td align="right" valign="bottom">右下</td>
</tr>
</table>
1.11表格分组 在html中，thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。有了这些标签，结构更加清晰，也更具有可读性和可维护性。注意：在默认情况下这些元素不会影响到表格的布局。不过，以后可以使用 CSS 使这些元素改变表格的外观。 语法：
<table border="1">
<caption>表格标题</caption>
<thead><!--表头-->
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<tbody> <!--表身-->
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</tbody>
<tfoot> <!--表脚-->
<tr>
<td>标准单元格5</td>
<td>标准单元格6</td>
</tr>
</tfoot>
</table>
1.12表格嵌套 就是把嵌套的表格放入单元格 语法：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>
<!--嵌套表格-->
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
<!--嵌套表格-->
</td>
</tr>
</table>
2.iframe内联框架
2.1概述 在HTML中，我们可以使用iframe标签来实现一个内嵌框架。内嵌框架，说白了，就是在当前页面再嵌入另外一个网页 语法：
<iframe src="链接地址" ><iframe>
说明：src是必选的，用于定义链接页面的地址。
2.2Iframe属性
宽（ width ）、高（ height ） 语法：
<iframe src="链接地址" width="高度" height="宽度"> </iframe>
滚动条显示属性scrolling 语法：
<iframe src="链接地址" width="宽度" height="高度" scrolling="是否显示滚动条" ></iframe>
Scrolling的取值范围如下表
Auto == 默认值，整个框架在浏览器
Yes == 总时显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
No == 在任何情况下都不显示滚动条
name属性(实现页面间的相互跳转)
语法：
<iframe src="链接地址" name="aframe" ></iframe>
在超链接上设置target目标窗口属性为希望显示的框架窗口名
<a href="页面地址" target="aframe" >
