任务7制作学生信息表教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版

任务7 制作学生信息表 Web前端开发案例教程 HTML5+CSS3 微课版 表格是 HTML 网页的重要元素，利用表格可以有条理地显示网页内容。本任务制作一个学生信息表，显示学生的姓名、性别、年龄、班级等信息，并使用 CSS 定义表格的样式。通过本任务的实现，掌握表格的创建和样式设置方法，能轻松制作网页中类似的表格。 任务导学 任务3 制作学生信息表 任务7 任 务 描 述 任务效果 制作学生信息表，浏览效果如下图所示。 （1）创建一个 8 行 7 列的表格。 （2）设置表格标题——学生信息表。 （3）在表格标记中添加相应的文本内容，并用<th>标记为表格设置表头。 （4）通过 CSS 控制表格的样式。 （5）鼠标指针移动到表格行时高亮（黄色）显示该数据行。 任务效果 要求如下。 知识点 表格基本标记 01 合并单元格 02 表格的CSS样式设置 03 任务3 制作学生信息表 任务7 知 识 准 备 7.2.1 表格标记 早期的网页版面采用表格进行布局，随着网页技术的发展，现在的网页版面一般采用HTML5+CSS3 布局。但网页上的一些内容，如通讯录、学生信息表、课程表等，采用表格仍然可以较好地呈现。 7.2.1 表格标记 example01.html （1）<table></table>。用于定义一个表格 （2）<tr></tr>。用于定义表格的一行 （3）<th></th>。用于定义表头的单元格，该单元格中的文字会被自动设为粗体，文字在单元格中居中对齐显示 （4）<td></td>。用于定义表格的普通单元格，该单元格中的文字会被自动设为左对齐显示 表格标记 7.2.1 表格标记 10 7.2.2 合并单元格 可以给单元格标记<td>或<th>添加 colspan 或 rowspan 属性合并单元格。 7.2.2 合并单元格 如果要将表格的列合并，也就是让同一行不同列的单元格合并为一个单元格，那么要找到被合并的几个单元格中处于最左侧的那个单元格，给它加上 colspan 属性，其他被合并的单元格的标记要删除。 7.2.2 合并单元格 如果要将表格的行合并，也就是让同一列不同行的单元格合并为一个单元格，那么要找到被合并的几个单元格中处于最上面的那个单元格，给它加上 rowspan 属性，其他被合并的单元格的标记要删除。 7.2.2 合并单元格 example02.html 使用css定义表格样式 表格常用的 CSS 样式属性如下表所示。 7.2.2 合并单元格 15 使用css定义表格样式 example03. html 7.2.2 合并单元格 16 任务 制作学生信息表 任务7 任 务 实 现 7.3.1 搭建学生信息表结构 本节使用前面所学的表格标记构建学生信息表的结构，并使用 CSS 定义表格样式。 7.3.1 搭建学生信息表结构 7.3.1 搭建学生信息表结构 浏览网页，效果如下图所示。 7.3.2 定义学生信息表CSS样式 任务3 制作学生信息表 任务7 任 务 小 结 任务小结 本任务围绕学生信息表的制作，介绍了表格标记、合并单元格的方法以及表格 CSS 样式等，最后完成了学生信息表的制作。本任务介绍的主要知识点如下表所示。 任务小结 谢 谢 $