第3章表格和表单《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）》

学习目标/Target掌握表格标签的使用方法，能够使用表格标签创建表格掌握CSS控制表格样式，能够使用CSS设置表格的样式掌握表格标签属性的使用方法，能够使用colspan和rowspan属性来合并单元格掌握表单标签的使用方法，能够使用表单标签创建表单

学习目标/Target掌握input标签的使用方法，能够定义不同的表单控件掌握label标签的使用方法，能够定义表单控件的标签文本掌握textarea标签的使用方法，能够定义多行文本输入框掌握form标签的使用方法，能够使用form标签创建表单

学习目标/Target掌握图书列表页面的制作方法，能够完成图书列表页面的开发掌握安全教育活动调查问卷页面的制作方法，能够完成安全教育活动调查问卷页面的开发掌握select、optgroup、option标签的使用方法，能够定义下拉菜单

章节概述/Summary在网页中，我们常常使用表格来清晰地展示各种信息。表格的应用场景非常广泛，如展示统计数据、产品比较情况以及价格列表等。此外，我们还经常使用表单来收集用户反馈的信息。表单适用于多种场景，如用户注册、用户登录、联系我们以及调查问卷填写等。通过合理运用表格和表单，我们可以提高网页的用户体验和交互性，使得网页内容更加丰富、有序且易于操作。本章将详细讲解如何使用表格和表单。

目录/Contents3-13-2图书列表页面安全教育活动调查问卷页面

图书列表页面项目3-1

项目需求书籍是人类进步的阶梯。通过阅读，我们不仅能深入了解世界，还能激发思考、培养想象力、提升审美；书籍是智慧的媒介，它们承载并传递了人类的智慧和经验，为我们个人的成长和进步提供了不可或缺的助力。

项目需求本项目旨在开发一个用于展示图书列表的页面，主要包含编号、图书名称、作者信息，其效果如下图所示。

知识储备先定一个小目标！掌握表格标签的使用方法，能够使用表格标签创建表格1.表格标签

知识储备1.表格标签网页中的表格由一系列单元格组成，每个单元格用于展示一项数据。在HTML中，可以使用表格标签完成表格的创建。

知识储备1.表格标签常用的表格标签如下表所示。标签说明table用于定义表格。在table标签内可以放置表格的标题、表格的行、数据单元格等caption用于定义表格的标题，并且标题会显示在表格上方居中的位置thead用于定义表格的头部区域，通常包含列标题或表头信息tfoot用于定义表格的脚注区域，通常包含表格的摘要、统计数据或其他附加信息tbody用于定义表格的主体区域，通常包含行和列的数据

知识储备1.表格标签标签说明tr用于定义表格的行，每个tr标签表示该表格中的一行td用于定义数据单元格，每个td标签表示一个单元格，数据都存储在单元格中th用于定义表头单元格。通常用于表示行标题或表头信息。与td标签不同，th标签中的文本通常会被自动加粗和居中显示，以突出表头的重要性

知识储备1.表格标签创建表格结构的完整语法格式如下table?caption标题/caption?thead??tr???th表头单元格1/th???th表头单元格2/th???th表头单元格3/th??/tr?/thead（接下一页）

知识储备1.表格标签?tbody??tr???td数据单元格1/td???td数据单元格2/td???td数据单元格3/td??/tr??……?/tbody（接下一页）

知识储备1.表格标签?tfoot??tr???td表格脚注1/td???td表格脚注2/td???td表格脚注3/td??/tr?/tfoot/table在实际使用中，table、tr、th和td是构建基本表格结构的必需元素。而thead、tbody、tfoot和caption是可选的，可以根据实际需求决定是否使用。

知识储备先定一个小目标！掌握CSS控制表格样式，能够使用CSS设置表格的样式2.CSS控制表格样式

知识储备2.CSS控制表格样式CSS提供了border、border-collapse、padding、width和height等属性来控制表格的样式，下面分别进行讲解。

知识储备2.CSS控制表格样式（1）border属性在HTML中，表格默认是没有边框的。为了给表格添加边框并使其看起来美观，我们可以通过border属性来设置表格边框的宽度、样式和颜色。下面演示如何使用bor