Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html表格与表单实战
Blogger Information
Blog 5
fans 0
comment 0
visits 4972
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
937 people have browsed it

一、html 表格实战

制作一张课程表，或者商品列表，用户信息表，要求用到行与列的合并。

实现效果图：

1表格实战-课程表

实现代码如下：

  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.     <table
  11.       width="50%"
  12.       align="center"
  13.       border="1px"
  14.       cellpadding="5"
  15.       cellspacing="0"
  16.     >
  17.       <caption>
  18.         <h3>合肥市第一小学六（六）班课程表</h3>
  19.       </caption>
  20.       <thead>
  21.         <tr bgcolor="lightcyan">
  22.           <!-- th：是添加了加粗和居中样式的td，td的加强版，适合做表头标题 -->
  23.           <th colspan="2">时间</th>
  24.           <th>星期一</th>
  25.           <th>星期二</th>
  26.           <th>星期三</th>
  27.           <th>星期四</th>
  28.           <th>星期五</th>
  29.         </tr>
  30.       </thead>
  32.       <!-- 表主体1：上午四节课 -->
  33.       <tbody align="center">
  34.         <tr>
  35.           <td rowspan="4" bgcolor="lightblue" style="font-weight: bold">
  36.             上午
  37.           </td>
  38.           <td>1</td>
  39.           <td>数学</td>
  40.           <td>数学</td>
  41.           <td>语文</td>
  42.           <td>英语</td>
  43.           <td>数学</td>
  44.         </tr>
  45.         <tr>
  46.           <td>2</td>
  47.           <td>体育</td>
  48.           <td>语文</td>
  49.           <td>数学</td>
  50.           <td>数学</td>
  51.           <td>英语</td>
  52.         </tr>
  53.         <tr>
  54.           <td>3</td>
  55.           <td>语文</td>
  56.           <td>美术</td>
  57.           <td>英语</td>
  58.           <td>语文</td>
  59.           <td>美术</td>
  60.         </tr>
  61.         <tr>
  62.           <td>4</td>
  63.           <td>语文</td>
  64.           <td>思维</td>
  65.           <td>外教</td>
  66.           <td>体育</td>
  67.           <td>体育</td>
  68.         </tr>
  69.       </tbody>
  71.       <!-- 表主体2：中午休息 -->
  72.       <tbody align="center">
  73.         <tr bgcolor="lightgray">
  74.           <td colspan="7">中午休息</td>
  75.         </tr>
  76.       </tbody>
  78.       <!-- 表主体3：下午三节课。与上午课程类似 -->
  79.       <tbody align="center">
  80.         <tr>
  81.           <td rowspan="3" bgcolor="lightblue" style="font-weight: bold">
  82.             下午
  83.           </td>
  84.           <td>5</td>
  85.           <td>外教</td>
  86.           <td>体育</td>
  87.           <td>语文</td>
  88.           <td>音乐</td>
  89.           <td>语文</td>
  90.         </tr>
  91.         <tr>
  92.           <td>6</td>
  93.           <td>音乐</td>
  94.           <td>品德</td>
  95.           <td>阅读</td>
  96.           <td>品德</td>
  97.           <td>语文</td>
  98.         </tr>
  99.         <tr>
  100.           <td>7</td>
  101.           <td>课外活动</td>
  102.           <td>课外活动</td>
  103.           <td>课外活动</td>
  104.           <td>课外活动</td>
  105.           <td>课外活动</td>
  106.         </tr>
  107.       </tbody>
  109.       <!-- 表尾：底部备注 -->
  110.       <tfoot>
  111.         <tr bgcolor="lightgreen">
  112.           <td>备注：</td>
  113.           <!-- 从第2列开始水平合并6列 -->
  114.           <td colspan="6">每天下午17:00~18:00写完作业再回家</td>
  115.         </tr>
  116.       </tfoot>
  117.     </table>
  118.   </body>
  119. </html>

二、html 表单实战

制作一张用户注册表单，要求用到常用的表单控件。

实现效果图：

2表单实战-注册表单

实现代码如下：

  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.     <form action="" style="display: grid; gap: 0.5em; width: 25%" method="POST">
  11.       <fieldset>
  12.         <legend>必填项</legend>
  13.         <div>
  14.           <label for="account">账号：</label>
  15.           <input
  16.             type="text"
  17.             id="account"
  18.             autofocus
  19.             required
  20.             placeholder="5~20个字符，字母或汉字"
  21.           />*
  22.         </div>
  24.         <div>
  25.           <label for="password">密码：</label>
  26.           <input
  27.             type="password"
  28.             id="password"
  29.             required
  30.             placeholder="6~20个字符，字母+数字"
  31.           />*
  32.         </div>
  34.         <div>
  35.           <label for="email">邮箱：</label>
  36.           <input
  37.             type="email"
  38.             name="email"
  39.             id="email"
  40.             required
  41.             placeholder="demo@mail.com"
  42.           />*
  43.         </div>
  44.       </fieldset>
  46.       <div style="margin-left: 5%">
  47.         <label for="secret">性别：</label>
  48.         <input type="radio" name="gender" value="male" id="male" /><label
  49.           for="male"
  50.           >男</label
  51.         >
  52.         <input type="radio" name="gender" value="female" id="female" /><label
  53.           for="female"
  54.           >女</label
  55.         >
  56.         <input
  57.           type="radio"
  58.           name="gender"
  59.           value="secret"
  60.           id="secret"
  61.           checked
  62.         /><label for="secret">保密</label>
  63.       </div>
  65.       <div style="margin-left: 5%">
  66.         <label>爱好：</label>
  67.         <input type="checkbox" name="hobby[]" id="programmer" checked /><label
  68.           for="programmer"
  69.           >编程</label
  70.         >
  71.         <input type="checkbox" name="hobby[]" id="game" /><label for="game"
  72.           >游戏</label
  73.         >
  74.         <input type="checkbox" name="hobby[]" id="sport" checked /><label
  75.           for="sport"
  76.           >运动</label
  77.         >
  78.         <input type="checkbox" name="hobby[]" id="trave" /><label for="trave"
  79.           >旅游</label
  80.         >
  81.       </div>
  83.       <div style="text-align: center">
  84.         <button type="submit">提交</button>
  85.       </div>
  86.     </form>
  87.   </body>
  88. </html>
  89. ```
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