EduCoder-Web程序设计基础-html5—表格高级样式的设置-第5关：表格的综合案例

最新推荐文章于 2023-07-01 16:35:55 发布

weixin_51402180

最新推荐文章于 2023-07-01 16:35:55 发布

阅读量670

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_51402180/article/details/121624084

版权

任务描述

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

编程要求

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

weixin_51402180

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫