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>

更多相关文章

  1. 常用数组函数学习
  2. Android(安卓)listview 制作表格样式+由下往上动画弹出效果实现
  3. Android5大布局方式
  4. Android之自制的分页表格控件
  5. 有序列表、无序列表、定义列表、a标签、图片标签、视频标签、表
  6. Android之自制的分页表格控件
  7. element ui表格实现下拉筛选功能
  8. 字符串处理函数学习小结
  9. Android(安卓)判断数据库中是否存在某个表

随机推荐

  1. 可编辑的表格：jQuery+PHP实现实时编辑表格
  2. 如何让jQuery post与salesforce的WebToLe
  3. 为什么我不能在同一个js文件中建立两个cl
  4. 如何在angularjs代码中单元测试jquery元
  5. 如何在向下滚动时执行TEXT淡入效果
  6. Jquery | 基础 | 慕课网 | 元素选择器
  7. jquery1.9+获取append后的动态元素
  8. 如何更新jqgrid中的数据值
  9. jQuery源码剖析学习笔记
  10. jquery $.ajax $.get $.post的区别是什么