Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > HTML 表格和表单的基础知识
Blogger Information
Blog 2
fans 0
comment 0
visits 1805
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
884 people have browsed it

表格元素，结构，及常用属性

  • 表格：数据格式化展示工具
  1. <tabel>
  2.     <tr>
  3.         <td>...</td>
  4.     </tr>
  5. </table>

<th></th>是<td></td>的puls,添加了加粗和居中的效果

  • 表格结构

<thead></thead>：表格头部
<tbody></tbody>：表格主体
<tfoot></tfoot>：表格底部

  • 表格常用属性

border：表格线
cellpadding：设置表格内边距
cellspacing：设置表格间隙
align：设置表格水平居中
bacolor：设置表格背景颜色

  • 完成简单会员表格
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=, initial-scale=1.0" />
  6.     <title>表格作业</title>
  7.     <style>
  8.       th {
  9.         border-radius: 6px;
  10.         height: 50px;
  11.         color: seashell;
  12.         border-right: 2px solid #fff;
  13.       }
  14.       td {
  15.         text-align: center;
  16.         border: inset;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <!-- border：表格线 cellspacing:表格间隙 cellpadding:内边距 align:设置表格水平居中-->
  22.     <table
  23.       style="border-collapse: collapse;"
  24.       cellspacing="0"
  25.       cellpadding="10"
  26.       width="80%"
  27.       align="center"
  28.     >
  29.       <!-- 为每一列设置个性样式 -->
  30.       <colgroup>
  31.         <col bgcolor="#e4644a" />
  32.         <col bgcolor="#9e9e9e" />
  33.         <col bgcolor="#35c6f0" />
  34.         <col bgcolor="#8035fb" />
  35.       </colgroup>
  36.       <caption
  37.         style="
  38.           font-size: 22px;
  39.           background: rgb(65, 129, 225);
  40.           color: #fff;
  41.           margin: 2px;
  42.           border-radius: 6px;
  43.           line-height: 50px;
  44.         "
  45.       >
  46.         VIP会员权限
  47.       </caption>
  48.       <!-- <thead>表头</thead> -->
  49.       <thead>
  50.         <tr>
  51.           <!-- th是td的puls,添加了加粗和居中的效果 -->
  52.           <th>尊享特权</th>
  53.           <th>普通会员</th>
  54.           <th>高级会员<sup style="color: red;">特惠</sup></th>
  55.           <th>皇冠会员<sup style="color: red;">特惠</sup></th>
  56.         </tr>
  57.       </thead>
  58.       <!-- <tbody>表格主体</tbody> -->
  59.       <tbody>
  60.         <tr>
  61.           <td>价格</td>
  62.           <td>免费</td>
  63.           <td>
  64.             <strong style="color: red;">￥5</strong>
  65.             <sub><del>原价:15</del></sub>
  66.           </td>
  67.           <td>
  68.             <strong style="color: red;">￥50</strong>
  69.             <sub><del>原价:150</del></sub>
  70.           </td>
  71.         </tr>
  72.         <tr>
  73.           <td>广告</td>
  74.           <!-- rowspan:单元格垂直合并 -->
  75.           <td rowspan="2">无</td>
  76.           <!-- colspan:单元格水平合并 -->
  77.           <td colspan="2" bgcolor="#F06292">免广告</td>
  78.         </tr>
  79.         <tr>
  80.           <td>腾讯视频会员</td>
  82.           <td>1个月</td>
  83.           <td>5个月</td>
  84.         </tr>
  85.       </tbody>
  87.       <!-- <tfoot>表格底部</tfoot> -->
  89.       <tfoot>
  90.         <tr>
  91.           <td>预计可省</td>
  92.           <td>0</td>
  93.           <td>￥10</td>
  94.           <td>￥50</td>
  95.         </tr>
  96.       </tfoot>
  97.     </table>
  98.   </body>
  99. </html>

运行结果图

表单

  • 表单元素类型，属性，及常用的type类型
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表单作业</title>
  7.     <style>
  8.       input {
  9.         padding: 10px;
  10.         border: 0;
  11.         border-radius: 8px;
  12.       }
  13.       label {
  14.         padding-right: 20px;
  15.         border-right: 2px solid #e9e9e9;
  16.       }
  17.       div {
  18.         padding: 20px 0;
  19.         border-bottom: 2px solid #eee;
  20.         line-height: 38px;
  21.       }
  22.       fieldset {
  23.         box-shadow: 1px 1px 5px #ce93d8;
  24.         border: 1px solid #ce93d8;
  25.         background: #e1bee7;
  26.         border-radius: 8px;
  27.       }
  28.       legend {
  29.         font-size: 22px;
  30.       }
  31.       td {
  32.         text-align: center;
  33.       }
  34.       textarea {
  35.         display: block;
  36.         border: 1px solid #fff;
  37.         width: 99%;
  38.       }
  39.       button {
  40.         width: 70%;
  41.         margin: 5px 15%;
  42.         padding: 8px;
  43.         background: #64b5f6;
  44.         border: none;
  45.         border-radius: 6px;
  46.         color: #fff;
  47.         font-size: 18px;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <!-- 表单元素 -->
  53.     <form id="login"></form>
  54.     <!-- 内部的元素：表单控件元素/标签 -->
  55.     <!-- 单行文本框 -->
  56.     <!-- type指定内型 -->
  57.     <!-- 变量是保存数据的一个容器，是实现数据复用的一个重要手段，变量是由名称和值两部分组成 -->
  58.     <!-- placeholder:当前文本框的提示信息 -->
  59.     <fieldset>
  60.       <!-- 表单分组 -->
  62.       <!-- 分组标签 -->
  63.       <legend>基本信息</legend>
  65.       <div>
  66.         <label for="username">用户名</label>
  67.         <input
  68.           id="username"
  69.           type="text"
  70.           name="username"
  71.           value=""
  72.           placeholder="请输入手机正确手机号码"
  73.           form="login"
  74.           required
  75.           autofocus
  76.         />
  77.       </div>
  78.       <div>
  79.         <label for="pwd">密码</label>
  80.         <input
  81.           id="pwd"
  82.           type="password"
  83.           name="password"
  84.           value=""
  85.           placeholder="不少于6位数字"
  86.           form="login"
  87.         />
  88.       </div>
  89.       <!-- 布尔属性：它的值是true/false 只能是真和假，只要 出现这个属性就表示true,否者就是false -->
  91.       <div>
  92.         <!-- 邮箱文本框 -->
  93.         <!-- placeholder：输入框的提示信息 -->
  94.         <label for="my-email">邮箱</label>
  95.         <input
  96.           type="email"
  97.           name="email"
  98.           id="my-email"
  99.           placeholder="admin@email.com"
  100.           form="login"
  101.           required
  102.         />
  103.       </div>
  105.       <div>
  106.         <!-- 单选按钮 -->
  107.         <label for="female">性别</label>
  108.         <!-- 单选按钮的每一个选项控件的name属性的值必须完全一样 -->
  109.         <input type="radio" name="gender" id="male" />
  110.         <label for="male">男</label>
  111.         <input type="radio" name="gender" id="female" checked />
  112.         <label for="female">女</label>
  113.         <input type="radio" name="gender" id="secret" />
  114.         <label for="secret">保密</label>
  115.       </div>
  116.     </fieldset>
  118.     <fieldset>
  119.       <legend>
  120.         选填项
  121.       </legend>
  122.       <table width="100%" align="center" cellspacing="0" border-radius="1">
  123.         <thead>
  124.           <tr>
  125.             <th>头像</th>
  126.             <th>学历</th>
  127.             <th>爱好</th>
  128.           </tr>
  129.         </thead>
  130.         <tbody>
  131.           <tr>
  132.             <td>
  133.               <!-- 文件域 -->
  134.               <!-- <label for="user-img">头像</label> -->
  135.               <input type="file" name="user_img" id="user-img" />
  136.               <!-- 隐藏域 -->
  137.               <!-- 限制文件上传大小，这个结果是给服务器做参考,这个数据不需要也不允许用户提供 -->
  138.               <!-- 1k = 1024byte, 1m = 1024k, 1G =1024M, 1T = 1024G -->
  139.               <!-- 限制上传文件的大小,最大值5M -->
  140.               <input type="hidden" name="MAX_FILE_SIZE" value="5242880" />
  141.             </td>
  142.             <td>
  143.               <!-- <label for="">学历</label>  -->
  144.               <!-- 事件属性:用on开始跟一个事件名称，它的值是JS的表达式 -->
  145.               <label for="edu">学历</label>
  147.               <select name="edu" onchange="alert(this.value)">
  148.                 <option value="1">博士后</option>
  149.                 <option value="2">研究生</option>
  150.                 <option value="3">本科</option>
  151.                 <option value="4">专科</option>
  152.                 <option value="5">高中</option>
  153.                 <option value="6">初中</option>
  154.               </select>
  155.             </td>
  156.             <td>
  157.               <!-- 复选框 -->
  158.               <!-- 当一组数据具有共同特征时候用数组放到一起，因为它们属于同一类型,因为复选框会返回多个值，所以name属性应该使用数组的方式 -->
  159.               <input type="checkbox" name="hobby[]" id="basketball" checked />
  160.               <label for="basketball">篮球</label>
  161.               <input type="checkbox" name="hobby[]" id="diving" />
  162.               <label for="diving">游泳</label>
  163.               <input type="checkbox" name="hobby[]" id="game" checked />
  164.               <label for="game">游戏</label>
  165.             </td>
  166.           </tr>
  167.         </tbody>
  168.         <tfoot>
  169.           <tr>
  170.             <td colspan="3">
  171.               <textarea
  172.                 name="message"
  173.                 id=""
  174.                 rows="5"
  175.                 placeholder="备注"
  176.               ></textarea>
  177.             </td>
  178.           </tr>
  179.         </tfoot>
  180.       </table>
  181.       <div>
  182.         <!-- 预定义复合框/下拉列表 -->
  183.         <label for="my-zy">专业</label>
  184.         <!-- 将一个单行文本框与一个下拉列表进行绑定 -->
  185.         <input type="text" name="my-zy" list="zy" />
  186.         <!-- datalist：预置列表，用于展示预置的输入内容 -->
  187.         <!-- <datalist>与<input list="">进行绑定 -->
  188.         <datalist id="zy">
  189.           <option value="搬砖">搬砖</option>
  190.           <option value="挖掘机">挖掘机</option>
  191.           <option value="爬虫">爬虫</option>
  192.         </datalist>
  193.       </div>
  194.       <div>
  195.         <!-- 日期/时间输入库 -->
  196.         <label for="">日期</label>
  197.         <input type="date" name="brithday" id="" />
  198.       </div>
  199.     </fieldset>
  201.     <!-- GET:用户提交的数据会以键值对的方式出现在URL地址栏中 ：用于登录不安全-->
  202.     <!-- POST:数据不会以明文的方式出现在URL地址栏中 -->
  203.     <!-- GET和POST可以同时出现 -->
  204.     <!-- formaction:指定统一脚本进行处理，通过参数来动态指定当前什么操作 -->
  206.     <button
  207.       formaction="hanle.php?action=login"
  208.       formmethod="POST"
  209.       form="login"
  210.       formtarget="_blank"
  211.     >
  212.       提交
  213.     </button>
  214.     <button type="reset" form="login">重置</button>
  215.     <!-- <button formaction="hanle.php?action=register" formmethod="GET" form="login">注册</button> -->
  216.   </body>
  217. </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
  • HTML5
    2020-07-29 09:54:11