1.表格标签
为数据添加表格，以清晰形式展示。
<table> 标签为整个表格。
<tr> 标签为表格的一行。
<td> 标签为表格一个中的一个单元格。
这三个标签是一个组合，都是同时出现，不会出现一个。
* 注意点：
<table>表格标签有一个border边宽的属性值，这个属性决定了边框的宽度，
默认情况下这个属性值是0,所以看不见边框。
<table>
<tr>
<td></td>
</tr>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td></tr>
<tr>
<td>qq</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>kid</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>qz</td>
<td>女</td>
<td>20</td>
</tr>
</table>
</body>
</html>
2.宽度和高度的属性
可以给table 和td 标签使用。
1. 表格的宽高默认是按内容的尺寸来调整。
2. 可以通过设置width/height属性来指定表格的宽高。
3. table中设置作用与全部的单元格，td中设置之作用与当前单元格（优先）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table便签设置长宽</title>
</head>
<body>
<table border="1" height="300" width="300">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td></tr>
<tr>
<td>qq</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>kid</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>qz</td>
<td>女</td>
<td>20</td>
</table>
</body>
</html>
table设置的长宽会平分给每行每列，
单独设置tr长或宽后，其它行或列分的长宽值会减少，
但有一个最低标准，如果平分tr长宽不能够完整的显示内容，会增加table的长宽来保证内容能够完整的显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tr标签设置长宽</title>
</head>
<body>
<table border="1" height="400" width="400">
<tr height="150" width="150">
<td>姓名</td>
<td>性别</td>
<td>年龄</td></tr>
<tr>
<td>qq</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>kid</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>qz</td>
<td>女</td>
<td>20</td>
</table>
</body>
</html>
同一行固定一个高，一列中固定一个宽,谁先设置就以谁为准，
<tr>
<td height="150">1</td>
<td height="100" >2</td>
</tr>
<tr>
<td width="150">1</td>
</tr>
<tr >
<td width="200">a</td>
</tr>
3.水平对齐
水平对齐可以给table、tr、td标签使用：
1. 在table中设置align属性可以控制表格在水平方向的对齐方式。
2. 在tr中设置align属性可以控制当前行中所有单元格中的内容在水平方向的对齐方式。
3. 在td中设置align属性可以控制单元格内容在水平方向的对齐方式。
水平设置align属性：
left： 左边
center: 居中
right: 右边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平对齐</title>
</head>
<body>
<table border="1" width="600" align="center">
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>年龄</td></tr>
<tr align="left">
<td align="left">qq</td>
<td align="center">男</td>
<td align="right">18</td>
</tr>
<tr align="center">
<td>kid</td>
<td>男</td>
<td>19</td>
</tr>
<tr align="right">
<td>qz</td>
<td>女</td>
<td>20</td>
</table>
</body>
</html>
4.垂直对齐
垂直对齐只能给tr,td标签使用。
1. 在tr中设置valign属性可以控单前行中所有单元格中的内容在垂直方向的对齐方式。
2. 在td中设置valign属性可以控制单元格内容在垂直方向的对齐方式。
垂直设置valign属性：
top： 上
middle: 中
bottom：下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直方向对齐</title>
</head>
<body>
<table border="1" height="300">
<tr valign="top">
<td>姓名</td>
<td valign="middle">性别</td>
<td valign="bottom">年龄</td></tr>
<tr>
<td valign="top">qq</td>
<td>男</td>
<td valign="bottom">18</td>
</tr>
<tr valign="bottom">
<td valign="top">kid</td>
<td valign="middle">男</td>
<td>19</td>
</tr>
</table>
</body>
</html>
5.外边距和内边距的属性
外边距：单元格与单元格之间的距离, cellspacing 属性默认为2px。
内边距：单元格与文本之间的距离， cellpadding 属性默认为1px。
边距属性只能给table标签使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
</head>
<body>
<table border="1" height="400" width="400" cellspacing="20">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td></tr>
<tr>
<td>qq</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>kid</td>
<td>男</td>
<td>19</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距</title>
</head>
<body>
<table border="1" height="300" width="300" cellpadding="30">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td></tr>
<tr>
<td>qq</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>kid</td>
<td>男</td>
<td>19</td>
</tr>
</table>
</body>
</html>
6.表格/单元格背景色
bgcolor 属性设置table、tr、td 的背景颜色。
table标签设置了背景颜色整个表格、表单元格内外边距都变化。
tr标签设置了背景颜色当前行所有单元格，包含内间距变化。
td标签设置了背景颜色单前单元格，包含内间距变化。
以背景颜色设置一个细线表格。
表格设置为黑色的，外间距也是黑色了，将外边距设置为0px,
所有的行设置为白色,
某个单元格设置为红色，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色</title>
</head>
<body>
<h1>细线表格</h1>
<hr>
<table bgcolor="black" border="0">
<tr bgcolor="white">
<td bgcolor="red">1</td>
<td>2</td>
</tr>
<tr bgcolor="white">
<td>3</td>
<td>4</td>
</tr></table>
</body>
</html>
7.表格中的其他标签
caption标签：表格标题标签，默认相对于当前表格居中。
th标签：表格每列的标签，字体加粗并居中。
在表格中有两种单元格，th存当前列标题，td存数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标题</title>
</head>
<body>
<table border="1">
<caption>信息统计</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>kid</td>
<td>男</td>
<td>19</td>
</tr>
<tr>
<td>qz</td>
<td>nv</td>
<td>18</td>
</tr>
</table>
</body>
</html>
8.表格练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格练习</title>
</head>
<body>
<table border="1" align="center" bgcolor="black" cellspacing="0">
<caption>百度热搜小说排行榜</caption>
<tr bgcolor="#ff4500">
<th>排名</th>
<th>书名</th>
<th>作者</th>
<th>趋势</th>
<th>热度指数</th>
<th>相关链接</th>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td>万古神帝</td>
<td>飞天鱼</td>
<td><img src="images/top.png" alt=""></td>
<td>803180</td>
<td>
<a href="#">图片</a>
<a href="#">贴吧</a>
<a href="#">百科</a>
</td>
<tr bgcolor="white" align="center">
<td>2</td>
<td>伏天氏</td>
<td>净无痕</td>
<td><img src="images/bottom.png" alt=""></td>
<td>531725</td>
<td>
<a href="#">图片</a>
<a href="#">贴吧</a>
<a href="#">百科</a>
</td>
<tr bgcolor="white" align="center">
<td>3</td>
<td>武炼巅峰</td>
<td>莫默</td>
<td><img src="images/top.png" alt=""></td>
<td>396670</td>
<td>
<a href="#">图片</a>
<a href="#">贴吧</a>
<a href="#">百科</a>
</td>
<tr bgcolor="white" align="center">
<td>4</td>
<td>逆天邪神</td>
<td>火星引力</td>
<td><img src="images/bottom.png" alt=""></td>
<td>381596</td>
<td>
<a href="#">图片</a>
<a href="#">贴吧</a>
<a href="#">百科</a>
</td>
</table>
</body>
</html>
9.表格的完整结构
由于表格中存储的数据比较复杂,为类似方标管理和阅读以及提升语义，对表格中存储的数据进行分类：
1.表格标题
2.表格表头的信息
3.表格主体的信息
4.表格的尾页信息(脚注或表注)
| 学生信息 |
表格标题 |
|
|
| 姓名 |
年龄 |
身高 |
表格表头 |
| kid |
19 |
165 |
表格信息 |
| qz |
18 |
160 |
|
| qq |
18 |
155 |
|
| 平均值 |
18.33 |
160 |
表格尾页 |
caption标签：指定表格标题
thead标签：指定表格表头信息
tbody标签：指定表格内容标签
tfoot标签：指定表格尾页标签
注意点：
1.如果表格没有编写tbody浏览器会自动添加。
2.thead标签和tfoot标签有自己的默认搞定，不会随着表格的高度标化而变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的结构</title>
</head>
<body>
<table border="1" align="center" height="400px" width="500px">
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
</tr>
</thead>
<tbody>
<tr>
<td>kid</td>
<td>19</td>
<td>165</td>
</tr>
<tr>
<td>qz</td>
<td>18</td>
<td>160</td>
</tr>
<tr>
<td>qq</td>
<td>18</td>
<td>155</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均值</td>
<td>18.33</td>
<td>160</td>
</tr>
</tfoot>
</table>
</body>
</html>
10.单元格合并
colspan标签： 水平方向合并单元格，
rowspan标签： 垂直方向合并单元格。
<td colspan="2"></td> 水平合并两个单元格
<td rowspan="2"></td> 垂直合并两个单元格
<td colspan="2" rowspan="2"></td> 多行多列合并四个单元格
注意点：
合并的单元格是新建的，不是合并原有的，合并单元格的方向是向下或向后合并的。
这样会导致单元格会多出,单元格会被插入的单元挤到后面去→，不需要删除多余的部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单元格合并</title>
</head>
<body>
<table bgcolor="black" height="300px" width="300px" align="center">
<tr bgcolor="white">
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="white">
<td rowspan="2"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
10.1单元合并练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单元格合并付练习</title>
</head>
<body>
<table bgcolor="black" height="300px" width="200px" cellspacing="1px" align="center">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td colspan="3"></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br><br><br>
<hr>
<br><br><br>
<table bgcolor="black" height="300px" width="200px" cellspacing="1px" align="center">
<tr bgcolor="white">
<td></td>
<td rowspan="4"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
</table>
<br><br><br>
<hr>
<br><br><br>
<table bgcolor="black" height="300px" width="200px" cellspacing="1px" align="center">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td colspan="2"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
</tr>
</table>
<br><br><br>
<hr>
<br><br><br>
<table bgcolor="black" height="300px" width="200px" cellspacing="1px" align="center">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr bgcolor="white">
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>