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

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

剥泐

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

阅读量269

点赞数

CC 4.0 BY-SA版权

文章标签： html html5

本文链接：https://blog.youkuaiyun.com/m0_49062515/article/details/110673025

web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用HTML创建一个家庭账单的表格，包括设置表格样式、布局和内容。通过具体的代码实现，展示了如何合并单元格、设置背景颜色等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编程要求
根据任务描述提示的目标效果，在右侧编辑器补充代码，创建一个题为“家庭账单”的表格，要求如下：
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 align="center" border="2" width="600" bordercolor="#00ff00" cellpadding="6" >
   <caption>家庭账单</caption>
   <tr>
      <th colspan="2" rowspan="2">本周项目</th>
      <th colspan="2">费用明细</th>
      <th rowspan="2">备注</th>
   </tr>

   <tr>
      <th>收入</th>
      <th>支出</th>
    </tr>

    <tr>
      <th rowspan="3" >收入</th>   
       <th colspan="1">工资</th>
       <td>10000</td>
       <td>0</td>
       <td></td>
   </tr>

   <tr>
      <th colspan="1">兼职</th>
      <td>2000</td>
      <td>0</td>
      <td></td>
   </tr>

   <tr>
      <th colspan="1">收入合计</th>
      <td>12000</td>
      <td>0</td>
      <td></td>
   </tr>

   <tr>
      <th rowspan="3" >支出</th>   
       <th colspan="1">生活用品</th>
       <td>0</td>
       <td>4000</td>
       <td></td>
   </tr>

   <tr>
      <th colspan="1">学杂费</th>
      <td>0</td>
      <td>3000</td>
      <td></td>
   </tr>

   <tr>
      <th colspan="1">支出合计</th>
      <td>0</td>
      <td>7000</td>
      <td></td>
   </tr>

 </table> 
</body>  
<!-- ********* End ********* -->
</html>