Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html 制作课程表 行与列的合并
Blogger Information
Blog 9
fans 0
comment 0
visits 9123
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
html 制作课程表 行与列的合并
Jerry
Original
1175 people have browsed it

课表截图

实验小学课程表 "课表截图"

html源代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>实验小学课程表</title>
  7.     <link rel="stylesheet" href="style/table.css">
  8.   </head>
  9.   <body>
  10.     <table class="lesson">
  11.       <caption>
  12.         实验小学课程表
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.          <th colspan="2"></th>
  17.          <th>周一</th>
  18.          <th>周二</th>
  19.          <th>周三</th>
  20.          <th>周四</th>
  21.          <th>周五</th>
  22.         </tr>
  23.       </thead>
  24.       <tbody>
  25.         <tr>
  26.           <td rowspan="4">上午</td>
  27.           <td>1</td>
  28.           <td>英语</td>
  29.           <td>数学</td>
  30.           <td>语文</td>
  31.           <td>语文</td>
  32.           <td>数学</td>
  33.         </tr>
  34.         <tr>
  36.           <td>2</td>
  37.           <td>英语</td>
  38.           <td>数学</td>
  39.           <td>语文</td>
  40.           <td>语文</td>
  41.           <td>数学</td>
  42.         </tr>
  43.         <tr>
  45.           <td>3</td>
  46.           <td>英语</td>
  47.           <td>数学</td>
  48.           <td>语文</td>
  49.           <td>语文</td>
  50.           <td>数学</td>
  51.         </tr>
  52.         <tr>
  54.           <td>4</td>
  55.           <td>英语</td>
  56.           <td>数学</td>
  57.           <td>语文</td>
  58.           <td>语文</td>
  59.           <td>数学</td>
  60.         </tr>
  62.         <tr class="rest">
  63.           <td colspan="7">午间休息</td>
  64.         </tr>
  66.         <tr>
  67.           <td rowspan="3">下午</td>
  68.           <td>5</td>
  69.           <td>英语</td>
  70.           <td>数学</td>
  71.           <td>语文</td>
  72.           <td>语文</td>
  73.           <td>数学</td>
  74.         </tr>
  75.         <tr>
  77.           <td>6</td>
  78.           <td>英语</td>
  79.           <td>数学</td>
  80.           <td>语文</td>
  81.           <td>语文</td>
  82.           <td>数学</td>
  83.         </tr>
  84.         <tr>
  86.           <td>7</td>
  87.           <td>课外活动:</td>
  88.           <td colspan="4">各班自行安排</td>
  90.         </tr>
  91.       </tbody>
  92.   </body>
  93. </html>

样式表源代码

  1. /* 商品信息表 */
  2. .product {
  3.   border-collapse: collapse;
  4.   width: 30em;
  5.   margin: auto;
  6.   text-align: center;
  7. }
  8. .product caption {
  9.   font-size: 1.2rem;
  10.   margin-bottom: 0.5em;
  11. }
  12. .product thead tr,
  13. .product tr:hover {
  14.   background-color: lightcyan;
  15.   cursor: pointer;
  16. }
  18. .product td,
  19. .product th {
  20.   border: 1px solid #000;
  21.   padding: 5px;
  22. }
  24. .page {
  25.   text-align: center;
  26. }
  27. .page a {
  28.   text-decoration: none;
  29.   color: #666;
  30.   padding: 2px 5px;
  31.   border: 1px solid #000;
  32. }
  33. .page a.active,
  34. .page a:hover {
  35.   background-color: lightcyan;
  36. }
  38. /* --------------------------------------- */
  40. /* 课程表: 行与列的合并 */
  41. .lesson {
  42.   border-collapse: collapse;
  43.   width: 40em;
  44.   text-align: center;
  45.   margin: auto;
  46. }
  48. .lesson caption {
  49.   font-size: 1.2rem;
  50.   margin: 1em;
  51. }
  52. .lesson thead {
  53.   background-color: lightcyan;
  54. }
  55. .lesson th,
  56. .lesson td {
  57.   border: 1px solid;
  58.   padding: 0.5em;
  59. }
  60. .lesson .rest {
  61.   background-color: #efefef;
  62. }
  63. .lesson td[rowspan="4"],
  64. .lesson td[rowspan="3"] {
  65.   background-color: rgb(186, 245, 213);
  66. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
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