search

博客列表 >表格的制作以及表单的制作

表格的制作以及表单的制作

亚瑟林
亚瑟林原创
2020年07月31日 22:59:13887浏览

制作表格

首先，需要明确的是表格的结构，无论多么花哨的表格，最终都离不开标题、表头、主体部分以及页脚，相对应的 HTML 标签就是<caption>、<thead>、<tbody>、<tfoot>。

  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.   </head>
  8.   <body>
  9.     <table
  10.       width="800"
  11.       border="5"
  12.       cellspacing="0"
  13.       cellpadding="1"
  14.       align="center"
  15.       <colgroup>
  16.         <col />
  17.         <col />
  18.         <col />
  19.         <col bgcolor="#C0C0C0" />
  20.         <col />
  21.         <col />
  22.         <col />
  23.         <col bgcolor="#FF0000" />
  24.     </colgroup>
  25.       <caption>
  26.         2020年度理财报表
  27.       </caption>
  28.       <!-- <caption>标签定义了表格的标题 -->
  29.       <thead>
  30.         <!-- <thead>标签定义了表格的表头 -->
  31.         <tr>
  32.           <th colspan="4" bgcolor="cyan">投资</th>
  33.           <!-- <th></th>
  34.           <th></th>
  35.           <th></th> -->
  36.           <th colspan="4" bgcolor="yellow">市值</th>
  37.           <!-- <th></th>
  38.           <th></th>
  39.           <th></th> -->
  40.         </tr>
  41.       </thead>
  42.       <tbody align="center">
  43.         <!-- <tbody>标签定义表格的主体 -->
  44.         <tr>
  45.           <td>序号</td>
  46.           <td>日期</td>
  47.           <td>项目</td>
  48.           <td>金额（元）</td>
  49.           <td>序号</td>
  50.           <td>日期</td>
  51.           <td>项目</td>
  52.           <td>金额（元）</td>
  53.         </tr>
  54.         <tr>
  55.           <td>1</td>
  56.           <td>2020-02-25</td>
  57.           <td>黄金</td>
  58.           <td align="right">5000</td>
  59.           <td>1</td>
  60.           <td>2020-07-25</td>
  61.           <td>黄金</td>
  62.           <td align="right">6000</td>
  63.         </tr>
  64.         <tr>
  65.           <td>2</td>
  66.           <td>2020-02-25</td>
  67.           <td>股票</td>
  68.           <td align="right">50000</td>
  69.           <td>2</td>
  70.           <td>2020-07-25</td>
  71.           <td>股票</td>
  72.           <td align="right">70000</td>
  73.         </tr>
  74.         <tr>
  75.           <td>3</td>
  76.           <td>2020-02-25</td>
  77.           <td>基金</td>
  78.           <td align="right">20000</td>
  79.           <td>3</td>
  80.           <td>2020-07-25</td>
  81.           <td>基金</td>
  82.           <td align="right">28000</td>
  83.         </tr>
  84.         <tr>
  85.           <td>4</td>
  86.           <td>2020-02-25</td>
  87.           <td>期货</td>
  88.           <td align="right">10000</td>
  89.           <td>4</td>
  90.           <td>2020-07-25</td>
  91.           <td>期货</td>
  92.           <td align="right">-5000</td>
  93.         </tr>
  94.       </tbody>
  95.       <tfoot align="center">
  96.         <!-- <tfoot>标签定义表格的页脚，<thead> 、 <tbody> 和 <tfoot> 元素结合起来使用
  97.               ，用来规定表格的各个部分（表头、主体、页脚） -->
  98.         <tr>
  99.           <td>小计</td>
  100.           <td colspan="2"></td>
  101.           <!-- <td></td> -->
  102.           <td align="right">85000</td>
  103.           <td>小计</td>
  104.           <td colspan="2"></td>
  105.           <!-- <td></td> -->
  106.           <td align="right">99000</td>
  107.         </tr>
  108.         <tr>
  109.           <td>盈亏</td>
  110.           <td colspan="6"></td>
  111.           <!-- <td></td>
  112.           <td></td>
  113.           <td></td>
  114.           <td></td>
  115.           <td></td>
  116.           <td></td> -->
  117.           <td align="right">+14000</td>
  118.         </tr>
  119.       </tfoot>
  120.     </table>
  121.   </body>
  122. </html>

运行效果为：

制作表单

HTML 表单用于收集用户输入的各项信息。<form>元素定义 HTML 表单。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

  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.       </head>
  9.       <body>
  10.           <h3>用户注册</h3>
  11.           <hr>
  12.           <form>
  14.               <div>
  15.               <label for="user_name">用户名：</label>
  16.               <input
  17.               id="user_name" 
  18.               type="text" 
  19.               name="user_name"
  20.               value="" 
  21.               placeholder="不少于10个字符"
  22.               required
  23.               autofocus
  24.               />
  25.             </div>
  26.               <!-- required属性属于布尔属性，它的值只有true或者false,required="required"可简写为required，
  27.                   autofocus也是布尔属性-->
  28.               <div>
  29.               <label for="password">密码：</label>
  30.               <input
  31.               id="password" 
  32.               type="password" 
  33.               name="password"
  34.               value="" 
  35.               placeholder="不少于8位"
  36.               required
  37.               />
  38.             </div>
  40.             <div>
  41.                 <!-- 单选按钮 -->
  42.                 <label for="secret">性别</label>
  43.                 <!-- 单选按钮需要注意的是，每一个选项中name的属性值必须一致 -->
  44.                 <input type="radio" name="gender" id="male">
  45.                 <label for="male">男</label>
  46.                 <input type="radio" name="gender" id="female">
  47.                 <label for="female">女</label>
  48.                 <input type="radio" name="gender" id="secret" checked="">
  49.                 <label for="secret">保密</label>
  50.             </div>
  52.             <!-- 复选框 -->
  53.             <div>
  54.                 <!-- 复选框会返回多个值，name属性应该使用数组的形式 -->
  55.                 <label for="">爱好</label>
  56.                 <input type="checkbox" name="hobby[]" id="programme" checked>
  57.                 <label for="programme">编程</label>
  58.                 <input type="checkbox" name="hobby[]" id="game">
  59.                 <label for="game">游戏</label>
  60.                 <input type="checkbox" name="hobby[]" id="travel">
  61.                 <label for="travel">旅游</label>
  62.             </div>
  64.             <!-- 文件域 -->
  65.             <div>
  66.                 <label for="user_img">头像</label>
  67.                 <input type="file" name="user_img" id="user_img">
  68.                 <!-- 限制上传文件的大小 -->
  69.                 <input type="hidden" name="MAX_FILE_SIZE" value="8388608">
  71.             </div>
  73.             <!-- 预定义下复合文本框/下拉列表 -->
  74.             <div>
  75.                 <label for="my_course">课程</label>
  77.                 <!-- 将一个单行文本框与一个下拉列表进行绑定 -->
  78.                 <input type="text" id="my_course" list="course" >
  80.                 <datalist id="course">
  81.                     <option value="html5">html5</option>
  82.                     <option value="css3">css3</option>
  83.                     <option value="JavaScript">JavaScript</option>
  84.                     <option value="vue.js">vue.js</option>
  85.                     <option value="laravel">laravel</option>
  87.                 </datalist>
  88.             </div>
  90.             <div>
  91.                 <!-- 邮箱文本框 -->
  92.                 <label for="my_email">邮箱：</label>
  93.                 <input type="email" name="email" placeholder="yourname@email.com">
  95.             </div>
  97.             <div>
  98.                 <!-- 日期、时间输入框 -->
  99.                 <label for="">生日：</label>
  100.                 <input type="date" name="birthday" ">
  102.             </div>
  104.             <div>
  105.                 <!-- 数值输入框 -->
  106.                 <label for="">年龄：</label>
  107.                 <input type="number" name="age" min="18" max="70" step="5" value="18">
  109.             </div>
  111.             <hr>
  112.               <button>提交</button>
  113.           </form>
  115.       </body>
  117.     </html>

运行效果为：

上一条：南阳-学号140594 7月25日作业下一条：HTML 表格和表单的基础知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多