1. 表格简介表格在日常生活中使用的非常多，比如excel就是专门用来创建的工具。表格就是用来表示一些格式化的数据，比如： 课程表，银行对账单等。在网页中也可以创建出不同的表格。2. table 创建表格在table标签中使用tr来表示表格中的一行，有几行就有几个tr在tr中需要使用td来创建一个单元格，有几个单元格就有几个tdconspan 属性横向的合并单元格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
