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

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

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

文章目录

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

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

通关知识

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关：设置表格的外边框样式

编程要求

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

添加table标签及属性，使得表格的宽度为100，高度为80，边框线粗细设置为4。
在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关：设置表格的内边框样式

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的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关：表格中单元格的合并

编程要求

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

“姓名”和“备注”单元格在垂直方向实现两个单元格合并
“签到”单元格在水平方向实现两个单元格合并
“姓名”“签到”“第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>