Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单与表格
Blogger Information
Blog 8
fans 0
comment 0
visits 8395
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
表单与表格
努力努力再努力
Original
1033 people have browsed it

1.表格

一个完整的表格涉及9个标签/元素

  1.     table + caption + colgroup + thead + tbody + tfoot + tr + th + td -->
  2.     <!-- 常用的: -->
  3.    table + caption + thead + tbody + tr + th + td
  4.     <!-- 再简单点: -->
  5.    table + caption + tbody + tr + th/td

a.用<table>表格做出的购物车

  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.         /* 为每个单元格添加边框 设置内边距：文本距离边框的距离 */
  9.         th,td{
  10.             border: 1px solid black;
  11.             padding: 7px;
  12.         }
  13.         /* 去掉每个单元格之间的间隙  设置文本居中和表格居中*/
  14.         table{
  15.             border-collapse: collapse;
  16.             width: 70%;
  17.             height: 200px;
  18.             text-align: center;
  19.             margin:0 auto;
  20.         }
  22.         /* 设置为表格标题的样式 */
  23.         table caption{
  24.             font-size: 1.5rem;
  25.             color: skyblue;
  26.             margin-bottom: 15px;
  27.         }
  29.         /* 设置头部 */
  30.         table thead th{
  31.             font-weight: lighter;
  32.             background-color:skyblue;
  33.         }
  35.         /* 设置主体部份 */
  36.         table tbody tr:first-of-type{
  37.             background-color: seagreen;
  38.         }
  39.         /* 设置偶数行 */
  40.         table tbody tr:nth-of-type(even){
  41.             background-color: burlywood;
  42.         }
  44.         /* 设置鼠标悬停颜色 */
  45.         table tbody tr:nth-last-of-type(1):hover{
  46.             background-color:blue;
  47.         }
  49.         table tfoot td{
  50.             background-color: cadetblue;
  51.             border-bottom: none;
  52.         }
  54.         body div:first-of-type{
  55.             width: 70%;
  56.             margin: 5px auto;
  57.         }
  59.         body div:first-of-type button{
  60.             float:right;
  61.             width: 50px;
  62.             height: 30px;
  63.             background-color:peachpuff;
  64.             color:white;
  65.             /* 设置鼠标小手效果 */
  66.             cursor: pointer;
  67.         }
  69.         body div:first-of-type button:hover{
  70.             background-color: blue;
  71.         }
  72.     </style>
  73.   </head>
  74.   <body>
  75.     <table>
  76.       <caption>
  77.         购物车
  78.       </caption>
  79.       <!-- 头部 -->
  80.       <thead>
  81.         <th>ID</th>
  82.         <th>品名</th>
  83.         <th>单价/元</th>
  84.         <th>单位</th>
  85.         <th>数量</th>
  86.         <th>金额/元</th>
  87.       </thead>
  88.       <tbody>
  89.         <tr>
  90.           <td>SN-1010</td>
  91.           <td>MacBook Pro电脑</td>
  92.           <td>18999</td>
  93.           <td>台</td>
  94.           <td>1</td>
  95.           <td>18999</td>
  96.         </tr>
  97.         <tr>
  98.           <td>SN-1020</td>
  99.           <td>iPhone手机</td>
  100.           <td>4999</td>
  101.           <td>部</td>
  102.           <td>2</td>
  103.           <td>9998</td>
  104.         </tr>
  105.         <tr>
  106.           <td>SN-1030</td>
  107.           <td>智能AI音箱</td>
  108.           <td>399</td>
  109.           <td>只</td>
  110.           <td>5</td>
  111.           <td>1995</td>
  112.         </tr>
  113.         <tr>
  114.           <td>SN-1040</td>
  115.           <td>SSD移动硬盘</td>
  116.           <td>888</td>
  117.           <td>个</td>
  118.           <td>2</td>
  119.           <td>1776</td>
  120.         </tr>
  121.         <tr>
  122.           <td>SN-1050</td>
  123.           <td>黄山毛峰</td>
  124.           <td>999</td>
  125.           <td>斤</td>
  126.           <td>3</td>
  127.           <td>2997</td>
  128.           </tr>
  129.         </tr>
  130.         <tfoot>
  131.             <tr>
  132.                 <td colspan="4">总计</td>
  133.                 <td>13</td>
  134.                 <td>21321</td>
  135.             </tr>
  136.         </tfoot>
  137.       </tbody>
  138.     </table>
  139.     <div><button>结算</button></div>
  140.   </body>
  141. </html>

b.用<div>和display属性做出的购物车

  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>Document</title>
  7.     <style>
  8.       /* 表格 */
  9.       .table {
  10.         display: table;
  11.         width: 70%;
  12.         text-align: center;
  13.         margin: auto;
  14.         padding: 10px;
  15.       }
  17.       /* 标题 */
  18.       .table-caption {
  19.         display: table-caption;
  20.       }
  22.       /* 列分组 */
  23.       .table-colgroup {
  24.         display: table-column-group;
  25.       }
  26.       /* 设置第一列样式  */
  27.       .table-colgroup .table-col:first-of-type {
  28.         display: table-column;
  29.         background-color: sandybrown;
  30.       }
  32.       /* 设置剩下两列列样式 */
  33.       .table-colgroup .table-col {
  34.         display: table-column;
  35.         background-color: lawngreen;
  36.       }
  38.       /* 表头 */
  39.       .table-thead {
  40.         display: table-header-group;
  41.         background-color: skyblue;
  42.       }
  44.       /* 行 */
  45.       .table-row {
  46.         display: table-row;
  47.       }
  49.       /* 列 */
  50.       .table-cell {
  51.         display: table-cell;
  52.         border: 1px solid black;
  53.         padding: 5px;
  54.       }
  55.       /* 主体 */
  56.       .table-tbody {
  57.         display: table-row-group;
  58.       }
  60.       /* 底部 */
  61.       .table-footer {
  62.         display: table-footer-group;
  63.       }
  64.     </style>
  65.   </head>
  66.   <body>
  67.     <!-- 表格 -->
  68.     <div class="table">
  69.       <!-- 标题 -->
  70.       <div class="table-caption">购物车</div>
  71.       <!-- 列分组 -->
  72.       <div class="table-colgroup">
  73.         <div class="table-col"></div>
  74.         <div class="table-col"></div>
  75.         <div class="table-col"></div>
  76.         <div class="table-col"></div>
  77.         <div class="table-col"></div>
  78.         <div class="table-col"></div>
  79.       </div>
  80.       <!-- 表头 -->
  81.       <div class="table-thead">
  82.         <div class="table-row">
  83.           <div class="table-cell">ID</div>
  84.           <div class="table-cell">类型</div>
  85.           <div class="table-cell">单价/元</div>
  86.           <div class="table-cell">单位</div>
  87.           <div class="table-cell">数量</div>
  88.           <div class="table-cell">金额/元</div>
  89.         </div>
  90.       </div>
  92.       <!-- 表主体 -->
  93.       <div class="table-tbody">
  94.         <div class="table-row">
  95.           <div class="table-cell">SN-1010</div>
  96.           <div class="table-cell">MacBook Pro电脑</div>
  97.           <div class="table-cell">18999</div>
  98.           <div class="table-cell">台</div>
  99.           <div class="table-cell">1</div>
  100.           <div class="table-cell">18999</div>
  101.         </div>
  102.         <div class="table-row">
  103.           <div class="table-cell">SN-1030</div>
  104.           <div class="table-cell">智能AI音箱</div>
  105.           <div class="table-cell">399</div>
  106.           <div class="table-cell">只</div>
  107.           <div class="table-cell">5</div>
  108.           <div class="table-cell">1995</div>
  109.         </div>
  110.         <div class="table-row">
  111.           <div class="table-cell">SN-1040</div>
  112.           <div class="table-cell">SSD移动硬盘</div>
  113.           <div class="table-cell">888</div>
  114.           <div class="table-cell">个</div>
  115.           <div class="table-cell">2</div>
  116.           <div class="table-cell">1776</div>
  117.         </div>
  118.       </div>
  119.       </div>
  120.     </div>
  121.   </body>
  122. </html>

2.表单<input>

常用类型type：text(文本型)、password（密码）、email(邮件)、radio(单选)、checkbox(复选框)、search(选项列表 配合<datalist>使用 id要一致)、file(文件)、hidden(隐藏)

特殊：<textarea> 文本域

属性：autofocus(自动获取焦点),placeholder(说明)，required （必需在提交之前填写输入字段）

  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></style>
  8.   </head>
  9.   <body>
  10.     <h3>用户注册</h3>
  11.     <from action="" method="POST">
  12.       <!-- 控制键 -->
  13.       <fieldset>
  14.         <legend>基本信息（必填）</legend>
  15.         <div>
  16.           <label for="username">用户名</label>
  17.           <!-- autofocus自动获取焦点 -->
  18.           <input
  19.             id="username"
  20.             type="text"
  21.             name="usernmae"
  22.             placeholder="6-11个单位长度"
  23.             autofocus
  24.             required="required"
  25.           />
  26.         </div>
  27.         <div>
  28.           <label
  29.             >密 码：
  30.             <input
  31.               type="password"
  32.               name="password"
  33.               required="required"
  34.               placeholder="6-11单位长度"
  35.               id="password"
  36.             />
  37.           </label>
  38.           <button onclick="showPwd()">显示密码</button>
  39.         </div>
  40.         <div>
  41.           <label
  42.             >确认密码：
  43.             <input
  44.               type="password1"
  45.               name="password1"
  46.               required="required"
  47.               placeholder="6-11单位长度"
  48.             />
  49.           </label>
  50.         </div>
  51.       </fieldset>
  53.       <fieldset>
  54.         <legend>扩展信息(选填)</legend>
  55.         <div>
  56.           <label
  57.             >生日
  58.             <input type="date" name="birthday" />
  59.           </label>
  60.         </div>
  61.         <div>
  62.           <!-- 单元按钮 radio name值必须相同-->
  63.           <label for="gender"
  64.             >性别: <input type="radio" name="gender" value="mela" />男
  65.             <input type="radio" name="gender" value="mela" />女
  66.             <input type="radio" name="gender" value="mela" id="gender" />保密
  67.           </label>
  68.         </div>
  69.         <div>
  70.           <!--复选框  checkbox-->
  71.           <label for="like"
  72.             >爱好:
  73.             <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理， 所以将name名称设置为数组形式便于后端脚本处理 -->
  74.             <input type="checkbox" name="hobby[]" value="game" /> 打游戏
  75.             <input type="checkbox" name="hobby[]" value="shoot" />摄影
  76.             <input
  77.               type="checkbox"
  78.               name="hobby[]"
  79.               value="programme"
  80.               id="like"
  81.               checked
  82.             />编程
  83.           </label>
  84.         </div>
  85.         <div>
  86.           id
  87.           <label
  88.             >手机
  89.             <!-- 选项列表 -->
  90.             <input type="search" list="phone-123" id="phone" name="phone" />
  91.             <datalist id="phone-123">
  92.               <!-- 文本和label作用一样 -->
  93.               <option value="apple">苹果</option>
  94.               <option value="huawei" label="华为"></option>
  95.               <option value="mi" label="小米"></option>
  96.             </datalist>
  97.           </label>
  98.         </div>
  99.       </fieldset>
  101.       <fieldset>
  102.         <legend>其他信息（选填）</legend>
  103.         <div>
  104.           <label>
  105.             上传文件：
  106.             <input type="file" name="file" />
  107.           </label>
  108.         </div>
  109.         <div>
  110.           <label for="resume">简历：</label>
  111.           <textarea
  112.             name="resume"
  113.             id="resume"
  114.             cols="30"
  115.             rows="10"
  116.             placeholder="不超过100字"
  117.           ></textarea>
  118.         </div>
  119.       </fieldset>
  120.       <button>提交</button>
  121.     </from>
  122.     <script>
  123.       // 显示密码
  124.       function showPwd() {
  125.         pwd = document.querySelector("#password");
  126.         if (pwd.type == "password") {
  127.           pwd.type = "text";
  128.         } else {
  129.           pwd.type = "password";
  130.         }
  131.       }
  132.     </script>
  133.   </body>
  134. </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