网页设计与开发（HTML5+CSS3） 课件 项目7 利用CSS美化表格和表单样式.pptx

项目7利用CSS美化表格和表单样式录设置表格的背景颜色设置表格的边框样式设置单元格的边框样式设置表头的样式

050607目录制作网页通讯录制作用户登录表单制作并美化用户注册表单08制作并美化用户信息注册表单

项目描述网页不仅可以利用盒子模型进行布局，也可以利用表格进行简单布局，其非常适用于需要进行数据展示或者排行榜之类的网页。除表格外，网页中的注册、登录等内容可以用表单的形式呈现。本项目综合利用前面所学的HTML和CSS相关知识，并结合表格和表单相关知识，制作一个旅游论坛中的“景点排行榜”网页。

项目效果图

知识储备

知识目标掌握表格标签及常用属性的用法和意义。理解表格相关属性不同值的用法和意义。010203了解表单的构成及其不同的控件类型。04掌握input标签不同属性的用法和意义。

设置表格的背景颜色01

任务描述把表格常用的标签及其描述用表格的形式在网页中体现出来，要求能看出常用表格标签的作用，并对表格设置合适的背景颜色，效果如右图所示。

知识点拨在HTML中，使用table标签来定义表格。HTML中的表格和Excel中的表格是类似的，都包括行、列、单元格、表头等元素，通过该任务也可以基本熟悉常用表格标签的基本用法。

设置表格边框样式02

任务描述参照任务1，对表格的外边框及单元格的边框进行边框样式设置，效果如右图所示。

知识点拨HTML5表格边框设置是网页设计中常用的操作，表格的外观和边框是我们需要考虑的一个问题，边框对表格的整体外观和美观性有着很大的影响。在HTML5中，可以使用CSS样式来控制表格的边框。使用CSS中的border属性可以设置表格整体的边框。本任务也是针对整张表格来设置外边框的。

设置单元格的边框样式03

任务描述在任务2设置的表格中，单元格出现了双重边框，这看上去不太美观，本任务先使用表格边框重叠属性（border-collapse）将边框合并，再使用border属性设置单元格的边框样式，效果如右图所示。

知识点拨?border-collapse属性01border-collapse属性用于设置表格的边框是否被合并为一个单一的边框。border-collapse属性值及其描述如下表所示。?设置表格单元格的边框样式02使用CSS中的border属性可以设置单元格的边框样式。在该任务中，先使用border-collapse属性将表格边框合并为单一的边框，再使用border属性设置单元格的边框样式。属性值描述collapse如果可能，表格边框会被合并为一个单一的边框。此时会忽略border-spacing和empty-cells属性separate默认值。边框会被分开。此时不会忽略border-spacing和empty-cells属性inherit规定从父元素继承border-collapse属性的值

设置表格表头的样式04

任务描述利用前面所学的表格相关知识，制作一张课程表，要求分别单独设置表格行标题和列标题的样式，效果如右图所示。

知识点拨th标签的scope属性提供了一种在表格中关联表头单元格与数据单元格的方式，用于指明一个单元格是一列、一行、一个列组还是一个行组的表头。其对普通Web浏览器中的网页可视效果没有影响，语法格式如下。thscope=valuescope属性值及其描述如下表所示。值描述col指明单元格是列的表头row指明单元格是行的表头colgroup指明单元格是列组的表头rowgroup指明单元格是行组的表头

定义变形原点05

任务描述利用前面所学的表格及CSS相关知识，制作一个班干部通讯录，效果如右图所示。

知识点拨?给表格设置背景颜色01在HTML中给表格设置背景颜色，一般使用background-color或background属性，其可以直接给表格单元格或整张表格设置背景颜色。该任务使用background属性分别对表头单元格、数据单元格及单元格悬停设置了背景颜色，使整张表格的外观更加美观。?cellpadding和cellspacing属性02cellpadding属性用于指定单元格内容与单元格边界之间的距离（内边距）。cellspacing属性用于指定单元格与单元格之间的距离。

制作用户登录表单06

任务描述利用表单相关元素及属性，制作一个用户登录表单，效果如右图所示。

知识点拨?表单域form01在网页中，一个完整的表单通常由表单域、表单元素（控件）和提示信息3部分构成。form就是整个表单的表单域，它相当于一个容器，用来容纳所有的表单控件和提示信息。?input元素02input元素用来收集用户的输入数据。它是最常见的一种表单元素，常用来定义表单中的单行文本框、单选按钮、复选框等。input元素具有多种输入类型及相关属性，具体描述如下表所