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

最新推荐文章于 2022-12-28 17:21:27 发布

静待花开︳

最新推荐文章于 2022-12-28 17:21:27 发布

阅读量230

点赞数

分类专栏： Web前端 educoder 文章标签： html5

本文链接：https://blog.csdn.net/weixin_52184490/article/details/121607284

版权

educoder 同时被 2 个专栏收录

51 篇文章 9 订阅

订阅专栏

Web前端

35 篇文章 2 订阅

订阅专栏

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

CABAD

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

任务描述

本关任务：创建一个两行两列的表格。实现的效果如下图所示：

外边框设置

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的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关：设置表格的内边框样式

任务描述

本关任务：编写一个两行两列的表格，实现如下图所示效果。

内部边框

编程要求

根据提示，在右侧编辑器补充代码，在右侧编辑器中的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.“签到”单元格在水平方向实现两个单元格合并 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>

第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 colspan="1">收入</th>
       <th colspan="1">支出</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>

静待花开︳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
表格标签—表格高级样式的设置

第1关：表格高级样式设置相关概念CABAD第2关：设置表格的外边框样式任务描述本关任务：创建一个两行两列的表格。实现的效果如下图所示：相关知识为了完成本关任务，你需要掌握：1.table标签的一般属性，2.外边框样式的设置。table标签的一般属性table标签的属性通常有border、width、height、align、bgcolor、background等，前面已经介绍过，这里不在赘述。外边框样式的设置frame属性可用来设置表格的外边框样式，...
复制链接

扫一扫