Web 前端开发案例与实战单元5 表格和表单.pdfVIP

单元5表格和表单

知识入门

循序渐进

5.1表格

5.2表单

5.3HTML5表单新元素

知识拓展

知识入门

1.表格

2.表单

3.表单域

循序渐进

知识入门

循序渐进

5.1表格

5.2表单

5.3HTML5表单新元素

知识拓展

5.1表格

5.1.1创建基础表格

5.1.2表格的其它标签

5.1.3CSS修饰表格

5.1.4CSS控制表格内容

5.1.1创建基础表格

table

trthHead1/ththHead2/th/tr

tr

td第1列第1个单元格/tdtd第1列第2个单元格/td

/tr……

tr

td第2列第1个单元格/tdtd第2列第2个单元格/td

/tr……

……

/table

5.1.2表格的其它标签

1.表格标题

table

caption表格的名字/caption

…

2.拆分表格

thead标签用于定义表格的头部，在该标签内必须包含tr

标签。

tfoot标签用于定义表格页脚，一般用于统计数据。

tbody标签用于定义表格的主体部分。

5.1.3CSS修饰表格

1.修饰表格的边框

boder:border-widthborder-styleborder-color;

2.合并表格边框和单元格边框

border-collapse:属性值;

5.1.4CSS控制表格内容

1.设置单元格的宽度

table-layout:属性值;

2.设置单元格文本样式

CSS中控制文本的属性对其样式进行设置。

【任5-1】制作校运会积分表

【任务描述】

（1）制作校运会大学足球联赛表格。

（2）设置表格只显示下边框并且不同部分有不同背

景色。

（3）当鼠标为与对应行时修改对应行的样式。

5.2表单

5.2.1创建表单

5.2.2input元素

5.2.3select元素

5.2.4textarea元素

5.2.5button元素

5.2.6使用CSS修饰表单元素

5.2.1创建表单

form

表单元素

/form

5.2.2input元素

inputtype=输入框类型name=值value=值accept=值

readonly=值size=值maxlength=值disabled=值src=值/

属性值功能

单行的文本框

text

将文本替换为“*”的文本框

password

checkbox只能做二选一的是或否选择

radio