本章目录
1.任务目标
我们生活处处离不开表格，我们比如说，成绩单，菜单，等。都是用表格做出来的，表格在我们生活中是必不可少的，生活处处离不开表格，所以我们这一小结学习一下表格的使用。
2.表格介绍
标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 、 元素定义表格行，
| 或 | 元素组成表格结构；其中： |
| 元素定义表头， | 元素定义表格单元。 为了让表格更美观，我们会用到：border，colspan，rowspan，align，bgcolor 等来美化表格，具体在本文都有讲解； |
3.表格的标签
在HTML定义表格的时候，有以下标签供我们使用
NO
表格标签
用处
1
table
定义表格，生成的表格在一对table/table中；
2
caption
定义表格标题，当表格需要标题时，使用caption表格标题caption
3
thead
定义表格的页眉
4
tbody
定义表格的主体
5
tfoot
定义表格的页脚
6
th
定义表格的表头，一般是表头中的内容会被加黑；
7
tr
定义表格的行
8
td
定义表格单元格
9
col
定义用于表格列的属性
10
colgroup
11
单元格边框(border)
4.代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!--可以用width=""设置表格的宽度，可以用height=""设置表格的高度--> <body> <!--table是表格的标签，tr表格每行可包裹td，td是用于写每行表格内容，table > tr > td,border可以设置表格边框大小，如果没有border 表格将没有边框--> <table border="1"> <caption> <b>学生成绩单</b></caption> <!--thead表示表格头部--> <thead> <!--th一般用于标签头部可以表示一列标题，他可以默认文字加粗--> <th>姓名</th> <th>性别</th> <th>成绩</th> <tr> </thead> <!--tbody表示表格内容--> <tbody> <td>张三</td> <td>男</td> <td>56</td> </tr> <tr> <td>李四</td> <td>女</td> <td>96</td> </tr> <tr> <td>赵五</td> <td>男</td> <td>97</td> </tr> </tbody> <!--tfoot表示表格结尾--> <tfoot> <tr> <td>总结</td> <td>成绩很满意都考得不错</td> </tr> </tfoot> </table> </body> </html>
效果如下
5.小结
我们生活中处处离不开表格，表格在我们日常生活或者再代码中非常受欢迎我么要熟练运用表格。
