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