Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > CSS:表格的常用样式-复习
Blogger Information
Blog 56
fans 0
comment 4
visits 38121
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS:表格的常用样式-复习
异乡客
Original
671 people have browsed it

  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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post