表格与<div>标签
一、基本表格
1、基本标签介绍
<table>表格标签：表格的其他标签需要在次标签里才有效</table>
<tr>行标签：在表格中有几组tr标签就表示有几行</tr>
<td>单元格标签:标识在当前行下有几个单元格，也就是有几列，通常也叫列标签</td>
<th>表头标签：用来表示表格的表头，特点是文字自动加粗</th>
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<h1 align="center">基本表格——考试成绩表</h1>
<table align="center">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>王佳</td>
<td>94分</td>
<td>89分</td>
<td>56分</td>
</tr>
<tr>
<td>李翔</td>
<td>76分</td>
<td>85分</td>
<td>88分</td>
</tr>
<tr>
<td>张颖佳</td>
<td>89分</td>
<td>86分</td>
<td>97分</td>
</tr>
</table>
</body>
</html>
2、表头的设置
<caption>表格的标题</caption>
<th>表格的表头</th>
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单课程表</title>
</head>
<body>
<table align="center">
<caption>简单课程表</caption>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
</table>
</body>
</html>
二、表格的高级应用
1、表格的样式
除基本表格外，表格还可以添加一些基本样式属性，比如宽度高度，对齐方式，插入图片等
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品表格</title>
</head>
<body>
<table align="center" width="60%">
<caption>商品表格</caption>
<tr bgcolor="#9acd32">
<th>潮流前沿</th>
<th>手机酷玩</th>
<th>品质生活</th>
<th>国际清沟</th>
<th>个性推荐</th>
</tr>
<tr bgcolor="yellow">
<td>换新</td>
<td>手机馆</td>
<td>必抢</td>
<td>识货</td>
<td>囤货</td>
</tr>
<tr bgcolor="#bc8f8f ">
<td>品牌精选新品</td>
<td>手机新品</td>
<td>聚超值卖封了</td>
<td>全球最热好货</td>
<td>居家必备</td>
</tr>
<tr>
<td><img src="img/1.jpg" vspace="50"></td>
<td><img src="img/2.jpg" vspace="50"></td>
<td><img src="img/3.jpg" vspace="50"></td>
<td><img src="img/4.jpg" vspace="50"></td>
<td><img src="img/5.jpg" vspace="50"></td>
</tr>
</table>
</body>
</html>
2、表格的合并
<td colspan=" ">跨列</td>
<td rowspan=" ">跨行</td>
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表</title>
</head>
<body background="img/11.gif">
<h1 align="center"><em>课 程 表</em></h1>
<table align="center" bgcolor="aqua" border="2">
<tr height="20">
<th width="50"></th>
<th width="20"></th>
<th width="60">星期一</th>
<th width="60">星期二</th>
<th width="60">星期三</th>
<th width="60">星期四</th>
<th width="60">星期五</th>
</tr>
<tr height="20" align="center">
<td width="50" rowspan="2">上午</td>
<td width="20">1</td>
<td width="60">数学</td>
<td width="60">语文</td>
<td width="60">英语</td>
<td width="60">体育</td>
<td width="60">语文</td>
</tr>
<tr height="20" align="center">
<td width="20">2</td>
<td width="60">音乐</td>
<td width="60">英语</td>
<td width="60">政治</td>
<td width="60">美术</td>
<td width="60">音乐</td>
</tr>
<tr height="20" align="center">
<td rowspan="2">下午</td>
<td width="20">3</td>
<td width="60">舞蹈</td>
<td width="60">化学</td>
<td width="60">生物</td>
<td width="60">历史</td>
<td width="60">政治</td>
</tr>
<tr height="20" align="center">
<td width="20">4</td>
<td width="60">数学</td>
<td width="60">体育</td>
<td width="60">生物</td>
<td width="60">历史</td>
<td width="60">美术</td>
</tr>
</table>
</body>
</html>
3、表格的分组
语法：<colgroup>
<col style="属性">
</colgroup>
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表</title>
</head>
<body background="img/11.gif">
<h1 align="center"><em>课 程 表</em></h1>
<table align="center" bgcolor="aqua" border="2px">
<colgroup>
<col style="background:yellowgreen">
<col style="background:white">
<col style="background:yellow">
<col style="background:blueviolet">
<col style="background:blue">
</colgroup>
<tr height="20">
<th width="50"></th>
<th width="20"></th>
<th width="60">星期一</th>
<th width="60">星期二</th>
<th width="60">星期三</th>
<th width="60">星期四</th>
<th width="60">星期五</th>
</tr>
<tr height="20" align="center">
<td width="50" rowspan="2">上午</td>
<td width="20">1</td>
<td width="60">数学</td>
<td width="60">语文</td>
<td width="60">英语</td>
<td width="60">体育</td>
<td width="60">语文</td>
</tr>
<tr height="20" align="center">
<td width="20">2</td>
<td width="60">音乐</td>
<td width="60">英语</td>
<td width="60">政治</td>
<td width="60">美术</td>
<td width="60">音乐</td>
</tr>
<tr height="20" align="center">
<td rowspan="2">下午</td>
<td width="20">3</td>
<td width="60">舞蹈</td>
<td width="60">化学</td>
<td width="60">生物</td>
<td width="60">历史</td>
<td width="60">政治</td>
</tr>
<tr height="20" align="center">
<td width="20">4</td>
<td width="60">数学</td>
<td width="60">体育</td>
<td width="60">生物</td>
<td width="60">历史</td>
<td width="60">美术</td>
</tr>
</table>
</body>
</html>
4、div标签
块级标签，用于设置文字，表格，图片的摆放位置
属性：
id：规定div的名字，常与CSS样式结合，实现对网页中元素的控制
align:设置标签中元素的对其方式
class:用来设置标签中元素的样式，其值为css样式中的class的选择符
style:其值为CSS中的属性值，在各属性值之间使用分隔符
5span标签
语法：
<span>需要改变样式的文字</span>
