Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 用表格知识制作一个课程表
Blogger Information
Blog 40
fans 0
comment 0
visits 16120
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
用表格知识制作一个课程表
飞天001
Original
675 people have browsed it

通过对表格的知识学习，了解到有关表格的几个复合标签和合并属性，通过对这些复合标签和合并属性的应用制作出一个课程表。

复合标签：

<table><caption><thead><tbody><tfood><tr><td><th>

合并属性：

属性 用途
rowspan 垂直行的合并（垂直方向把多行合并成一行）
colspan 水平列的合并（水平方向把多列合并成一列）

  • 利用这些表格的复合标签制作课程表代码如下：

    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>
    8. </head>
    9. <body>
    10.   <table border="1" width="800" cellspacing="0" cellpadding="8">
    11.       <caption><h3>课程表</h3></caption>
    12.       <thead align="center">
    13.           <th colspan="7">**小学四年级二班课程表</th>
    14.           <tr bgcolor="#cccccc">
    15.               <td colspan="2">时间</td>               
    16.               <td>星期一</td>
    17.               <td>星期二</td>
    18.               <td>星期三</td>
    19.               <td>星期四</td>
    20.               <td>星期五</td>
    21.           </tr>
    22.       </thead>
    23.       <tbody align="center">       
    24.           <tr>
    25.               <td rowspan="6">上午</td>
    26.               <td>8:00-8:40</td>
    27.               <td>晨读</td>
    28.               <td>晨读</td>
    29.               <td>晨读</td>
    30.               <td>晨读</td>
    31.               <td>晨读</td>
    32.           </tr>
    33.           <tr>
    34.               <td>8:40-9:20</td>
    35.               <td>数学</td>
    36.               <td>体育与健康</td>
    37.               <td>艺术</td>
    38.               <td>语文</td>
    39.               <td>语文</td>
    40.           </tr>
    41.           <tr>
    42.               <td>9:30-10:10</td>
    43.               <td>语文</td>
    44.               <td>英语</td>
    45.               <td>数学</td>
    46.               <td>体育与健康</td>
    47.               <td>道德与法治</td>
    49.           </tr>
    50.           <tr>
    51.               <td>10:10-10:45</td>
    52.               <td colspan="5" align="center">大课间</td>
    53.           </tr>
    54.           <tr>
    55.               <td>10:45-11:25</td>
    56.               <td>艺术</td>
    57.               <td>地方课程</td>
    58.               <td>英语</td>
    59.               <td>数学</td>
    60.               <td>数学</td>   
    61.           </tr>
    62.           <tr>
    63.               <td>11:35-12:20</td>
    64.               <td>英语</td>
    65.               <td>语文</td>
    66.               <td>体育与健康</td>
    67.               <td>劳动</td>
    68.               <td>书法</td>
    69.           </tr>
    70.           <tr>
    71.               <td>中午</td>
    72.               <td>12:20-13:50</td>
    73.               <td colspan="5" align="center">午餐、午会、广播、眼操</td>  
    74.           </tr>
    75.           <tr>
    76.               <td rowspan="2">下午</td>
    77.               <td>14:00-14:40</td>
    78.               <td>艺术</td>
    79.               <td>道德与法治</td>
    80.               <td>语文</td>
    81.               <td>信息技术</td>
    82.               <td>班会</td>
    83.           </tr>
    84.           <tr>
    85.               <td>14:50-15:30</td>
    86.               <td>科学</td>
    87.               <td>科学</td>
    88.               <td>艺术</td>
    89.               <td>体育与健康</td>
    90.               <td>综合实践</td>  
    91.           </tr>
    92.           <tr>
    93.               <td rowspan="3">延时</td>
    94.               <td>15:30-16:10</td>
    95.               <td>数学</td>
    96.               <td>语文</td>
    97.               <td>语文</td>
    98.               <td>语文</td>
    99.               <td>数学</td>
    100.           </tr>
    101.           <tr>
    102.               <td>16:10-16:50</td>
    103.               <td>语文</td>
    104.               <td>语文</td>
    105.               <td>语文</td>
    106.               <td>语文</td>
    107.               <td>数学</td>
    108.           </tr>
    109.           <tr>
    110.               <td>16:50-17:30</td>
    111.               <td>数学</td>
    112.               <td>英文</td>
    113.               <td>数学</td>
    114.               <td>语文</td>
    115.               <td>英语</td> 
    116.           </tr>
    117.           <tfoot align="center">
    118.               <tr>
    119.                   <td>备注</td>
    120.                   <td colspan="6" align="center">备注内容</td> 
    121.               </tr> 
    122.           </tfoot>
    123.       </tbody>
    124.   </table>
    125. </body>
    126. </html>

执行效果如下：

参考链接：
亿图脑图链接：https://www.edrawsoft.cn/viewer/public/s/4ec75210557659

Correcting teacher：PHPzPHPz

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