Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML中表格和表单的应用实例 (MD)
Blogger Information
Blog 17
fans 0
comment 0
visits 14799
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中表格和表单的应用实例 (MD)
未来星
Original
885 people have browsed it

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>
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