有行与列合并的小案例表格

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
先看图:

实例代码:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>课程表</title>
  9.     <style>
  10.         thead{
  11.             background-color: aquamarine;
  12.         }
  14.         tfoot{
  15.             background-color: aliceblue;
  16.         }
  17.         td{
  18.             text-align: center;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <table border="1px"  align="center">
  24.         <caption>课程表</caption>
  25.         <thead>
  26.             <tr>
  27.                 <th>名字</th>
  28.                 <th>课程</th>
  29.                 <th>练习时长</th>
  30.                 <th>天赋</th>
  31.                 <th>段位</th>
  32.                 <th>分数</th>
  33.             </tr>
  34.         </thead>
  35.         <tbody>
  36.         <tr>
  37.             <td rowspan="4">ikun</td>
  38.             <td>唱</td>
  39.             <td rowspan="6">两年半</td>
  40.             <td>25</td>
  41.             <td>2.5</td>
  42.             <td>5</td>
  43.         </tr>
  44.         <tr>
  45.             <!-- <td>蔡徐坤</td> -->
  46.             <td>跳</td>
  47.             <!-- <td>10</td> -->
  48.             <td>25</td>
  49.             <td>2.5</td>
  50.             <td>5</td>
  51.         </tr>
  52.         <tr>
  53.             <!-- <td>蔡徐坤</td> -->
  54.             <td>Rap</td>
  55.             <!-- <td>10</td> -->
  56.             <td>25</td>
  57.             <td>2.5</td>
  58.             <td>5</td>
  59.         </tr>
  61.         <tr>
  62.             <!-- <td>ikun</td> -->
  63.             <td>篮球</td>
  64.             <!-- <td>10</td> -->
  65.             <td>25</td>
  66.             <td>2.5</td>
  67.             <td>5</td>
  68.         </tr>
  69.         <tr>
  70.             <td rowspan="2">ikun</td>
  71.             <td>背带裤</td>
  72.             <!-- <td>10</td> -->
  73.             <td>-</td>
  74.             <td>2.5</td>
  75.             <td>-</td>
  76.         </tr>
  77.         <tr>
  78.             <!-- <td>蔡徐坤</td> -->
  79.             <td>中分</td>
  80.             <!-- <td>10</td> -->
  81.             <td>25</td>
  82.             <td>-</td>
  83.             <td>5</td>
  84.         </tr>
  86.     </tbody>   
  87.         <tfoot>
  88.             <tr>
  89.                 <td colspan="4">合计</td>
  90.                 <!-- <td>合计</td>
  91.                 <td>合计</td>
  92.                 <td>合计</td> -->
  93.                 <td>半坤</td>
  94.                 <td>25</td>
  95.             </tr>
  96.         </tfoot>
  97.     </table>
  98. </body>
  99. </html>

ps:

rowspan="" 属性为行合并，以当前行开始计算
colspan="" 属性为列合并，以当前列开始计算

【文章原创作者：香港云服务器 http://www.558idc.com/ne.html 复制请保留原URL】
更多阅读