search

博客列表 >1017作业课程表-表格-斜线表头-圆角表格

1017作业课程表-表格-斜线表头-圆角表格

陈翔
陈翔原创
2022年10月18日 12:37:54821浏览

  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>Document</title>
  8.     <style>
  9.         table, th, td {border: 1px solid black;margin:auto;text-align:center;}
  10.         table {border-collapse: collapse;}
  11.         td,th{width: 100px;height: 50px;}
  12.         .c11{background: rgb(198, 224, 180);}​​
  13.     </style>
  14. </head>
  15. <body>
  16.     <table border="1">
  17.         <tr>
  18.             <th colspan="8">课程表</th>
  19.         </tr>
  20.         <tr class="c11">
  21.             <td colspan="2">时间星期</td>
  23.             <td>星期一</td>
  24.             <td>星期二</td>
  25.             <td>星期三</td>
  26.             <td>星期四</td>
  27.             <td>星期五</td>
  28.             <td>星期六</td>
  29.         </tr>
  30.         <tr>
  31.             <td colspan="2">早晨<br>07:00-07:50</td>
  32.             <td>&nbsp;</td>
  33.             <td>&nbsp;</td>
  34.             <td>&nbsp;</td>
  35.             <td>&nbsp;</td>
  36.             <td>&nbsp;</td>
  37.             <td>&nbsp;</td>
  38.         </tr>
  39.         <tr>
  40.             <td rowspan="4">上午</td>
  41.             <td>第一节<br>08:00-08:40</td>
  42.             <td>&nbsp;</td>
  43.             <td>&nbsp;</td>
  44.             <td>&nbsp;</td>
  45.             <td>&nbsp;</td>
  46.             <td>&nbsp;</td>
  47.             <td>&nbsp;</td>
  48.         </tr>
  49.         <tr>
  51.             <td>第二节<br>08:50-09:30</td>
  52.             <td>&nbsp;</td>
  53.             <td>&nbsp;</td>
  54.             <td>&nbsp;</td>
  55.             <td>&nbsp;</td>
  56.             <td>&nbsp;</td>
  57.             <td>&nbsp;</td>
  58.         </tr>
  59.         <tr>
  61.             <td>第三节<br>09:40-10:20</td>
  62.             <td>&nbsp;</td>
  63.             <td>&nbsp;</td>
  64.             <td>&nbsp;</td>
  65.             <td>&nbsp;</td>
  66.             <td>&nbsp;</td>
  67.             <td>&nbsp;</td>
  68.         </tr>
  69.         <tr>
  71.             <td>第四节<br>10:30-11:20</td>
  72.             <td>&nbsp;</td>
  73.             <td>&nbsp;</td>
  74.             <td>&nbsp;</td>
  75.             <td>&nbsp;</td>
  76.             <td>&nbsp;</td>
  77.             <td>&nbsp;</td>
  78.         </tr>
  79.         <tr class="c11">
  80.             <td colspan="8">午休<br>12:00-14:00</td>
  81.         </tr>
  82.         <tr>
  83.             <td rowspan="3">下午</td>
  84.             <td>第五节<br>14:00-14:40</td>
  85.             <td>&nbsp;</td>
  86.             <td>&nbsp;</td>
  87.             <td>&nbsp;</td>
  88.             <td>&nbsp;</td>
  89.             <td>&nbsp;</td>
  90.             <td>&nbsp;</td>
  91.         </tr>
  92.         <tr>
  94.             <td>第六节<br>14:50-15:30</td>
  95.             <td>&nbsp;</td>
  96.             <td>&nbsp;</td>
  97.             <td>&nbsp;</td>
  98.             <td>&nbsp;</td>
  99.             <td>&nbsp;</td>
  100.             <td>&nbsp;</td>
  101.         </tr>
  102.         <tr>
  104.             <td>第七节<br>15:40-16:40</td>
  105.             <td>&nbsp;</td>
  106.             <td>&nbsp;</td>
  107.             <td>&nbsp;</td>
  108.             <td>&nbsp;</td>
  109.             <td>&nbsp;</td>
  110.             <td>&nbsp;</td>
  111.         </tr>
  112.         <tr class="c11">
  113.             <td colspan="8">晚间<br>19:00-21:30</td>
  115.         </tr>
  116.     </table>
  117. </body>
  118. </html>

最终效果,斜线表头不会做

网上找的,加斜线表头

  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>Document</title>
  8.     <style>
  9.         table, th, td {border: 1px solid black;margin:auto;text-align:center;}
  10.         table {border-collapse: collapse;}
  11.         td,th{width: 100px;height: 50px;}
  12.         .c11{background: rgb(198, 224, 180);}
  14.         .oblique-line {
  15.             position: relative;
  16.             width: 80px;
  17.             line-height: 5px;
  18.             text-align: left;
  19.         }
  21.             .oblique-line:before {
  22.                 content: "";
  23.                 position: absolute;
  24.                 width: 1px;
  25.                 height: 210px; /*斜线长度*/
  26.                 top: 0%;
  27.                 left: 0%;
  28.                 background-color: rgb(43, 39, 39);
  29.                 display: block;
  30.                 transform: rotate(-76deg); /*调整角度*/
  31.                 transform-origin: top;
  32.             }
  34.         .left-bottom-div {
  35.             height: 22px;
  36.             line-height: 22px;
  37.             position: absolute;
  38.             left: 4px;
  39.             bottom: 0px;
  40.         }
  42.         .right-top-div {
  43.             height: 22px;
  44.             line-height: 22px;
  45.             position: absolute;
  46.             right: 4px;
  47.             top: 0px;
  48.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <table border="1">
  54.         <tr>
  55.             <th colspan="8">课程表</th>
  56.         </tr>
  57.         <tr class="c11">
  58.             <th class="oblique-line" colspan="2">
  59.                 <div>
  60.                     <div class="left-bottom-div">星期</div>
  61.                     <div class="right-top-div">时间</div>
  62.                 </div>
  63.             </th>
  65.             <td>星期一</td>
  66.             <td>星期二</td>
  67.             <td>星期三</td>
  68.             <td>星期四</td>
  69.             <td>星期五</td>
  70.             <td>星期六</td>
  71.         </tr>
  72.         <tr>
  73.             <td colspan="2">早晨<br>07:00-07:50</td>
  74.             <td>&nbsp;</td>
  75.             <td>&nbsp;</td>
  76.             <td>&nbsp;</td>
  77.             <td>&nbsp;</td>
  78.             <td>&nbsp;</td>
  79.             <td>&nbsp;</td>
  80.         </tr>
  81.         <tr>
  82.             <td rowspan="4">上午</td>
  83.             <td>第一节<br>08:00-08:40</td>
  84.             <td>&nbsp;</td>
  85.             <td>&nbsp;</td>
  86.             <td>&nbsp;</td>
  87.             <td>&nbsp;</td>
  88.             <td>&nbsp;</td>
  89.             <td>&nbsp;</td>
  90.         </tr>
  91.         <tr>
  93.             <td>第二节<br>08:50-09:30</td>
  94.             <td>&nbsp;</td>
  95.             <td>&nbsp;</td>
  96.             <td>&nbsp;</td>
  97.             <td>&nbsp;</td>
  98.             <td>&nbsp;</td>
  99.             <td>&nbsp;</td>
  100.         </tr>
  101.         <tr>
  103.             <td>第三节<br>09:40-10:20</td>
  104.             <td>&nbsp;</td>
  105.             <td>&nbsp;</td>
  106.             <td>&nbsp;</td>
  107.             <td>&nbsp;</td>
  108.             <td>&nbsp;</td>
  109.             <td>&nbsp;</td>
  110.         </tr>
  111.         <tr>
  113.             <td>第四节<br>10:30-11:20</td>
  114.             <td>&nbsp;</td>
  115.             <td>&nbsp;</td>
  116.             <td>&nbsp;</td>
  117.             <td>&nbsp;</td>
  118.             <td>&nbsp;</td>
  119.             <td>&nbsp;</td>
  120.         </tr>
  121.         <tr class="c11">
  122.             <td colspan="8">午休<br>12:00-14:00</td>
  123.         </tr>
  124.         <tr>
  125.             <td rowspan="3">下午</td>
  126.             <td>第五节<br>14:00-14:40</td>
  127.             <td>&nbsp;</td>
  128.             <td>&nbsp;</td>
  129.             <td>&nbsp;</td>
  130.             <td>&nbsp;</td>
  131.             <td>&nbsp;</td>
  132.             <td>&nbsp;</td>
  133.         </tr>
  134.         <tr>
  136.             <td>第六节<br>14:50-15:30</td>
  137.             <td>&nbsp;</td>
  138.             <td>&nbsp;</td>
  139.             <td>&nbsp;</td>
  140.             <td>&nbsp;</td>
  141.             <td>&nbsp;</td>
  142.             <td>&nbsp;</td>
  143.         </tr>
  144.         <tr>
  146.             <td>第七节<br>15:40-16:40</td>
  147.             <td>&nbsp;</td>
  148.             <td>&nbsp;</td>
  149.             <td>&nbsp;</td>
  150.             <td>&nbsp;</td>
  151.             <td>&nbsp;</td>
  152.             <td>&nbsp;</td>
  153.         </tr>
  154.         <tr class="c11">
  155.             <td colspan="8">晚间<br>19:00-21:30</td>
  157.         </tr>
  158.     </table>
  159. </body>
  160. </html>

圆角表格

  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>
  10.     <style>
  12.         table {
  13.             border: 1px solid black;
  14.             border-radius: 10px;
  15.             border-collapse: collapse;
  16.             border-style:hidden;
  17.             margin:auto;
  18.             text-align:center;
  19.             box-shadow: 0 0 0 1px #700b0b;
  20.         }
  21.         td,th{
  22.             width: 100px;
  23.             height: 50px;
  24.             border: 1px solid #631c1c;
  25.         }
  27.         .c1{background: rgb(198, 224, 180);}
  29.         .oblique-line {
  30.             position: relative;
  31.             width: 80px;
  32.             line-height: 5px;
  33.             text-align: left;
  34.         }
  35.             .oblique-line:before {
  36.                 content: "";
  37.                 position: absolute;
  38.                 width: 1px;
  39.                 height: 210px; /*斜线长度*/
  40.                 top: 0%;
  41.                 left: 0%;
  42.                 background-color: rgb(43, 39, 39);
  43.                 display: block;
  44.                 transform: rotate(-76deg); /*调整角度*/
  45.                 transform-origin: top;
  46.             }
  47.         .left-bottom-div {
  48.             height: 22px;
  49.             line-height: 22px;
  50.             position: absolute;
  51.             left: 4px;
  52.             bottom: 0px;
  53.         }
  54.         .right-top-div {
  55.             height: 22px;
  56.             line-height: 22px;
  57.             position: absolute;
  58.             right: 4px;
  59.             top: 0px;
  60.         }
  61.     </style>
  62. </head>
  63. <body>
  64.     <table>
  65.         <tr>
  66.             <th colspan="8">课程表</th>
  67.         </tr>
  68.         <tr class="c1">
  69.             <td class="oblique-line" colspan="2">
  70.                 <div>
  71.                     <div class="left-bottom-div">星期</div>
  72.                     <div class="right-top-div">时间</div>
  73.                 </div>
  74.             </td>
  76.             <td>星期一</td>
  77.             <td>星期二</td>
  78.             <td>星期三</td>
  79.             <td>星期四</td>
  80.             <td>星期五</td>
  81.             <td>星期六</td>
  82.         </tr>
  83.         <tr>
  84.             <td colspan="2">早晨<br>07:00-07:50</td>
  85.             <td>&nbsp;</td>
  86.             <td>&nbsp;</td>
  87.             <td>&nbsp;</td>
  88.             <td>&nbsp;</td>
  89.             <td>&nbsp;</td>
  90.             <td>&nbsp;</td>
  91.         </tr>
  92.         <tr>
  93.             <td rowspan="4">上午</td>
  94.             <td>第一节<br>08:00-08:40</td>
  95.             <td>&nbsp;</td>
  96.             <td>&nbsp;</td>
  97.             <td>&nbsp;</td>
  98.             <td>&nbsp;</td>
  99.             <td>&nbsp;</td>
  100.             <td>&nbsp;</td>
  101.         </tr>
  102.         <tr>
  104.             <td>第二节<br>08:50-09:30</td>
  105.             <td>&nbsp;</td>
  106.             <td>&nbsp;</td>
  107.             <td>&nbsp;</td>
  108.             <td>&nbsp;</td>
  109.             <td>&nbsp;</td>
  110.             <td>&nbsp;</td>
  111.         </tr>
  112.         <tr>
  114.             <td>第三节<br>09:40-10:20</td>
  115.             <td>&nbsp;</td>
  116.             <td>&nbsp;</td>
  117.             <td>&nbsp;</td>
  118.             <td>&nbsp;</td>
  119.             <td>&nbsp;</td>
  120.             <td>&nbsp;</td>
  121.         </tr>
  122.         <tr>
  124.             <td>第四节<br>10:30-11:20</td>
  125.             <td>&nbsp;</td>
  126.             <td>&nbsp;</td>
  127.             <td>&nbsp;</td>
  128.             <td>&nbsp;</td>
  129.             <td>&nbsp;</td>
  130.             <td>&nbsp;</td>
  131.         </tr>
  132.         <tr class="c1">
  133.             <td colspan="8">午休<br>12:00-14:00</td>
  134.         </tr>
  135.         <tr>
  136.             <td rowspan="3">下午</td>
  137.             <td>第五节<br>14:00-14:40</td>
  138.             <td>&nbsp;</td>
  139.             <td>&nbsp;</td>
  140.             <td>&nbsp;</td>
  141.             <td>&nbsp;</td>
  142.             <td>&nbsp;</td>
  143.             <td>&nbsp;</td>
  144.         </tr>
  145.         <tr>
  147.             <td>第六节<br>14:50-15:30</td>
  148.             <td>&nbsp;</td>
  149.             <td>&nbsp;</td>
  150.             <td>&nbsp;</td>
  151.             <td>&nbsp;</td>
  152.             <td>&nbsp;</td>
  153.             <td>&nbsp;</td>
  154.         </tr>
  155.         <tr>
  157.             <td>第七节<br>15:40-16:40</td>
  158.             <td>&nbsp;</td>
  159.             <td>&nbsp;</td>
  160.             <td>&nbsp;</td>
  161.             <td>&nbsp;</td>
  162.             <td>&nbsp;</td>
  163.             <td>&nbsp;</td>
  164.         </tr>
  165.         <tr class="c1">
  166.             <td colspan="8">晚间<br>19:00-21:30</td>
  168.         </tr>
  169.     </table>
  170. </body>
  171. </html>

底部背景增加圆角

  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>
  10.     <style>
  12.         table {
  13.             border: 1px solid black;
  14.             border-radius: 10px 20px 20px 20px;
  15.             border-collapse: collapse;
  16.             border-style:hidden;
  17.             margin:auto;
  18.             text-align:center;
  19.             box-shadow: 0 0 0 1px #1a1919;
  20.             /* background: rgb(198, 224, 180); */
  21.         }
  22.         td,th{
  23.             width: 100px;
  24.             height: 50px;
  25.             border: 1px solid #1b1919;
  26.         }
  29.         .c1{
  30.             background: rgb(198, 224, 180);
  31.             border-radius: 25px;
  32.         }
  34.         .c2{
  35.             background-color: rgb(198, 224, 180);
  36.             border-radius: 0px 0px 20px 20px;
  37.         }
  39.         .oblique-line {
  40.             position: relative;
  41.             width: 80px;
  42.             line-height: 5px;
  43.             text-align: left;
  44.         }
  45.             .oblique-line:before {
  46.                 content: "";
  47.                 position: absolute;
  48.                 width: 1px;
  49.                 height: 210px; /*斜线长度*/
  50.                 top: 0%;
  51.                 left: 0%;
  52.                 background-color: rgb(43, 39, 39);
  53.                 display: block;
  54.                 transform: rotate(-76deg); /*调整角度*/
  55.                 transform-origin: top;
  56.             }
  57.         .left-bottom-div {
  58.             height: 22px;
  59.             line-height: 22px;
  60.             position: absolute;
  61.             left: 4px;
  62.             bottom: 0px;
  63.         }
  64.         .right-top-div {
  65.             height: 22px;
  66.             line-height: 22px;
  67.             position: absolute;
  68.             right: 4px;
  69.             top: 0px;
  70.         }
  71.     </style>
  72. </head>
  73. <body>
  74.     <table>
  75.         <tr class="c0">
  76.             <th colspan="8">课程表</th>
  77.         </tr>
  78.         <tr class="c1">
  79.             <td class="oblique-line" colspan="2">
  80.                 <div>
  81.                     <div class="left-bottom-div">星期</div>
  82.                     <div class="right-top-div">时间</div>
  83.                 </div>
  84.             </td>
  86.             <td>星期一</td>
  87.             <td>星期二</td>
  88.             <td>星期三</td>
  89.             <td>星期四</td>
  90.             <td>星期五</td>
  91.             <td>星期六</td>
  92.         </tr>
  93.         <tr>
  94.             <td colspan="2">早晨<br>07:00-07:50</td>
  95.             <td>&nbsp;</td>
  96.             <td>&nbsp;</td>
  97.             <td>&nbsp;</td>
  98.             <td>&nbsp;</td>
  99.             <td>&nbsp;</td>
  100.             <td>&nbsp;</td>
  101.         </tr>
  102.         <tr>
  103.             <td rowspan="4">上午</td>
  104.             <td>第一节<br>08:00-08:40</td>
  105.             <td>&nbsp;</td>
  106.             <td>&nbsp;</td>
  107.             <td>&nbsp;</td>
  108.             <td>&nbsp;</td>
  109.             <td>&nbsp;</td>
  110.             <td>&nbsp;</td>
  111.         </tr>
  112.         <tr>
  114.             <td>第二节<br>08:50-09:30</td>
  115.             <td>&nbsp;</td>
  116.             <td>&nbsp;</td>
  117.             <td>&nbsp;</td>
  118.             <td>&nbsp;</td>
  119.             <td>&nbsp;</td>
  120.             <td>&nbsp;</td>
  121.         </tr>
  122.         <tr>
  124.             <td>第三节<br>09:40-10:20</td>
  125.             <td>&nbsp;</td>
  126.             <td>&nbsp;</td>
  127.             <td>&nbsp;</td>
  128.             <td>&nbsp;</td>
  129.             <td>&nbsp;</td>
  130.             <td>&nbsp;</td>
  131.         </tr>
  132.         <tr>
  134.             <td>第四节<br>10:30-11:20</td>
  135.             <td>&nbsp;</td>
  136.             <td>&nbsp;</td>
  137.             <td>&nbsp;</td>
  138.             <td>&nbsp;</td>
  139.             <td>&nbsp;</td>
  140.             <td>&nbsp;</td>
  141.         </tr>
  142.         <tr class="c1">
  143.             <td colspan="8">午休<br>12:00-14:00</td>
  144.         </tr>
  145.         <tr>
  146.             <td rowspan="3">下午</td>
  147.             <td>第五节<br>14:00-14:40</td>
  148.             <td>&nbsp;</td>
  149.             <td>&nbsp;</td>
  150.             <td>&nbsp;</td>
  151.             <td>&nbsp;</td>
  152.             <td>&nbsp;</td>
  153.             <td>&nbsp;</td>
  154.         </tr>
  155.         <tr>
  157.             <td>第六节<br>14:50-15:30</td>
  158.             <td>&nbsp;</td>
  159.             <td>&nbsp;</td>
  160.             <td>&nbsp;</td>
  161.             <td>&nbsp;</td>
  162.             <td>&nbsp;</td>
  163.             <td>&nbsp;</td>
  164.         </tr>
  165.         <tr>
  167.             <td>第七节<br>15:40-16:40</td>
  168.             <td>&nbsp;</td>
  169.             <td>&nbsp;</td>
  170.             <td>&nbsp;</td>
  171.             <td>&nbsp;</td>
  172.             <td>&nbsp;</td>
  173.             <td>&nbsp;</td>
  174.         </tr>
  175.         <tr>
  176.             <td colspan="8" class="c2">晚间<br>19:00-21:30</td>
  178.         </tr>
  179.     </table>
  180. </body>
  181. </html>
上一条：HTML实战作业——课程表下一条：人员信息表表格作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多