7、HTML表格（主要内容<table><caption><tr><th><td>标记）
<table>标记
基本格式
<table 属性1="属性值1" 属性2="属性值2" ... ... >表格内容</table>
例子：
<html> <head> <title>表格</title> <meta charset="UTF-8"><!--注释：防止乱码--> </head> <body> <table> <caption>表格的标题</caption> <tr> <th>班级</th> <th>姓名</th> <th>年龄</th> <th>成绩</th> </tr> <tr> <td>四年级一班</td> <td>张三</td> <td>16</td> <td>80</td> </tr> <tr> <td>四年级一班</td> <td>李四</td> <td>14</td> <td>90</td> </tr> <tr> <td>四年级一班</td> <td>王五</td> <td>18</td> <td>50</td> </tr> </table> </body> </html>
table标记的属性
(1)width属性
表示表格的宽度，他的值可以是像素（px）也可以是父级元素的百分百（%）
(2)height属性
表示表格的高度，他的值可以是像素（px）也可以是父级元素的百分百（%）
(3)border属性
表示表格外边框的宽度
例子：
<html> <head> <title>表格</title> <meta charset="UTF-8"> <!--注释：防止乱码--> </head> <body> <table width="960" height="300" border="1"> <caption>表格的标题</caption> <tr> <th>班级</th> <th>姓名</th> <th>年龄</th> <th>成绩</th> </tr> <tr> <td>四年级一班</td> <td>张三</td> <td>16</td> <td>80</td> </tr> <tr> <td>四年级一班</td> <td>李四</td> <td>14</td> <td>90</td> </tr> <tr> <td>四年级一班</td> <td>王五</td> <td>18</td> <td>50</td> </tr> </table> </body> </html>
(4)align属性
表格的显示位置
left---居左显示
center---居中显示
right---居右显示
默认值left
例：<table width=”960” height=”300” border=”1” align=”center”>
整个边框居中
(5)cellspacing属性
单元格之间的间距，默认是2px，单位像素
<table width=”960” height=”300” border=”1” align=”center” cellspacing=“20”>
(6)cellpadding属性
单元格内容与单元格边框的显示距离，单位像素
<table width=”960” height=”300” border=”1” align=”center” cellspacing=”20” cellpadding=”10”>
(7)frame属性
1.作用
控制表格边框最外层的四条线框
2.属性值
void(默认值):表示无边框
above:表示仅顶部有边框
below:表示仅有底部边框
hsides:表示仅有顶部边框和底部边框
lhs:表示仅有左侧边框
rhs:表示仅有右侧边框
vsides:表示仅有左右侧边框
box:包含全部4个边框
border:包含全部4个边框
(8)rules属性
作用
控制是否显示以及如何显示单元格之间的分割线
属性值
none(默认值)---表示无分割线
<table width=”960” height=”300” border=”1” align=”center” cellspacing=”20” cellpadding=”10” rules=”none”>
all---表示包括所有分割线
<table width=”960” height=”300” border=”1” align=”center” cellspacing=”20” cellpadding=”10” rules=”all”>
rows---表示仅有行分割线
clos---表示仅有列分割线
groups---表示仅在行组和列组之间有分割线
<tr>标记
定义表格的一行，对于每一个表格行，都是由一对<tr>...</tr>标记表示，每一行<tr>标记内可以嵌套多个<td>或者<th>标记
可选属性。
<html> <head> <title>表格</title> <meta charset="UTF-8"> <!--注释：防止乱码--> </head> <body> <table width="960" height="300" border="1" align="center" cellspacing="20" cellpadding="10" rules="all"> <caption align="bottom">表格的标题</caption> <tr bgcolor="red"> <th>班级</th> <th>姓名</th> <th>年龄</th> <th>成绩</th> </tr> <tr> <td>四年级一班</td> <td>张三</td> <td>16</td> <td>80</td> </tr> <tr> <td>四年级一班</td> <td>李四</td> <td>14</td> <td>90</td> </tr> <tr> <td>四年级一班</td> <td>王五</td> <td>18</td> <td>50</td> </tr> </table> </body> </html>
第一行变为红色 <tr bgcolor=”red”>
align属性---设置垂直方向对齐方式
格式：
align="值"
值
bottom---靠顶端对齐
top---靠底部对齐
middle---居中对齐
valign属性---设置水平方向对齐方式
格式：
valign="值"
值
left---靠左对齐
right---靠右对齐
center---居中对齐
<td>和<th>
1.<td>和<th>都是单元格的标记，其必须嵌套在<tr>标签内，是成对出现
2.两者的区别
<th>是表头标记，通常位于首行或者首列，<th>中的文字默认会被加粗，而<td>不会
<td>是数据标记，表示该单元格的具体数据
3.共同之处
两者的标记属性都是一样的
4.属性
bgcolor：设置单元格背景
align：设置单元格对齐方式
valign：设置单元格垂直对齐方式
width：设置单元格宽度
height：设置单元格高度
rowspan：设置单元格所占行数
例子：<th bgcolor=”red” align=”left ” rowspan=”2” >班级</th>
“班级”就会占用2行
colspan：设置单元格所占列数
HTML表格案例
<html>
<head>
<title>实战网页布局</title>
<meta charset="utf-8">
</head>
<body topmargin="0">
<table border="0" width="960" align="center" cellspacing="0" cellpadding="0">
<tr height="90" bgcolor="red" alogn="center">
<td><font size="6" color="white"><b>网页的头部</b></font></td>
</tr>
<tr>
<td>
<table bgcolor="yellow" width="30%" height="500" align="left">
<tr align="center">
<td><font size="6" color="white"><b>网页的左部分</b></font></td>
</tr>
</table>
<table bgcolor="green " width="70%" height="500" align="left">
<tr align="center">
<td><font size="6" color="white"><b>网页的右部分</b></font></td>
</tr>
</table>
</td>
</tr>
<tr height="90" bgcolor="red" alogn="center">
<td><font size="6" color="white"><b>网页的底部</b></font></td>
</tr>
</table>
</body>
</html>
8、HTML框架（主要内容<frameset><frame>标记）
什么是框架
框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果
<frameset>划分框架标记
语法格式
<frameset>....</frameset>
属性
1.cols
使用“像素数”和%分割左右窗口，“*”表示剩余部分
如果使用“*”，“*”表示框架平均分成2个
如果使用“*”，“*”，“*”表示框架平均分成3个
2.rows
使用“像素数”和%分割上下窗口，“*”表示剩余部分
3.frameborder
指定是否显示边框，0不显示，1显示
4.border
设置边框的大小，默认值5像素
<frame>子窗口标记
<frame>标记是一个单标记，该标记必须放在<frameset>中使用，在<frameset>中设置了几个窗口，就必须对应使用几个<frame>框架，而且还必须使用src属性指定一个网页。
属性
1.src
加载网页文件的URL地址
2.name
框架名称，是链接标记的target所要参数
3.noresize
表示不能调整框架大小，没有设置时就可以调整
4.scrolling
是否需要滚动条
值
1.auto
根据需要自动出现
2.yes
有
3.no
无
5.frameborder
是否需要边框
值
1.（1）
显示边框
2.（0）
不显示边框
HTML框架案例
源码展示
<html> <head> <title>HTML框架</title> <meta charset="utf-8"> </head> <frameset rows="90,*,90" frameborder="1" border="1" noresize="noresize"> <frame name="top" src="top.html"/> <frameset cols="20%,80%"> <frame name="left" src="left.html"/> <frame name="right" src="right.html" scrolling="no"/> </frameset> <frame name="bottom" src="bottom.html"/> </frameset> </html>
top
<html> <head> <title>框架</title> <meta charset="utf-8"> </head> <body bgcolor="green" topmargin="10"> <img src="logo.jpg" style="display: inline-block"/> <div style="display: inline-block"> <h2> <a href="1.html" target="_blank"><font color="white">汽车资讯网</font></a></h2> <p><font color="#fff"> 请记住我们的网址是：www.maizi.com</font></p> </div> </body> </html>
left
<html> <head> <title>框架</title> <meta charset="utf-8"> </head> <body bgcolor="#ccc" link="green" vlink="#f60" alink="yellow"> <ul> <li><a href="1.html">首页</a></li> <br/> <li><a href="/">新闻</a></li> <br/> <li><a href="/">图片</a></li> <br/> <li><a href="/">联系我们</a></li> <br/> </ul> <img src=""></img> </body> </html>
right
<html> <head> <title>框架</title> <meta charset="utf-8"> </head> <body bgcolor="#f2f2f1"> <table width="800" cellspacing="10"> <tr> <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> </td> <td><p> 2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p> </td> </tr> <tr> <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> </td> <td><p> 2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p> </td> </tr> <tr> <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> </td> <td><p> 2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p> </td> </tr> <tr> <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> </td> <td><p> 2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p> </td> </tr> <tr> <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> </td> <td><p> 2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p> </td> </tr> <tr> <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> </td> <td><p> 2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p> </td> </tr> <tr> <td> <img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> </td> <td><p> 2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p> </td> </tr> <tr> <td> <img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> </td> <td><p> 2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。2015年4月23日，继杭州加大治理大气污染，严格控制黄标车以来，杭州“汽车坟场”报废车越来越多，堆积如山的报废车远看像一座山。网友调侃，车满为患都快要溢出墙外。</p> </td> </tr> </table> </body> </html>
bottom
<html> <head> <title>框架</title> <meta charset="utf-8"> </head> <body bgcolor="green" topmargin="50"> <center><font size="2" color="white">© 2015-2099 版权所有</font></center> </body> </html>
运行结果：
