Educoder 表格标签—表格高级样式的设置

2023-10-22 01:30
文章标签 设置 表格 高级 标签 样式 educoder

本文主要是介绍Educoder 表格标签—表格高级样式的设置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

表格标签—表格高级样式的设置

文章目录

  • 表格标签—表格高级样式的设置
    • 第1关：表格高级样式设置相关概念
      • 相关知识
        • 外边框线样式属性frame
        • 内部边框样式属性rules
        • 单元格合并
          • 水平方向单元格的合并
          • 垂直方向单元格的合并
      • 通关知识
    • 第2关：设置表格的外边框样式
      • 相关知识
        • table标签的一般属性
        • 外边框样式的设置
      • 编程要求
      • 通关代码
    • 第3关：设置表格的内边框样式
      • 相关知识
        • 表格内部边框属性的设置
      • 编程要求
      • 通关代码
    • 第4关：表格中单元格的合并
      • 相关知识
        • 水平方向单元格的合并
        • 垂直方向单元格的合并
      • 编程要求
      • 通关代码
    • 第5关：表格的综合案例
      • 任务描述
      • 编程要求
      • 通关代码

第1关：表格高级样式设置相关概念

相关知识

外边框线样式属性frame

表格的外边框线的样式可用属性frame的取值来确定，frame取值与相应的样式如下：

  • above：显示上边框
  • below：显示下边框
  • hsides：显示上下边框
  • vsides：显示左右边框
  • lhs：显示左边框
  • rhs：显示右边框
  • border：显示上下左右边框
  • void：不显示边框
内部边框样式属性rules

表格的内部边框的样式可用属性rules的取值来确定，rules取值与相应的样式如下：

  • all：显示所有内部边框
  • none：不显示内部边框
  • rows：仅显示行边框
  • cols：仅显示列边框
  • groups：显示介于行组和列组间边框
单元格合并

在制作稍复杂的表格时，需要对表格中的行或列进行合并。

水平方向单元格的合并

需要将水平方向的单元格合并时，可在<th>或<td>标记中添加colspan属性，属性的取值即为合并的单元格数目。

垂直方向单元格的合并

需要将垂直方向的单元格合并时，可在<th>或<td>标记中添加rowspan属性，属性的取值即为合并的单元格数目。

通关知识

1、下列选项中，用于设置表格内部边框线显示的属性是（C）。
A、border
B、frame
C、rules
D、innerborder2、如果希望表格的外部边框只显示上下两条边框线，属性frame的取值应选（C）。
A、hsides
B、vsides
C、lhs
D、rhs3、如果希望表格的内部边框只显示行线，则属性rules的取值应选（B）。
A、line
B、rows
C、cols
D、groups4、HTML中，若合并两个水平方向单元格，应使用的属性是（A）。
A、colspan
B、nospan
C、rowspan
D、colwrap5、<table rules=cols>，表示（D）
A、显示所有分隔线
B、只显示组(Groups)与组之间的分隔线
C、只显示行与行之间的分隔线
D、只显示列与列之间的分隔线

第2关：设置表格的外边框样式

相关知识

table标签的一般属性

table标签的属性通常有border、width、height、align、bgcolor、background等，前面已经介绍过，这里不在赘述。

外边框样式的设置

frame属性可用来设置表格的外边框样式，属性取值可以是：above、below、hsides、vsides、lhs、rhs、border、void。

例如，如果表格的外边框只需显示上边框，属性设置如下： <table frame=above>

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是：

  1. 添加table标签及属性，使得表格的宽度为100，高度为80，边框线粗细设置为4。
  2. 在table标签中添加frame属性，使得表格外边框显示为上下边框样式。

通关代码

<html><head><meta charset="utf-8"/><title>设置表格外边框属性</title></head><body><!-- ********* Begin ******* --><table width="100" height="80" border="4" frame="hsides"><!-- ********* End ********* --><caption>简易信息表</caption> <tr align=center  valign=middle><th>姓名</th><th>年龄</th></tr><tr  align=center  valign=middle><td>张三</td><td>20</td></tr></table></body> 
</html>

第3关：设置表格的内边框样式

相关知识

表格内部边框属性的设置

表格内部边框可以使用rules属性来设置，其取值可以为all、none rows、cols、groups。 例如，如果表格的外边框只需显示上边框，内部边框显示列边框线，属性设置如下： <table frame=above rules=cols>

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的Begin - End区域内补充代码，具体要求是： 1.添加table标签及属性，使得表格的宽度为100，高度为80，边框线粗细设置为4 2.在table标签中添加frame属性，使得表格外边框显示为上下边框样式。 3.在table标签中添加rules属性，使得表格内边框显示为行边框线样式。

通关代码

<html><head><meta charset="utf-8"/><title>设置表格内边框属性</title></head><body><!-- ********* Begin ******* --><table width="100" height="80" border="4" frame="hsides" rules="rows"><!-- ********* End ********* --><caption>简易信息表</caption> <tr align=center  valign=middle><th>姓名</th><th>年龄</th></tr><tr  align=center  valign=middle><td>张三</td><td>20</td></tr></table></body> 
</html>

第4关：表格中单元格的合并

相关知识

水平方向单元格的合并

将两个或多个水平方向的单元格合并，可以在th或td标签中使用colspan属性来设置，属性的取值为合并的单元格的数目。 用法示例： 示例如下：

<tr><th>姓名</th><th colspan="4">签到</th><th>备注</th>
</tr>
垂直方向单元格的合并

将两个或多个垂直方向的单元格合并，可以在th或td标签中使用rowspan属性来设置，属性的取值为合并的单元格的数目。 用法示例：

<tr> <td rowspan="2">领导讲话 </td>  <td>大会主题报告</td><td>分会专题报告</td>  <td rowspan="2">总结报告</td>
</tr>
<tr>   <td>专家报告</td> <td>分组讨论</td>
</tr>

编程要求

根据任务描述的效果图，在 Begin-End 区域内补充代码，创建一个3行4列的签到表，具体要求如下：

  1. “姓名”和“备注”单元格在垂直方向实现两个单元格合并
  2. “签到”单元格在水平方向实现两个单元格合并
  3. “姓名”“签到”“第1次”“第2次”“备注”单元格构成项目表头，请用项目表头单元格标签实现；第三行的单元格为数据单元格，请用数据单元格标签实现。

通关代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>签到表</title><style type="text/css">th{background-color:#00ff33;}td{background-color:#00ffff;}</style></head><body> <table border="2" width="400" bordercolor="#00ff00" cellpadding="6"><caption>签到表</caption><!-- ********* Begin ********* --><tr><th rowspan="2">姓名</th><th colspan="2">签到</th><th rowspan="2">备注</th></tr><tr><th>第1次</th><th>第2次</th></tr><tr><td>张三</td><td></td><td></td><td></td></tr><!-- ********* End ********* --></table>   </body>
</html>

第5关：表格的综合案例

任务描述

本关任务：创建一个标题为“家庭账单”的表格。实现的效果如下图所示：

家庭账单效果图

编程要求

根据任务描述提示的目标效果，在右侧编辑器补充代码，创建一个题为“家庭账单”的表格，要求如下：

1.为整个网页添加下图所示背景图，其URL为https://www.educoder.net/api/attachments/1217848；

表格背景

2.表格边框为2px；表格宽度为600；bordercolor为#00ff00;cellpadding为6；表格在网页中居中排列；

3.表格标题为“家庭账单”；

4.单元格的背景等样式已在头部style标签中设置，各单元格的内容及合并要求请参看任务描述中的效果图，要注意绿色显示区的单元格要设置为项目表头，青色显示区的单元格要设置为数据单元格。

通关代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格综合</title><style type="text/css">th{background-color:#00ff33;}td{background-color:#00ffff;text-align:center}caption{font-family:黑体;font-size:30px;color:blue}</style></head>
<!-- ********* Begin ********* --><body background="https://www.educoder.net/api/attachments/1217848"><table border="2" width="600" bordercolor="#00ff00" cellpadding="6" align="center"><caption>家庭账单</caption><tr><th rowspan="2" colspan="2">本周项目</th><th colspan="2">费用明细</th><th rowspan="2">备注</th></tr><tr><th>收入</th><th>支出</th></tr><tr><th rowspan="3">收入</th><th>工资</th><td>10000</td><td>0</td><td></td></tr><tr><th>兼职</th><td>2000</td><td>0</td><td></td></tr><tr><th>收入合计</th><td>12000</td><td>0</td><td></td></tr><tr><th rowspan="3">支出</th><th>生活用品</th><td>0</td><td>4000</td><td></td></tr><tr><th>学杂费</th><td>0</td><td>3000</td><td></td></tr><tr><th>支出合计</th><td>0</td><td>7000</td><td></td></tr></table></body>
<!-- ********* End ********* -->
</html>

这篇关于Educoder 表格标签—表格高级样式的设置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/258210。

相关文章

Python实现Excel批量样式修改器(附完整代码)

Python实现Excel批量样式修改器(附完整代码)

《Python实现Excel批量样式修改器(附完整代码)》这篇文章主要为大家详细介绍了如何使用Python实现一个Excel批量样式修改器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录前言功能特性核心功能界面特性系统要求安装说明使用指南基本操作流程高级功能技术实现核心技术栈关键函
阅读更多...
JavaScript中的高级调试方法全攻略指南

JavaScript中的高级调试方法全攻略指南

《JavaScript中的高级调试方法全攻略指南》什么是高级JavaScript调试技巧,它比console.log有何优势,如何使用断点调试定位问题,通过本文,我们将深入解答这些问题,带您从理论到实... 目录观点与案例结合观点1观点2观点3观点4观点5高级调试技巧详解实战案例断点调试：定位变量错误性能分
阅读更多...
从基础到高级详解Python数值格式化输出的完全指南

从基础到高级详解Python数值格式化输出的完全指南

《从基础到高级详解Python数值格式化输出的完全指南》在数据分析、金融计算和科学报告领域,数值格式化是提升可读性和专业性的关键技术,本文将深入解析Python中数值格式化输出的相关方法,感兴趣的小伙... 目录引言：数值格式化的核心价值一、基础格式化方法1.1 三种核心格式化方式对比1.2 基础格式化示例
阅读更多...
Android协程高级用法大全

Android协程高级用法大全

《Android协程高级用法大全》这篇文章给大家介绍Android协程高级用法大全,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友跟随小编一起学习吧... 目录1️⃣ 协程作用域（CoroutineScope）与生命周期绑定Activity/Fragment 中手
阅读更多...
深度解析Python yfinance的核心功能和高级用法

深度解析Python yfinance的核心功能和高级用法

《深度解析Pythonyfinance的核心功能和高级用法》yfinance是一个功能强大且易于使用的Python库,用于从YahooFinance获取金融数据,本教程将深入探讨yfinance的核... 目录yfinance 深度解析教程 (python)1. 简介与安装1.1 什么是 yfinance?
阅读更多...
C#使用Spire.XLS快速生成多表格Excel文件

C#使用Spire.XLS快速生成多表格Excel文件

《C#使用Spire.XLS快速生成多表格Excel文件》在日常开发中,我们经常需要将业务数据导出为结构清晰的Excel文件,本文将手把手教你使用Spire.XLS这个强大的.NET组件,只需几行C#... 目录一、Spire.XLS核心优势清单1.1 性能碾压：从3秒到0.5秒的质变1.2 批量操作的优雅
阅读更多...
MySQL设置密码复杂度策略的完整步骤(附代码示例)

MySQL设置密码复杂度策略的完整步骤(附代码示例)

《MySQL设置密码复杂度策略的完整步骤(附代码示例)》MySQL密码策略还可能包括密码复杂度的检查,如是否要求密码包含大写字母、小写字母、数字和特殊字符等,：本文主要介绍MySQL设置密码复杂度... 目录前言1. 使用 validate_password 插件1.1 启用 validate_passwo
阅读更多...
MySQL数据类型与表操作全指南( 从基础到高级实践)

MySQL数据类型与表操作全指南( 从基础到高级实践)

《MySQL数据类型与表操作全指南(从基础到高级实践)》本文详解MySQL数据类型分类（数值、日期/时间、字符串）及表操作（创建、修改、维护）,涵盖优化技巧如数据类型选择、备份、分区,强调规范设计与... 目录mysql数据类型详解数值类型日期时间类型字符串类型表操作全解析创建表修改表结构添加列修改列删除列
阅读更多...
Python 函数详解:从基础语法到高级使用技巧

Python 函数详解:从基础语法到高级使用技巧

《Python函数详解:从基础语法到高级使用技巧》本文基于实例代码,全面讲解Python函数的定义、参数传递、变量作用域及类型标注等知识点,帮助初学者快速掌握函数的使用技巧,感兴趣的朋友跟随小编一起... 目录一、函数的基本概念与作用二、函数的定义与调用1. 无参函数2. 带参函数3. 带返回值的函数4.
阅读更多...
Java Stream 的 Collectors.toMap高级应用与最佳实践

Java Stream 的 Collectors.toMap高级应用与最佳实践

《JavaStream的Collectors.toMap高级应用与最佳实践》文章讲解JavaStreamAPI中Collectors.toMap的使用,涵盖基础语法、键冲突处理、自定义Map... 目录一、基础用法回顾二、处理键冲突三、自定义 Map 实现类型四、处理 null 值五、复杂值类型转换六、处理
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2