ASCII码 ASCII码

CSS:表格的常用样式-复习

发布于：2022-05-18 12:57:52  栏目：技术文档

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>
  8. </head>
  9. <body>
  10.     <style>
  11.         /* 1 表格线 */
  12.         td,
  13.         th{
  14.             border: 1px solid #000;
  15.         }
  17.         /* 2 表格线间隙折叠 */
  18.         table{
  19.             border-collapse: collapse;
  20.             width: 90%;
  21.             text-align: center;
  22.             margin: 2em auto;
  23.         }
  25.         /* 3 标题 */
  26.         table caption{
  27.             font-weight: bolder;
  28.             margin-bottom: 1em;
  29.         }
  31.         /* 4 表头背景 */
  32.         table thead{
  33.             background-color: lightgreen;
  34.         }
  36.         /* 5 上午和下午的单元格设置背景 */
  37.         .period{
  38.             background-color: lightblue;
  39.         }
  41.         /* 6 伪类 */
  42.         table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
  43.         background-color: lightcoral;
  44.       }
  46.     </style>
  47.     <table>
  48.         <caption>深圳市富民小学四年级课程表</caption>
  49.         <thead>
  50.             <tr>
  51.                 <th>时间</th>
  52.                 <th>周一</th>
  53.                 <th>周二</th>
  54.                 <th>周三</th>
  55.                 <th>周四</th>
  56.                 <th>周五</th>  
  57.             </tr>
  58.         </thead>
  59.         <!-- 上午 -->
  60.         <tbody>
  61.             <tr>
  62.                 <td rowspan="4" class="period">上午</td>
  63.                 <td>数学</td>
  64.                 <td>数学</td>
  65.                 <td>数学</td>
  66.                 <td>数学</td>
  67.                 <td>数学</td>
  68.             </tr>
  69.             <tr>
  70.                 <td>数学</td>
  71.                 <td>数学</td>
  72.                 <td>数学</td>
  73.                 <td>数学</td>
  74.                 <td>数学</td>
  75.             </tr>
  76.             <tr>
  77.                 <td>数学</td>
  78.                 <td>数学</td>
  79.                 <td>数学</td>
  80.                 <td>数学</td>
  81.                 <td>数学</td>
  82.             </tr>
  83.             <tr>
  84.                 <td>数学</td>
  85.                 <td>数学</td>
  86.                 <td>数学</td>
  87.                 <td>数学</td>
  88.                 <td>数学</td>
  89.             </tr>
  90.         </tbody>
  92.         <!-- 中午 -->
  93.         <tbody>
  94.             <tr>
  95.                 <td colspan="6">中午休息</td>
  96.             </tr>
  97.         </tbody>
  99.         <!-- 下午 -->
  100.         <tbody>
  101.             <tr>
  102.                 <td rowspan="3" class="period">下午</td>
  103.                 <td>数学</td>
  104.                 <td>数学</td>
  105.                 <td>数学</td>
  106.                 <td>数学</td>
  107.                 <td>数学</td>
  108.             </tr>
  109.             <tr>
  110.                 <td>数学</td>
  111.                 <td>数学</td>
  112.                 <td>数学</td>
  113.                 <td>数学</td>
  114.                 <td>数学</td>
  115.             </tr>
  116.             <tr>
  117.                 <td>数学</td>
  118.                 <td>数学</td>
  119.                 <td>数学</td>
  120.                 <td>数学</td>
  121.                 <td>数学</td>
  122.             </tr>
  123.         </tbody>
  124.         <tfoot>
  125.             <tr>
  126.                 <td>备注：</td>
  127.                 <td colspan="5">每天下午15:30-17:30在校写作业</td>
  128.             </tr>
  129.         </tfoot>
  130.     </table>
  131. </body>
  132. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行