使用CSS美化表格和表单元素
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
使用CSS美化表格和表单元素
网页中表格的应用无处不在，在HTML中，最 初希望用于纯数据，却发展为基本页面布局子语言 ；但是在Web标准中，正在渐渐地恢复表格原来的 用途，即只用来显示表格数据。如今，表格已经成 为可视化构成与格式化输出的主要方式。
本章介绍使用CSS样式设置表格的方法，掌握 Web标准网站的页面中数据的制作方法，并能够使 用CSS样式表对数据表进行综合运用。
sghgmyy@126.com
创建数据表格
<thead>、<tbody>和<tfood>标签使设计者能够将 表格划分为逻辑部分，例如将所有列标题放在<thead> 标签中，这样就能够对这个特殊区域单独的应用样式 表。如果在一个表格中使用了<thead>和<tfoot>标签， 那么在这个表格中至少使用一个<tbody>标签。一个表 格中只能使用一个<thead>和<tfoot>标签，但却可以使 用多个<tbody>标签将复杂的表格划分为更容易管理的 部分。
HTML代码
创建数据表格
sghgmyy@126.com
CSS样式代码
创建数据表格
【相关知识】
HTML表格通过<table>标签定义。在<table> 的打开和关闭标签之间，可以发现有许多由<tr> 标签指定的表格行，每一行由一个或者多个表格 单元格组成。表格单元格可以是表格数据<td>， 或者表格标题<th>。通常将表格标题认为是表达 对应表格数据单元格的某种信息。
sghgmyy@126.com
主要内容
7.7 使用CSS定义圆角文本字段
7.8 使用CSS定义下拉列表——制作多彩下拉列表
7.9 column-width属性（CSS3.0）
——实现网页文本分栏
7.10 column-count属性（CSS3.0）
——控制网页文本分栏数
7.11 column-gap属性（CSS3.0）
sghgmyy@126.com
设置表格边框和背景
【任务描述】
在网页中，通常会为表格添加边框和背景，以 此来界定和区分不同单元格中的数据内容，如果表 格的border值大于0，则显示边框；如果border值 为0，则不显示边框。
本实例通过设置表格的边框、背景颜色以及背 景图片来对表格进行进一步的装饰和美化，使得页 面中的内容能够更加丰富多彩，从而增加网页的吸 引力。
sghgmyy@126.com
创建数据表格
通过使用<thead>、<tbody>和<tfood>元素，将 表格行聚集为组，可以构建更复杂的表格。每个标签 定义包含一个或者多个表格行，并且将它们标识为一 个组的盒子。 ➢ <thead>标签用于指定表格标题行，如果打印的表格 超过一页纸，<thead>应该在每个页面的顶端重复。 ➢ <tfood>是表格标题行的补充，它是一组作为脚注的 行，如果表格横跨多个页面，也应该重复。 ➢ 用<tbody>标签标记的表格正文部分，将相关行集合 在一起，表格可以有一个或多个<tbody>部分。
sghgmyy@126.com
创建数据表格
为什么需要使用CSS对表格数据进行控制？ 表格在网页中主要用于表现表格式数据，Web
标准是为了实现网页内容与表现的分离，这样可 以使网页的内容和结构更加整洁，便于更新和修 改。如果直接在表格的相关标签中添加属性设置 ，会使得表格结构复杂，不能够实现内容与表现 的分离，不符合Web标准的要求，所以建议使用 CSS样式对表格数据进行控制。
——控制网页文本分栏间距
7.12 column-rule属性（CSS3.0）
sghgmyy@126.com
——为分栏添加分栏线
创建数据表格
【任务描述】
HTML中的数据表格是网页中常见的元素，表格在 网页中是用来显示二维关系数据的，并且还可以为网页 进行排版、布局，但是使用表格布局的网页不能达内容 与表现的分离，因此不建议使用在Web标准中。
sghgmyy@126.com
设置表格边框和背景
如何设置表格标题？ <caption>标签是表格标题标签，<caption>标签出现
在<table>标签之间，作为第一个子元素，它通常在表格之 前显示。包括<caption>标签的显示盒子的宽度和表格本身 宽度相同。
border-collapse : separate | collapse ;
➢ separate：默认值，表示边框会被分开，不会忽略 border-spacing和empty-cells属性；
➢ collapse：表示边框会合并为一个单一的边框，会忽略 border-spacing和empty-cells属性。
sghgmyy@126.com
主要内容
7.1 创建数据表格——制作ቤተ መጻሕፍቲ ባይዱ业网站新闻页面 7.2 设置表格边框和背景——制作精美表格 7.3 为单元行应用类CSS样式
——实现隔行变色的单元格 7.4 应用CSS样式的hover伪类
——实现交互的变色表格 7.5 设置表单元素的背景颜色——制作商品搜索 7.6 设置表单元素的边框——美化登录框
sghgmyy@126.com
【任务展示】
设置表格边框和背景
sghgmyy@126.com
案例效果图
【任务实现】
设置表格边框和背景
sghgmyy@126.com
CSS样式代码
设置表格边框和背景
【相关知识】
在CSS样式中，通过定义border属性、bordercollapse属性和background-color属性可以对表格的边框 和背景进行设置，border-collapse属性的语法格式如下：
sghgmyy@126.com
创建数据表格
默认情况下，Web浏览器如何显示表格数据？ Web浏览器通过基于浏览器对表格标记理解
的默认样式设计来显示表格，即： ➢ 单元格之间或表格周围没有边框； ➢ 表格数据单元格使用普通文本并且左对齐； ➢ 表格标题单元格居中对齐，并设置为粗体字体； ➢ 标题在表格中间。
本实例制作一个企业网站新闻页面，在该新闻页面 中使用数据表格的形式来表现新闻标题内容，为页面中 的数据进行合理、清晰的排版，使浏览者能够对页面中 的数据一目了然。
sghgmyy@126.com
【任务展示】
创建数据表格
sghgmyy@126.com
案例效果图
【任务实现】
创建数据表格
sghgmyy@126.com
网页中表格的应用无处不在，在HTML中，最 初希望用于纯数据，却发展为基本页面布局子语言 ；但是在Web标准中，正在渐渐地恢复表格原来的 用途，即只用来显示表格数据。如今，表格已经成 为可视化构成与格式化输出的主要方式。
本章介绍使用CSS样式设置表格的方法，掌握 Web标准网站的页面中数据的制作方法，并能够使 用CSS样式表对数据表进行综合运用。
sghgmyy@126.com
创建数据表格
<thead>、<tbody>和<tfood>标签使设计者能够将 表格划分为逻辑部分，例如将所有列标题放在<thead> 标签中，这样就能够对这个特殊区域单独的应用样式 表。如果在一个表格中使用了<thead>和<tfoot>标签， 那么在这个表格中至少使用一个<tbody>标签。一个表 格中只能使用一个<thead>和<tfoot>标签，但却可以使 用多个<tbody>标签将复杂的表格划分为更容易管理的 部分。
HTML代码
创建数据表格
sghgmyy@126.com
CSS样式代码
创建数据表格
【相关知识】
HTML表格通过<table>标签定义。在<table> 的打开和关闭标签之间，可以发现有许多由<tr> 标签指定的表格行，每一行由一个或者多个表格 单元格组成。表格单元格可以是表格数据<td>， 或者表格标题<th>。通常将表格标题认为是表达 对应表格数据单元格的某种信息。
sghgmyy@126.com
主要内容
7.7 使用CSS定义圆角文本字段
7.8 使用CSS定义下拉列表——制作多彩下拉列表
7.9 column-width属性（CSS3.0）
——实现网页文本分栏
7.10 column-count属性（CSS3.0）
——控制网页文本分栏数
7.11 column-gap属性（CSS3.0）
sghgmyy@126.com
设置表格边框和背景
【任务描述】
在网页中，通常会为表格添加边框和背景，以 此来界定和区分不同单元格中的数据内容，如果表 格的border值大于0，则显示边框；如果border值 为0，则不显示边框。
本实例通过设置表格的边框、背景颜色以及背 景图片来对表格进行进一步的装饰和美化，使得页 面中的内容能够更加丰富多彩，从而增加网页的吸 引力。
sghgmyy@126.com
创建数据表格
通过使用<thead>、<tbody>和<tfood>元素，将 表格行聚集为组，可以构建更复杂的表格。每个标签 定义包含一个或者多个表格行，并且将它们标识为一 个组的盒子。 ➢ <thead>标签用于指定表格标题行，如果打印的表格 超过一页纸，<thead>应该在每个页面的顶端重复。 ➢ <tfood>是表格标题行的补充，它是一组作为脚注的 行，如果表格横跨多个页面，也应该重复。 ➢ 用<tbody>标签标记的表格正文部分，将相关行集合 在一起，表格可以有一个或多个<tbody>部分。
sghgmyy@126.com
创建数据表格
为什么需要使用CSS对表格数据进行控制？ 表格在网页中主要用于表现表格式数据，Web
标准是为了实现网页内容与表现的分离，这样可 以使网页的内容和结构更加整洁，便于更新和修 改。如果直接在表格的相关标签中添加属性设置 ，会使得表格结构复杂，不能够实现内容与表现 的分离，不符合Web标准的要求，所以建议使用 CSS样式对表格数据进行控制。
——控制网页文本分栏间距
7.12 column-rule属性（CSS3.0）
sghgmyy@126.com
——为分栏添加分栏线
创建数据表格
【任务描述】
HTML中的数据表格是网页中常见的元素，表格在 网页中是用来显示二维关系数据的，并且还可以为网页 进行排版、布局，但是使用表格布局的网页不能达内容 与表现的分离，因此不建议使用在Web标准中。
sghgmyy@126.com
设置表格边框和背景
如何设置表格标题？ <caption>标签是表格标题标签，<caption>标签出现
在<table>标签之间，作为第一个子元素，它通常在表格之 前显示。包括<caption>标签的显示盒子的宽度和表格本身 宽度相同。
border-collapse : separate | collapse ;
➢ separate：默认值，表示边框会被分开，不会忽略 border-spacing和empty-cells属性；
➢ collapse：表示边框会合并为一个单一的边框，会忽略 border-spacing和empty-cells属性。
sghgmyy@126.com
主要内容
7.1 创建数据表格——制作ቤተ መጻሕፍቲ ባይዱ业网站新闻页面 7.2 设置表格边框和背景——制作精美表格 7.3 为单元行应用类CSS样式
——实现隔行变色的单元格 7.4 应用CSS样式的hover伪类
——实现交互的变色表格 7.5 设置表单元素的背景颜色——制作商品搜索 7.6 设置表单元素的边框——美化登录框
sghgmyy@126.com
【任务展示】
设置表格边框和背景
sghgmyy@126.com
案例效果图
【任务实现】
设置表格边框和背景
sghgmyy@126.com
CSS样式代码
设置表格边框和背景
【相关知识】
在CSS样式中，通过定义border属性、bordercollapse属性和background-color属性可以对表格的边框 和背景进行设置，border-collapse属性的语法格式如下：
sghgmyy@126.com
创建数据表格
默认情况下，Web浏览器如何显示表格数据？ Web浏览器通过基于浏览器对表格标记理解
的默认样式设计来显示表格，即： ➢ 单元格之间或表格周围没有边框； ➢ 表格数据单元格使用普通文本并且左对齐； ➢ 表格标题单元格居中对齐，并设置为粗体字体； ➢ 标题在表格中间。
本实例制作一个企业网站新闻页面，在该新闻页面 中使用数据表格的形式来表现新闻标题内容，为页面中 的数据进行合理、清晰的排版，使浏览者能够对页面中 的数据一目了然。
sghgmyy@126.com
【任务展示】
创建数据表格
sghgmyy@126.com
案例效果图
【任务实现】
创建数据表格
sghgmyy@126.com