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

2023-10-22 01:30

本文主要是介绍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

相关文章

如何设置vim永久显示行号

《如何设置vim永久显示行号》在Linux环境下,vim默认不显示行号,这在程序编译出错时定位错误语句非常不便,通过修改vim配置文件vimrc,可以在每次打开vim时永久显示行号... 目录设置vim永久显示行号1.临时显示行号2.永www.chinasem.cn久显示行号总结设置vim永久显示行号在li

Linux:alias如何设置永久生效

《Linux:alias如何设置永久生效》在Linux中设置别名永久生效的步骤包括:在/root/.bashrc文件中配置别名,保存并退出,然后使用source命令(或点命令)使配置立即生效,这样,别... 目录linux:alias设置永久生效步骤保存退出后功能总结Linux:alias设置永久生效步骤

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

四种简单方法 轻松进入电脑主板 BIOS 或 UEFI 固件设置

《四种简单方法轻松进入电脑主板BIOS或UEFI固件设置》设置BIOS/UEFI是计算机维护和管理中的一项重要任务,它允许用户配置计算机的启动选项、硬件设置和其他关键参数,该怎么进入呢?下面... 随着计算机技术的发展,大多数主流 PC 和笔记本已经从传统 BIOS 转向了 UEFI 固件。很多时候,我们也

Linux中chmod权限设置方式

《Linux中chmod权限设置方式》本文介绍了Linux系统中文件和目录权限的设置方法,包括chmod、chown和chgrp命令的使用,以及权限模式和符号模式的详细说明,通过这些命令,用户可以灵活... 目录设置基本权限命令:chmod1、权限介绍2、chmod命令常见用法和示例3、文件权限详解4、ch

SpringBoot项目引入token设置方式

《SpringBoot项目引入token设置方式》本文详细介绍了JWT(JSONWebToken)的基本概念、结构、应用场景以及工作原理,通过动手实践,展示了如何在SpringBoot项目中实现JWT... 目录一. 先了解熟悉JWT(jsON Web Token)1. JSON Web Token是什么鬼

使用Spring Cache时设置缓存键的注意事项详解

《使用SpringCache时设置缓存键的注意事项详解》在现代的Web应用中,缓存是提高系统性能和响应速度的重要手段之一,Spring框架提供了强大的缓存支持,通过​​@Cacheable​​、​​... 目录引言1. 缓存键的基本概念2. 默认缓存键生成器3. 自定义缓存键3.1 使用​​@Cacheab

Python中列表的高级索引技巧分享

《Python中列表的高级索引技巧分享》列表是Python中最常用的数据结构之一,它允许你存储多个元素,并且可以通过索引来访问这些元素,本文将带你深入了解Python列表的高级索引技巧,希望对... 目录1.基本索引2.切片3.负数索引切片4.步长5.多维列表6.列表解析7.切片赋值8.删除元素9.反转列表