search

博客列表 >html表格与表单详解

html表格与表单详解

lilove的博客
lilove的博客原创
2020年06月18日 00:38:07966浏览

一、常规表格

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

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标签的巧妙使用；

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

上一条：盒模型的常用属性、元素大小重新计算、水平与垂直对齐下一条：CSS选择器初步解析
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多