Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html表格与表单详解
Blogger Information
Blog 100
fans 8
comment 2
visits 150213
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表格与表单详解
lilove的博客
Original
965 people have browsed it

一、常规表格

一个常规表格包含以下标签：

caption,colgroup,table,thead,tbody,tfoot,th,tr,td标签；

  • 其中tbody标签是必须有的(如果表格中没有tbody标签，浏览器会自动生成tbody)，以便javascript脚本获取数据；

  • colgroup不常用，使用CSS样式代替；

常规表格案例：仿京东购物车

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  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.   <style>
  9.     table {
  10.       text-align: center;
  11.       min-width: 70%;
  12.       margin: auto;
  13.       border-collapse: collapse;
  14.     }
  15.     table caption {
  16.       font-size: 1.5rem;
  17.       margin-bottom: 10px;
  18.     }
  19.     table td {
  20.       padding: 5px;
  21.       border-bottom: 1px solid #cccccc;
  22.     }
  23.     table thead tr:first-of-type {
  24.       background-color: #f3f3f3;
  25.     }
  26.     table tbody tr:hover {
  27.       background-color: #e3e4e5;
  28.     }
  29.     table tbody tr:nth-of-type(odd) {
  30.       font-size: 0.5rem;
  31.       text-align: left;
  32.     }
  33.     table tfoot tr:nth-last-of-type(1) {
  34.       color: orangered;
  35.     }
  36.     table tfoot button {
  37.       font-size: medium;
  38.       color: mintcream;
  39.       width: 100px;
  40.       height: 40px;
  41.       background-color: #e64347;
  42.       border: 1px solid #e3e4e5;
  43.     }
  44.     table tfoot button:hover {
  45.       background-color: white;
  46.       color: #e64347;
  47.       border: 1px solid #e64347;
  48.     }
  49.     table tfoot button:active {
  50.       background-color: #e64347;
  51.       color: white;
  52.     }
  53.   </style>
  54.   <body>
  55.     <!-- 一个常规表格包含：caption,colgroup,table,thead,tbody,tfoot,th,tr,td -->
  56.     <table>
  57.       <caption>
  58.         京东购物车
  59.       </caption>
  60.       <!-- 现在基本不用colgroup标签，使用CSS来设置样式 -->
  61.       <!-- <colgroup>
  62.             <col width="50" />
  63.             <col width="150" />
  64.             <col width="200" />
  65.         </colgroup> -->
  66.       <thead>
  67.         <tr>
  68.           <th><input type="checkbox" />全选</th>
  69.           <th>商品图片</th>
  70.           <th>描述</th>
  71.           <th>型号</th>
  72.           <th>单价</th>
  73.           <th>数量</th>
  74.           <th>小计</th>
  75.           <th>操作</th>
  76.         </tr>
  77.       </thead>
  78.       <tbody>
  79.         <tr>
  80.           <td colspan="8">购满1件，即可享受换购优惠<a href="#">立即换购</a></td>
  81.         </tr>
  82.         <tr>
  83.           <td><input type="checkbox" /></td>
  84.           <td>pic</td>
  85.           <td>
  86.             东芝(TOSHIBA)3TB 64MB 7200RPM 台式机机械硬盘 SATA接口 P300系列
  87.           </td>
  88.           <td>台式机硬盘●精品盒装【3T】</td>
  89.           <td>¥489.00</td>
  90.           <td>4</td>
  91.           <td>¥1956.00</td>
  92.           <td><a href="#">删除</a><br /><a href="#">移到我的关注</a></td>
  93.         </tr>
  94.         <tr>
  95.           <td colspan="8">购满1件，即可享受换购优惠<a href="#">立即换购</a></td>
  96.         </tr>
  97.         <tr>
  98.           <td><input type="checkbox" /></td>
  99.           <td>pic</td>
  100.           <td>华擎（ASRock）J3455-ITX主板（Intel - Apollo Lake）</td>
  101.           <td>J3455-ITX</td>
  102.           <td>¥559.00</td>
  103.           <td>1</td>
  104.           <td>¥559.00</td>
  105.           <td><a href="#">删除</a><br /><a href="#">移到我的关注</a></td>
  106.         </tr>
  107.         <tr>
  108.           <td colspan="8">购满1件，即可享受换购优惠<a href="#">立即换购</a></td>
  109.         </tr>
  110.         <tr>
  111.           <td><input type="checkbox" /></td>
  112.           <td>pic</td>
  113.           <td>
  114.             东芝(TOSHIBA)3TB 64MB 7200RPM 台式机机械硬盘 SATA接口 P300系列
  115.           </td>
  116.           <td>台式机硬盘●精品盒装【3T】</td>
  117.           <td>¥489.00</td>
  118.           <td>4</td>
  119.           <td>¥1956.00</td>
  120.           <td><a href="#">删除</a><br /><a href="#">移到我的关注</a></td>
  121.         </tr>
  122.         <tr>
  123.           <td colspan="8">购满1件，即可享受换购优惠<a href="#">立即换购</a></td>
  124.         </tr>
  125.         <tr>
  126.           <td><input type="checkbox" /></td>
  127.           <td>pic</td>
  128.           <td>华擎（ASRock）J3455-ITX主板（Intel - Apollo Lake）</td>
  129.           <td>J3455-ITX</td>
  130.           <td>¥559.00</td>
  131.           <td>1</td>
  132.           <td>¥559.00</td>
  133.           <td><a href="#">删除</a><br /><a href="#">移到我的关注</a></td>
  134.         </tr>
  135.         <tr>
  136.           <td colspan="8">购满1件，即可享受换购优惠<a href="#">立即换购</a></td>
  137.         </tr>
  138.         <tr>
  139.           <td><input type="checkbox" /></td>
  140.           <td>pic</td>
  141.           <td>
  142.             东芝(TOSHIBA)3TB 64MB 7200RPM 台式机机械硬盘 SATA接口 P300系列
  143.           </td>
  144.           <td>台式机硬盘●精品盒装【3T】</td>
  145.           <td>¥489.00</td>
  146.           <td>4</td>
  147.           <td>¥1956.00</td>
  148.           <td><a href="#">删除</a><br /><a href="#">移到我的关注</a></td>
  149.         </tr>
  150.         <tr>
  151.           <td colspan="8">购满1件，即可享受换购优惠<a href="#">立即换购</a></td>
  152.         </tr>
  153.         <tr>
  154.           <td><input type="checkbox" /></td>
  155.           <td>pic</td>
  156.           <td>华擎（ASRock）J3455-ITX主板（Intel - Apollo Lake）</td>
  157.           <td>J3455-ITX</td>
  158.           <td>¥559.00</td>
  159.           <td>1</td>
  160.           <td>¥559.00</td>
  161.           <td><a href="#">删除</a><br /><a href="#">移到我的关注</a></td>
  162.         </tr>
  163.       </tbody>
  164.       <tfoot>
  165.         <tr>
  166.           <td><input type="checkbox" /></td>
  167.           <td colspan="2">删除选中商品 移到关注 清理购物车</td>
  168.           <td colspan="2">已选0件商品</td>
  169.           <td>总价：<br />促销价：</td>
  170.           <td>...</td>
  171.           <td><button type="submit" value="去结算">去结算</button></td>
  172.         </tr>
  173.       </tfoot>
  174.     </table>
  175.   </body>
  176.   <script>
  177.     // 获取第一个表格中第一个tbody中第三行第三个单元格元素
  178.     // const ele = document.querySelector("table").tBodies[0].rows[2].cells[2];
  179.     // console.log(ele);
  180.   </script>
  181. </html>

运行效果：

二、用div模拟表格元素制作表格

使用CSS样式来制作table等元素的样式，将样式加入div标签中，形成表格。

模拟表格案例：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  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.   <style>
  9.     /* 整个表格样式 */
  10.     .table {
  11.       display: table;
  12.       border: 1px solid #000;
  13.       width: 300px;
  14.       text-align: center;
  15.       margin: auto;
  16.     }
  17.     /* 表头样式 */
  18.     .table-caption {
  19.       display: table-caption;
  20.       margin-bottom: 10px;
  21.       font-size: 1.3rem;
  22.     }
  23.     /* 表头元素 */
  24.     .table-thead {
  25.       display: table-header-group;
  26.       background-color: #ccc;
  27.     }
  28.     /* 行 */
  29.     .table-row {
  30.       display: table-row;
  31.     }
  32.     /* 列单元格 */
  33.     .table-cell {
  34.       display: table-cell;
  35.       border: 1px solid #000;
  36.       padding: 5px;
  37.     }
  38.     /* 表格主体 */
  39.     .table-body {
  40.       display: table-row-group;
  41.     }
  42.     /* 表格底部 */
  43.     .table-tfoot {
  44.       display: table-footer-group;
  45.     }
  46.     /* 表格列分组样式 */
  47.     .table-colgroup {
  48.       display: table-column-group;
  49.     }
  50.     .table-colgroup .table-col:first-of-type {
  51.       display: table-column;
  52.       background-color: lightblue;
  53.     }
  54.     .table-colgroup .table-col {
  55.       display: table-column;
  56.       background-color: lightgreen;
  57.     }
  58.   </style>
  59.   <body>
  60.     <!-- 表格 -->
  61.     <div class="table">
  62.       <!-- 标题 -->
  63.       <div class="table-caption">div表格标题</div>
  64.       <!-- 列分组 -->
  65.       <div class="table-colgroup">
  66.         <div class="table-col"></div>
  67.         <div class="table-col"></div>
  68.         <div class="table-col"></div>
  69.       </div>
  70.       <!-- 表头 -->
  71.       <div class="table-thead">
  72.         <div class="table-row">
  73.           <div class="table-cell">表头</div>
  74.           <div class="table-cell">th1</div>
  75.           <div class="table-cell">th1</div>
  76.         </div>
  77.       </div>
  78.       <!-- 主体 -->
  79.       <div class="table-body">
  80.         <div class="table-row">
  81.           <div class="table-cell">tr1</div>
  82.           <div class="table-cell">tr1</div>
  83.           <div class="table-cell">tr1</div>
  84.         </div>
  85.         <div class="table-row">
  86.           <div class="table-cell">tr2</div>
  87.           <div class="table-cell">tr2</div>
  88.           <div class="table-cell">tr2</div>
  89.         </div>
  90.         <div class="table-row">
  91.           <div class="table-cell">tr4</div>
  92.           <div class="table-cell">tr4</div>
  93.           <div class="table-cell">tr4</div>
  94.         </div>
  95.         <div class="table-row">
  96.           <div class="table-cell">tr4</div>
  97.           <div class="table-cell">tr4</div>
  98.           <div class="table-cell">tr4</div>
  99.         </div>
  100.       </div>
  101.       <!-- 底部 -->
  102.       <div class="table-tfoot">
  103.         <div class="table-row">
  104.           <div class="table-cell">tr5</div>
  105.           <div class="table-cell">tr5</div>
  106.           <div class="table-cell">tr5</div>
  107.         </div>
  108.       </div>
  109.     </div>
  110.   </body>
  111. </html>

运行效果：

三、表单

表单元素：

元素 含义
form 表单元素包含请求方式属性
fieldset 表单外框
legend 表单头
label 表单标签
input 输入框
textarea 多行输入框
datalist 选择菜单
option 选择菜单选项

表单案例：注册账号

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  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.   <style>
  9.     body {
  10.       font-size: 16px;
  11.       background-color: #eeeeee;
  12.     }
  13.     h3 {
  14.       text-align: center;
  15.     }
  16.     hr {
  17.       width: 80%;
  18.     }
  19.     form legend {
  20.       border: 1px solid lightblue;
  21.       background-color: lightblue;
  22.     }
  23.     form fieldset {
  24.       width: 300px;
  25.       margin: 20px auto;
  26.       border-radius: 10%;
  27.     }
  28.     div {
  29.       margin-top: 10px;
  30.     }
  31.   </style>
  32.   <body>
  33.     <h3>用户注册</h3>
  34.     <hr />
  35.     <form action="" method="POST">
  36.       <fieldset>
  37.         <legend>用户信息</legend>
  38.         <div>
  39.           <label for="username">账号：</label>
  40.           <input
  41.             type="text"
  42.             id="username"
  43.             name="username"
  44.             placeholder="用户名大于6位"
  45.           />
  46.         </div>
  47.         <div>
  48.           <label for="email">邮箱：</label>
  49.           <input
  50.             type="email"
  51.             id="email"
  52.             name="email"
  53.             placeholder="exp@php.cn"
  54.           />
  55.         </div>
  56.         <div>
  57.           <label for="pwd">密码：</label>
  58.           <input type="password" id="pwd" name="pwd" />
  59.           <button onclick="showPwd()" id="btn" type="button">显示密码</button>
  60.         </div>
  61.         <div>
  62.           <label for="pwd-conf">确认：</label>
  63.           <input type="password" id="pwd-conf" name="pwd-conf" />
  64.         </div>
  65.       </fieldset>
  66.       <fieldset>
  67.         <legend>其他信息</legend>
  68.         <div>
  69.           <label for="birthday"
  70.             >出生日期：<input type="date" name="birthday"
  71.           /></label>
  72.         </div>
  73.         <div>
  74.           <!-- 设置默认值是保密 -->
  75.           <label for="secret">性别：</label>
  76.           <!-- 单选按钮中的name值一定要相同 -->
  77.           <input type="radio" id="male" name="gender" value="男" /><label
  78.             for="male"
  79.             >男</label
  80.           >
  81.           <input type="radio" id="female" name="gender" value="女" /><label
  82.             for="female"
  83.             >女</label
  84.           >
  85.           <input
  86.             type="radio"
  87.             id="secret"
  88.             name="gender"
  89.             value="保密"
  90.             checked
  91.           /><label for="secret">保密</label>
  92.         </div>
  93.         <div>
  94.           <label for="">爱好：</label>
  95.           <input type="checkbox" id="book" name="hobby[]" value="看书" /><label
  96.             for="book"
  97.             >看书</label
  98.           >
  99.           <input type="checkbox" id="ball" name="hobby[]" value="打球" /><label
  100.             for="ball"
  101.             >打球</label
  102.           >
  103.           <input type="checkbox" id="walk" name="hobby[]" value="散步" /><label
  104.             for="walk"
  105.             >散步</label
  106.           >
  107.         </div>
  108.         <div>
  109.           <!-- 下拉列表 -->
  110.           <label for="brand">手机品牌：</label>
  111.           <input type="search" list="phone" id="brand" name="brand" />
  112.           <datalist id="phone">
  113.             <option value="huawei" label="华为"></option>
  114.             <option value="mi" label="小米"></option>
  115.             <option value="vivo" label="vivo66"></option>
  116.           </datalist>
  117.         </div>
  118.       </fieldset>
  119.       <fieldset>
  120.         <legend>其他信息</legend>
  121.         <div>
  122.           <label for="uploads">
  123.             文件上传
  124.           </label>
  125.           <input
  126.             type="file"
  127.             id="uploads"
  128.             name="image"
  129.             accept="image/png, image/jpeg, image/gif"
  130.           />
  131.         </div>
  132.         <div>
  133.           <label for="resume">个人信息：</label>
  134.           <textarea
  135.             name="resume"
  136.             id="resume"
  137.             cols="30"
  138.             rows="10"
  139.             placeholder="不超过100字"
  140.           ></textarea>
  141.         </div>
  142.       </fieldset>
  143.     </form>
  144.   </body>
  145.   <script>
  146.     function showPwd(ele) {
  147.       const pwd = document.querySelector("#pwd");
  148.       pwd.type = "text";
  149.     }
  150.   </script>
  151. </html>

运行效果

总结

  • colgroup不常用，使用CSS样式代替；

  • 常规表单与div模拟表单不同点在于：常规表格元素具有默认样式可直接使用，div模拟表格利用css样式将div修饰成表格样式；

  • 表单label标签的巧妙使用；

  • 熟悉表单元素的属性意义。

Correcting teacher：WJWJ

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