educoder实训平台-----html5—表格高级样式的设置

最新推荐文章于 2024-09-26 20:38:32 发布

白夜的月亮

最新推荐文章于 2024-09-26 20:38:32 发布

阅读量717

点赞数 1

CC 4.0 BY-SA版权

分类专栏： educoder平台实训html-web实训文章标签： python 字符串 html

本文链接：https://blog.youkuaiyun.com/m0_59076472/article/details/121590025

educoder平台实训html-web实训专栏收录该内容

30 篇文章

订阅专栏

这篇博客通过五个关卡介绍了如何使用HTML5来设置表格的高级样式，包括外边框、内边框、单元格合并以及综合案例。内容涵盖了表格的外框属性如`frame`和`rules`，内框属性`border`，单元格`colspan`和`rowspan`的合并，以及使用CSS进行背景颜色和对齐方式的设定。实例展示了家庭账单的表格布局，强调了样式在表格呈现中的重要性。

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

educoder实训平台-----html5—表格高级样式的设置

第1关：表格高级样式设置相关概念
CABAD
第2关：设置表格的外边框样式

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

<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关：表格中单元格的合并

<!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>
        <tr>
        <th rowspan="2">姓名</th>
        <th colspan="2">签到</th>
        <th rowspan="2">备注</th>
        </tr>
        <tr>
           <th>第1次</td>
           <th>第2次</td>
        </tr>
        <tr>
           <td>张三</td>
           <td></td>
           <td></td>
           <td></td>
        </tr>
    </table>   
 </body>
</html>

第5关：表格的综合案例

<!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 width="600" cellpadding="6" align="center" bordercolor="#00ff00" border="2">
 <caption>家庭账单</caption>
   <tr>
      <th colspan="2" rowspan="2">本周项目</th>
      <th colspan="2">费用明细</th>
      <th rowspan="2">备注</th>
 </tr>
 <tr>
      <th>收入</td>
      <th>支出</td>
 </tr>
  <tr>
     <th rowspan="3">收入</td>
      <th>工资</td>
      <td>10000</td>
      <td>0</td>
      <td></td>
 </tr>
  <tr>
      <th>兼职</td>
      <td>2000</td>
      <td>0</td>
      <td></td>
 </tr>
  <tr>
      <th>收入合计</td>
      <td>12000</td>
      <td>0</td>
      <td></td>
 </tr>
     <tr>
        <th rowspan="3">支出</td>
      <th>生活用品</td>
      <td>0</td>
      <td>4000</td>
      <td></td>
 </tr>
     <tr>
      <th>学杂费</td>
      <td>0</td>
      <td>3000</td>
      <td></td>
 </tr>
     <tr>
      <th>支出合计</td>
      <td>0</td>
      <td>7000</td>
      <td></td>
 </tr>  
       
 </table>
</body>
<!-- ********* End ********* -->
</html>