用表格知识制作一个课程表 - 培训 - 前端 - 作业

首页 > 博客列表 > 用表格知识制作一个课程表

博主信息

博文 40

粉丝 0

访问量 26895

专题推荐

更多>

复合标签：

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

合并属性：

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格-课程表</title>
</head>
<body>
  <table border="1" width="800" cellspacing="0" cellpadding="8">
      <caption><h3>课程表</h3></caption>
      <thead align="center">
          <th colspan="7">**小学四年级二班课程表</th>
          <tr bgcolor="#cccccc">
              <td colspan="2">时间</td>               
              <td>星期一</td>
              <td>星期二</td>
              <td>星期三</td>
              <td>星期四</td>
              <td>星期五</td>
          </tr>
      </thead>
      <tbody align="center">       
          <tr>
              <td rowspan="6">上午</td>
              <td>8:00-8:40</td>
              <td>晨读</td>
              <td>晨读</td>
              <td>晨读</td>
              <td>晨读</td>
              <td>晨读</td>
          </tr>
          <tr>
              <td>8:40-9:20</td>
              <td>数学</td>
              <td>体育与健康</td>
              <td>艺术</td>
              <td>语文</td>
              <td>语文</td>
          </tr>
          <tr>
              <td>9:30-10:10</td>
              <td>语文</td>
              <td>英语</td>
              <td>数学</td>
              <td>体育与健康</td>
              <td>道德与法治</td>
          </tr>
          <tr>
              <td>10:10-10:45</td>
              <td colspan="5" align="center">大课间</td>
          </tr>
          <tr>
              <td>10:45-11:25</td>
              <td>艺术</td>
              <td>地方课程</td>
              <td>英语</td>
              <td>数学</td>
              <td>数学</td>   
          </tr>
          <tr>
              <td>11:35-12:20</td>
              <td>英语</td>
              <td>语文</td>
              <td>体育与健康</td>
              <td>劳动</td>
              <td>书法</td>
          </tr>
          <tr>
              <td>中午</td>
              <td>12:20-13:50</td>
              <td colspan="5" align="center">午餐、午会、广播、眼操</td>  
          </tr>
          <tr>
              <td rowspan="2">下午</td>
              <td>14:00-14:40</td>
              <td>艺术</td>
              <td>道德与法治</td>
              <td>语文</td>
              <td>信息技术</td>
              <td>班会</td>
          </tr>
          <tr>
              <td>14:50-15:30</td>
              <td>科学</td>
              <td>科学</td>
              <td>艺术</td>
              <td>体育与健康</td>
              <td>综合实践</td>  
          </tr>
          <tr>
              <td rowspan="3">延时</td>
              <td>15:30-16:10</td>
              <td>数学</td>
              <td>语文</td>
              <td>语文</td>
              <td>语文</td>
              <td>数学</td>
          </tr>
          <tr>
              <td>16:10-16:50</td>
              <td>语文</td>
              <td>语文</td>
              <td>语文</td>
              <td>语文</td>
              <td>数学</td>
          </tr>
          <tr>
              <td>16:50-17:30</td>
              <td>数学</td>
              <td>英文</td>
              <td>数学</td>
              <td>语文</td>
              <td>英语</td> 
          </tr>
          <tfoot align="center">
              <tr>
                  <td>备注</td>
                  <td colspan="6" align="center">备注内容</td> 
              </tr> 
          </tfoot>
      </tbody>
  </table>
</body>
</html>

执行效果如下：

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

批改老师：

PHPz

批改状态：合格

老师批语：完成的很好，继续加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php学习准备内容

2023-03-02 18:03:17