第7章表格和表单《HTML5+CSS3网页设计与制作（第2版）》

学习目标/Target了解表单控件，能够使用不同类型的表单控件丰富表单功能了解表单的构成，能够阐明表单各构成部分的作用掌握创建表单的方法，能够在网页中创建表单熟悉表格的用法，能够创建表格并设置表格样式

学习目标/Target熟悉用CSS控制表单样式的方法，能够使用CSS设置表单样式了解HTML5表单新属性，能够将这些新属性应用到网页制作中

章节概述/Summary表格与表单是HTML页面的重要组成部分，利用表格可以对网页进行排版，使网页信息有条理地显示出来；而表单则方便网页与用户进行交互，实现一些网页功能，如注册、登录、交易等。本章将对表格与表单的相关知识进行详细的讲解。

目录/Contents010203表格表单表单控件04HTML5表单新属性05用CSS控制表单样式06阶段案例——制作表单注册页面

表格7.1

7.1表格什么是表格？

7.1表格如何创建表格？说到表格，其实大家并不陌生课程表网上购物查票

7.1.1创建表格在Word中，如果要创建表格，只需插入表格，然后设定相应的行数和列数即可。然而在HTML中，所有的元素都是通过标签定义的，要想创建表格，就需要使用与表格相关的标签。使用标签创建表格的基本语法格式如下。tablecaption表格标题/captiontrtd单元格内的文字/tdtd单元格内的文字/td……/tr……/tabletable标签：用于设置表格的开始与结束。caption标签：用于设置表格的标题。tr标签：用于设置表格中的行，必须嵌套在table标签中。table标签中包含几个tr标签，就表示该表格有几行。td标签：用于设置表格中的单元格，必须嵌套在tr标签中。

7.1.1创建表格多学一招：设置表头设置表头非常简单，只需用表头标签th替代相应的单元格标签td即可。th标签与td标签用法完全相同，但th标签具有语义性，特指表头，标签内包含的文本默认加粗居中显示。而td标签只是普通的单元格，标签内包含的文本为普通文本且默认水平左对齐显示。【总结】

7.1.2表格标签的属性在目前保留的表格标签属性中，colspan属性和rowspan属性是比较常用的，用于合并单元格。这两个属性需要写在td标签中。colspan属性rowspan属性colspan属性用于设置单元格横跨的列数，也就是用于合并水平方向的单元格，取值为正整数。rowspan属性用于设置单元格竖跨的行数，也就是用于合并垂直方向的单元格，取值为正整数。

7.1.3用CSS控制表格样式1.控制表格边框使用CSS边框的样式属性border可以轻松地控制表格的边框。table{width:800px;height:300px;border:1pxsolid#30F; /*设置表格的边框*/}

7.1.3用CSS控制表格样式2.控制单元格边距通过table标签的cellpadding属性和cellspacing属性可以控制单元格内容与边框之间的距离以及相邻单元格边框之间的距离。th,td{border:1pxsolid#30f;padding:50px;/*为单元格设置50px的内边距*/margin:50px;/*为单元格设置50px的外边距*/}

7.1.3用CSS控制表格样式3.控制单元格的宽度和高度使用CSS的width和height属性可以控制单元格的宽度和高度。td{width:20px;height:20px;}对同一行的单元格定义不同的高度，或对同一列的单元格定义不同的宽度时，单元格最终的宽度或高度将取其中的较大者。

表单7.2

7.2表单表单在网页中起着收集用户信息、数据交互、数据验证以及个性化体验等多个方面的作用，是网页设计和交互的重要组成部分。本节将对表单的基础知识进行简单介绍。

7.2.1表单的构成以登录页面为例，分析表单的构成。

7.2.1表单的构成一个表单中通常还需要包含一些说明性的文字，用于提示用户进行填写和操作。相当于一个容器，用来收集用户输入或选择的数据。如果不设置表单域，表单