Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html模仿课程表
Blogger Information
Blog 4
fans 0
comment 1
visits 1509
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模仿课程表
表哥
Original
347 people have browsed it

html表格

  1. 先用语句
  2. table>thead>tr*12>td*6{课程表}
  3. 生成一个12行6列的课程表
  4. 再添加标题 
  5.         <caption>学校课程表</caption>
  6. 再table 里面加上画线
  7.     <table width="500" border="3">
  8. 再根据日期以及某节填入对应信息

代码如下

  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>Document</title>
  8. </head>
  9. <body>
  10.     <div class="">模仿课程表</div>
  11.     <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.xschu.com%2FFup%2Fimage%2F202109%2F09-06_170315-1765.png&refer=http%3A%2F%2Fwww.xschu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662412083&t=a90dd404c20310688ad38e8298dffd95" alt="">
  12.     <table width="500" border="3">
  13.         <hr>
  14.         <hr>
  15.         <caption>学校课程表</caption>
  16.         <thead>
  17.             <tr >
  18.                 <th></th>
  19.                 <th bgcolor="yellow">星期一</th>
  20.                 <th bgcolor="yellow">星期二</th>
  21.                 <th bgcolor="yellow">星期三</th>
  22.                 <th bgcolor="yellow">星期四</th>
  23.                 <th bgcolor="yellow">星期五</th>
  24.             </tr>
  25.             <tr>
  26.                 <td bgcolor="yellow">第1节</td>
  27.                 <td>英语</td>
  28.                 <td>英语</td>
  29.                 <td>数学</td>
  30.                 <td>语文</td>
  31.                 <td>数学</td>
  32.             </tr>
  33.             <tr>
  34.                 <td bgcolor="yellow">第2节</td>
  35.                 <td>语文</td>
  36.                 <td>电脑</td>
  37.                 <td>地理</td>
  38.                 <td>生物</td>
  39.                 <td>数学</td>
  40.             </tr>
  41.             <tr>
  42.                 <td bgcolor="yellow">第3节</td>
  43.                 <td>体育</td>
  44.                 <td>语文</td>
  45.                 <td>英语</td>
  46.                 <td>体育</td>
  47.                 <td>历史</td>
  48.             </tr>
  49.             <tr>
  50.                 <td bgcolor="yellow">第4节</td>
  51.                 <td>数学</td>
  52.                 <td>语文</td>
  53.                 <td>体活</td>
  54.                 <td>数学</td>
  55.                 <td>英语</td>
  56.             </tr>
  57.             <tr>
  58.                 <td colspan="6">午休</td>
  59.                 <!-- <td>课程表</td>
  60.                 <td>课程表</td>
  61.                 <td>课程表</td>
  62.                 <td>课程表</td>
  63.                 <td>课程表</td> -->
  64.             </tr>
  65.             <tr>
  66.                 <td bgcolor="yellow">第5节</td>
  67.                 <td>生物</td>
  68.                 <td>心理</td>
  69.                 <td>历史</td>
  70.                 <td>英语</td>
  71.                 <td>美术</td>
  72.             </tr>
  73.             <tr>
  74.                 <td bgcolor="yellow">第6节</td>
  75.                 <td>地理</td>
  76.                 <td>体育</td>
  77.                 <td>道德与法治</td>
  78.                 <td>地理</td>
  79.                 <td>语文</td>
  80.             </tr>
  81.             <tr>
  82.                 <td bgcolor="yellow">第7节</td>
  83.                 <td>班会</td>
  84.                 <td>音乐</td>
  85.                 <td>自习</td>
  86.                 <td>电脑</td>
  87.                 <td>道德与法治</td>
  88.             </tr>
  89.             <tr>
  90.                 <td bgcolor="yellow">第8节</td>
  91.                 <td> </td>
  92.                 <td> </td>
  93.                 <td>课活</td>
  94.                 <td> </td>
  95.                 <td> </td>
  96.             </tr>
  97.             <tr>
  98.                 <td></td>
  99.                 <td> </td>
  100.                 <td> </td>
  101.                 <td>　</td>
  102.                 <td> </td>
  103.                 <td> </td>
  104.             </tr>
  105.             <tr>
  106.                 <td colspan="6"> 　</td>
  107.                 <!-- <td> </td>
  108.                 <td>　 </td>
  109.                 <td> </td>
  110.                 <td> </td>
  111.                 <td> </td> -->
  112.             </tr>
  113.         </thead>
  114.     </table>
  115. </body>
  116. </html>

请问老师在日期节数的背景颜色有什么办法可以一步到位不用每个都加上bgcolor吗？

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：利用css选择器能实现
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