HTML表格制作课程表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>表格实战：课程表</title>
  6.   </head>
  7.   <body>
  8.     <table
  9.       border="1"
  10.       width="80%"
  11.       cellspacing="0"
  12.       cellpadding="5"
  13.       align="center"
  14.     >
  15.       <caption>
  16.         <h3>小学三(一)班课程表</h3>
  17.       </caption>
  18.       <!-- 表头开始 -->
  19.       <thead>
  20.         <tr bgcolor="lightcyan">
  21.           <!-- th:是添加了加粗和居中样式的的td,是td的plus加强版,适合做表头标题  -->
  22.           <th>时间</th>
  23.           <th>星期一</th>
  24.           <th>星期二</th>
  25.           <th>星期三</th>
  26.           <th>星期四</th>
  27.           <th>星期五</th>
  28.         </tr>
  29.       </thead>
  31.       <!-- 表体1: 上午三节课 -->
  32.       <tbody align="center">
  33.         <tr>
  34.           <th rowspan="3">上午</th>
  35.           <td>数学</td>
  36.           <td>数学</td>
  37.           <td>数学</td>
  38.           <td>阅读</td>
  39.           <td>英语</td>
  40.         </tr>
  41.         <tr>
  42.           <td>语文</td>
  43.           <td>体育</td>
  44.           <td>语文</td>
  45.           <td>数游</td>
  46.           <td>数学</td>
  47.         </tr>
  48.         <tr>
  49.           <td>美术</td>
  50.           <td>语文</td>
  51.           <td>音乐</td>
  52.           <td>科学</td>
  53.           <td>劳技</td>
  54.         </tr>
  55.       </tbody>
  57.       <!-- 中间休息,整行所有单元格合并 -->
  58.       <tbody>
  59.         <tr align="center" bgcolor="#dedede">
  60.           <td colspan="6">中午休息</td>
  61.         </tr>
  62.       </tbody>
  64.       <!-- 下午课程结构与上午类似,直接复制上午课程的代码 -->
  65.       <!-- 下午没有星期几,直接将课程上移到第一行中即可 -->
  66.       <tbody align="center">
  67.         <tr>
  68.           <th rowspan="2">下午</th>
  69.           <td>思品</td>
  70.           <td>音乐</td>
  71.           <td>书法</td>
  72.           <td>作文</td>
  73.           <td>体育</td>
  74.         </tr>
  75.         <tr>
  76.           <td>美术</td>
  77.           <td>体活</td>
  78.           <td>英语</td>
  79.           <td>作文</td>
  80.           <td>省情</td>
  81.         </tr>
  82.       </tbody>
  84.       <!-- 表尾: 底部备注 -->
  85.       <tfoot>
  86.         <tr bgcolor="lightcyan">
  87.           <td>备注:</td>
  88.           <!-- 从第2列开始水平合并5列 -->
  89.           <td colspan="5">每天下午16:50 放学回家</td>
  90.         </tr>
  91.       </tfoot>
  92.     </table>
  93.   </body>
  94. </html>

HTML表单的应用实例

  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>表单信息</title>
  8.   </head>
  9.   <body>
  10.     <!-- 表单：get方式数据信息在url中，post方式数据信息在请求体中。 -->
  11.     <form action="" method="post">
  12.       <div>
  13.         <label>用户：<input type="text" /> </label>
  14.       </div>
  16.       <div>
  17.         <label>密码：<input type="password" /></label>
  18.       </div>
  20.       <div>
  21.         <label>邮箱：<input type="text" /> </label>
  22.       </div>
  23.       <div>
  24.         <label for="female">性别：</label>
  25.         <input type="radio" name="gender" id="male" value="male" />
  26.         <label for="male">男</label>
  28.         <input type="radio" name="gender" id="female" value="female" />
  29.         <label for="female">女</label>
  30.       </div>
  31.       <div>
  32.         <label>爱好：</label>
  33.         <input type="checkbox" name="hobby[]" id="game" />
  34.         <label for="game">游戏</label>
  35.         <input type="checkbox" name="hobby[]" id="cooking" />
  36.         <label for="cooking">烹饪</label>
  37.         <input type="checkbox" name="hobby[]" id="travel" />
  38.         <label for="travel">旅游</label>
  39.         <input type="checkbox" name="hobby[]" id="shoot" />
  40.         <label for="shoot">摄影</label>
  41.       </div>
  43.       <div>
  44.         <label>等级：</label>
  45.         <select name="level" id="">
  46.           <option value="1">铜牌会员</option>
  47.           <option value="2">银牌会员</option>
  48.           <option value="3" selected>金牌会员</option>
  49.           <option value="4">钻石会员</option>
  50.         </select>
  51.       </div>
  53.       <div>
  54.         <label for="">关键字:</label>
  55.         <input type="search" name="search" id="" list="my-key" />
  56.         <datalist id="my-key">
  57.           <option value="html"></option>
  58.           <option value="css"></option>
  59.           <option value="javacript"></option>
  60.         </datalist>
  61.       </div>
  63.       <div>
  64.         <input type="submit" value="提交" />
  65.       </div>
  66.     </form>
  67.   </body>
  68. </html>

更多相关文章

  1. HTML中表格和表单的应用实例
  2. 第二天作业(课程表)
  3. 课程表 与 表单制作
  4. php学习日记——课程表
  5. HTML Study 01
  6. 第二课 课程表与注册表单
  7. 开学第二天作业-H5 课程表与注册表单
  8. 使用表格写课程表代码
  9. 课程表、用户表单代码

随机推荐

  1. Windows下Android平台搭建_3
  2. Android仿微信朋友圈上传图片
  3. Android 面试题总结之Android 基础（二）
  4. Android(安卓)APN的设置问题：默认“已起用
  5. android cmd adb命令安装和删除apk应用
  6. 区分android:gravity与android:layout_gr
  7. Android 应用程序之道
  8. Android OS历史版本
  9. Android系统介绍及平台特性
  10. Android加密之文件级加密