1. 表格简介
表格在日常生活中使用的非常多，比如excel就是专门用来创建的工具。表格就是用来表示一些格式化的数据，比如： 课程表，银行对账单等。在网页中也可以创建出不同的表格。
2. table 创建表格
- 在table标签中使用tr来表示表格中的一行，有几行就有几个tr
- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
- conspan 属性横向的合并单元格
- rowspan 属性设置纵向的合并单元格
- table 是一个块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" width="40%" align="center">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</table>
</body>
</html>结果：
如果要合并行A3,使A3占两行：去掉B3,添加rowspan 给A3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" width="40%" align="center">
<tr>
<td>A1</td>
<td>A2</td>
<!-- 合并行 -->
<td rowspan="2">A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</table>
</body>
</html>结果：
如果要合并列C2,使C2占两行：去掉C3,添加colspan 给C2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" width="40%" align="center">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<!-- 合并列 -->
<td colspan="2">C2</td>
</tr>
</table>
</body>
</html>结果：
border-collapse 设置表格的边框合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
table {
/*设置宽度*/
width: 300px;
/*设置居中*/
margin: 0 auto;
/*设置边框合并*/
border-collapse: collapse;
}
/*设置边框*/
th, td {
border: 1px solid black;
}
/*设置隔行变色*/
tr:nth-child(even) {
background-color: #bfa;
}
/*鼠标移入tr后，改变颜色*/
tr:hover {
background-color: #ff0;
}
</style>
</head>
<body>
<table>
<tr>
<!-- th标签表示表头的内容，和td用法一样，不同的是它有一些默认效果-->
<th>序号</th>
<th>姓名</th>
<th>班级</th>
</tr>
<tr>
<td>1</td>
<td>唐僧</td>
<td>一班</td>
</tr>
<tr>
<td>2</td>
<td>孙悟空</td>
<td>二班</td>
</tr>
<tr>
<td>3</td>
<td>猪八戒</td>
<td>三班</td>
</tr>
<tr>
<td>4</td>
<td>沙和尚</td>
<td>四班</td>
</tr>
</table>
</body>
</html>结果：
光标移入时：
长表格
有些情况下的表格比较长，这时需要将表格分为三部分，表头，表格主体，表格底部。
-
在HTML中卫我们提供了三个标签：
- thead 表头
- tbody 表格主体
- tfoot 表格底部
这三个标签的作用，就来区分表格的不同部分，它们都是table的子标签，都需要直接写到table中，tr需要写在这些标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table>
<!--表头-->
<thead>
<tr>
<th>日期</th>
<th>支出</th>
<th>收入</th>
<th>合计</th>
</tr>
</thead>
<!-- 表格底部 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
<!-- 表格主体 -->
<tbody>
<tr>
<td>10.1</td>
<td>100</td>
<td>200</td>
<td>100</td>
</tr>
<tr>
<td>10.2</td>
<td>100</td>
<td>200</td>
<td>100</td>
</tr>
<tr>
<td>10.3</td>
<td>100</td>
<td>200</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>结果：
注意：
thead中的内容，永远会显示在表格的头部
tbody中的内容，永远会显示在表格的中间
tfoot中的内容，永远会显示在表格的底部
- 如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr都放在tbody中。所以注意：tr并不是table的子元素，tr是tbody的子元素。通过table>tr无法选中行，需要通过tbody>tr
table> tr:nth-child(even) {
background-color: #bfa;
}结果：#bfa背景颜色并未选中偶数行
/*设置隔行变色*/
tbody> tr:nth-child(even) {
background-color: #bfa;
}结果：浏览器默认加了tbody
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。