1.6添加会员功能表格（课件）-高二《网页设计与制作》同步教学（劳动版）

制作网页内容 第一阶段 能够表述表格的三个基本元素。 能够根据需要运用表格各个基本元素的属性。 能够综合运用HTML表格标签和属性完成D清单网页会员功能表格内容。 任务目标 任务6 添加会员功能表格 本次任务要求在任务5的基础上添加D清单网页会员功能表格内容。完成后的表格内容效果图如图1-6所示。 任务描述 图1-6 D清单网页的表格内容效果图 任务6 添加会员功能表格 要完成D清单网页表格内容的制作，需要： 学习HTML表格的三个基本元素； 学习HTML表格的语法及表格各个元素的属性； 分析D清单网页会员功能效果图的表格内容，正确选择和使用表格标签完成D清单网页中的表格内容制作。 D清单网页会员功能表格效果如图1-6-1所示。可以看出，表格有4列11行，表格结构包含了描述文字“可以在手机端使用”，以及加粗的表格表头、表格正文等常规内容。 任务分析 任务6 添加会员功能表格 任务分析 图1-6-1 D清单网页会员功能的表格效果 任务6 添加会员功能表格 知识与技能准备 表格通过使用table、tr、th或td标签构成网页中数据的表示方式。 （1）table标签：表格元素都是以<table>标记开始，</table>标记结束，用来定义表格外框。 （2）tr标签：定义表格行，表格的每一行都以<tr>标记开始，</tr>标记结束。 （3）th标签：定义表格的表头。 （4）td标签：定义单元格，即表格的具体数据存储单元，每个单元格都以<td>标记开始，</td>标记结束。 1、表格的元素 表格是网页中最常用的元素，网页中经常使用表格进行显示或者统计数据，表格不仅可以在网页上显示数据，还可以将相互关联的一些信息元素集中定位，从而实现页面布局使页面更加简洁。像Excel数字表格，可以看出表格都是由行和列构成的，而行和列的交汇可以形成一个个单元格。 知识与技能准备 在一个表格中，可以插入多对tr标签表示多行，一对tr代表一行，每对tr标签之间可以插入多对td标签，每一对td标签代表一个单元格，单元格里的内容可以是文字、数据、图像、超链接、表单等元素。 其语法形式如下： 2、表格的语法 <table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>单元格1_1</td> <td>单元格1_2</td> </tr> <tr> <td>单元格2_1</td> <td>单元格2_2</td> </tr> </table> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-6-1 创建一个两行三列表格 1 2 3 4 5 6 7 8 9 10 11 12 13 <!--创建两行三列的表格--> <table> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>张三</td> <td>男</td> <td>20</td> </tr> </table> 显示效果如下： 课堂练习1-6-1 创建一个两行三列表格 图1-6-3 简单的两行两列表格 知识与技能准备 表格中可以用标题来对表格做一个简单的说明，caption表格标题就是用来描述表格的特征，但caption元素必须紧跟table元素开始标签才有效，而且一个表格只能包含一个表格标题。 其语法形式如下： 1、caption元素：表格的标题 <table> <caption>表格标题文字说明</caption> </table> 打开Visual Studio Code软件，在<body>标签中输入如下代码： 课堂练习1-6-2 添加表格标题 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!--创建两行四列的表格--> <table> <caption>早餐单</caption> <tr> <td>周一</td> <td>周二</td> <td>周三</td> </tr> <tr>