Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML表格与表单的结构与不同写法
Blogger Information
Blog 6
fans 0
comment 0
visits 3651
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表格与表单的结构与不同写法
Dobeen
Original
603 people have browsed it

普通表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>普通表格练习</title>
  6.   <style>
  7.     * { padding: 0; margin: 0; font-size: 14px; }
  8.     table { width: 50%; margin: auto; border-collapse: collapse; }
  9.     table caption { font-size: 1.2rem; margin: 15px 0;}
  10.     table thead { background-color: #f9f8f8; }
  11.     td, th { padding: 10px; border-bottom: 1px solid #f5f5f5; }
  12.     tbody td:nth-child(n + 2) { text-align: center; }
  13.     tbody tr:nth-child(even) { background-color: #f9f8f8 } /* 隔行换色 */
  14.     tbody tr:hover { background-color: #f9f8f8; } /* 鼠标掠过改变行背景色 */
  15.     tfoot { font-weight: bolder; }
  16.     div { width: 50%; margin: 20px auto; text-align: right; }
  17.     div button { background-color: #ff3600; color: #FFF; border: none; padding: 5px 15px; cursor: pointer; }
  18.   </style>
  19. </head>
  20. <body>
  21.   <table>
  22.     <caption>我的购物车</caption>
  23.     <thead>
  24.       <tr>
  25.         <th>物品</th>
  26.         <th>数量</th>
  27.         <th>价格</th>
  28.       </tr>
  29.     </thead>
  30.     <tbody>
  31.       <tr>
  32.         <td>碧螺春 茶叶绿茶2020新茶 明前一级春茶嫩芽 250克</td>
  33.         <td>x1</td>
  34.         <td>108</td>
  35.       </tr>
  36.       <tr>
  37.         <td>佳佰 温差全自动搅拌杯智能咖啡杯磁力旋转杯子创意礼品杯</td>
  38.         <td>x1</td>
  39.         <td>149</td>
  40.       </tr>
  41.       <tr>
  42.         <td>欧莱雅男士火山岩控油抗痘护肤套装</td>
  43.         <td>x1</td>
  44.         <td>249</td>
  45.       </tr>
  46.       <tr>
  47.         <td>小米儿童电话手表3C?移动联通4G?防水GPS定位</td>
  48.         <td>x1</td>
  49.         <td>349</td>
  50.       </tr>
  51.       <tr>
  52.         <td>德国品牌宝视德（Bresser)儿童生物显微镜</td>
  53.         <td>x1</td>
  54.         <td>175</td>
  55.       </tr>
  56.     </tbody>
  57.     <tfoot>
  58.       <tr>
  59.         <td>总计</td>
  60.         <td colspan="2">1632</td>
  61.       </tr>
  62.     </tfoot>
  63.   </table>
  64.   <div>
  65.     <button>立即结算</button>
  66.   </div>
  67. </body>
  68. </html>

DIV表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>DIV表格练习</title>
  6.   <style>
  7.     * { padding: 0; margin: 0; font-size: 14px; }
  8.     .table { display: table; width: 50%; margin: auto; }
  9.     .table-caption { display: table-caption; font-size: 1.2rem; margin: 15px 0; text-align: center; }
  10.     .table-header { display: table-header-group; text-align: center; font-weight: bolder; }
  11.     .table-header .table-row { background-color: #f9f8f8; }
  12.     .table-row { display: table-row; }
  13.     .table-cell { display: table-cell; padding: 10px; border-bottom: 1px solid #f5f5f5; }
  14.     .table-body { display: table-row-group; }
  15.     .table-footer { display: table-footer-group; font-weight: bolder;  }
  16.     .table-row .table-cell:nth-child(n + 2) { text-align: center; } /* 最后两列居中显示 */
  17.     .table-body .table-row:nth-child(even) { background-color: #f9f8f8; } /* 隔行换色 */
  18.     .table-body .table-row:hover { background-color: #f9f8f8; }
  19.     .btn-box { width: 50%; margin: 20px auto; text-align: right; }
  20.     .btn-box button { background-color: #ff3600; color: #FFF; border: none; padding: 5px 15px; cursor: pointer; }
  21.   </style>
  22. </head>
  23. <body>
  24.   <div class="table">
  25.     <div class="table-caption">我的购物车</div>
  26.     <div class="table-header">
  27.       <div class="table-row">
  28.         <div class="table-cell">物品</div>
  29.         <div class="table-cell">数量</div>
  30.         <div class="table-cell">价格</div>
  31.       </div>
  32.     </div>
  33.     <div class="table-body">
  34.       <div class="table-row">
  35.         <div class="table-cell">碧螺春 茶叶绿茶2020新茶 明前一级春茶嫩芽 250克</div>
  36.         <div class="table-cell">x1</div>
  37.         <div class="table-cell">109</div>
  38.       </div>
  39.       <div class="table-row">
  40.         <div class="table-cell">佳佰 温差全自动搅拌杯智能咖啡杯磁力旋转杯子创意礼品杯</div>
  41.         <div class="table-cell">x1</div>
  42.         <div class="table-cell">143</div>
  43.       </div>
  44.       <div class="table-row">
  45.         <div class="table-cell">欧莱雅男士火山岩控油抗痘护肤套装</div>
  46.         <div class="table-cell">x1</div>
  47.         <div class="table-cell">189</div>
  48.       </div>
  49.       <div class="table-row">
  50.         <div class="table-cell">小米儿童电话手表3C?移动联通4G?防水GPS定位</div>
  51.         <div class="table-cell">x1</div>
  52.         <div class="table-cell">349</div>
  53.       </div>
  54.       <div class="table-row">
  55.         <div class="table-cell">德国品牌宝视德（Bresser)儿童生物显微镜</div>
  56.         <div class="table-cell">x1</div>
  57.         <div class="table-cell">175</div>
  58.       </div>
  59.     </div>
  60.     <div class="table-footer">
  61.       <div class="table-row">
  62.         <div class="table-cell">总计</div>
  63.         <div class="table-cell"></div>
  64.         <div class="table-cell">1632</div>
  65.       </div>
  66.     </div>
  67.   </div>
  68.   <div class="btn-box">
  69.     <button>立即结算</button>
  70.   </div>
  71. </body>
  72. </html>

表单练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>表单练习</title>
  6.   <style>
  7.     * { margin: 0; padding: 0; font-size: 14px; }
  8.     .regform { width: 50%; margin: auto; }
  9.     fieldset { margin-top: 20px; border: 1px solid #ddd; }
  10.     .regform legend { margin-left: 20px; padding: 0 10px; }
  11.     .fieldbox { zoom: 1; padding-left: 10px; height: 40px; line-height: 40px; }
  12.     .fieldbox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  13.     .fieldbox span { float: left; width: 80px; }
  14.     input { padding: 3px 5px; }
  15.     .btn-box { width: 50%; margin: 20px auto; text-align: center; }
  16.     .btn-box button { background-color: #ff3600; color: #FFF; border: none; padding: 5px 15px; cursor: pointer; }
  17.   </style>
  18. </head>
  19. <body>
  20.   <div class="regform">
  21.     <form action="" method="post">
  22.       <fieldset>
  23.         <legend>注册信息</legend>
  24.         <div class="fieldbox">
  25.           <label>
  26.             <span>账号：</span>
  27.             <input type="text" name="username" required placeholder="6-15位英文字符">
  28.           </label>
  29.         </div>
  30.         <div class="fieldbox">
  31.           <label>
  32.             <span>邮箱：</span>
  33.             <input type="email" name="email" required placeholder="请输入常用邮箱">
  34.           </label>
  35.         </div>
  36.         <div class="fieldbox">
  37.           <label>
  38.             <span>密码：</span>
  39.             <input type="password" name="password" required placeholder="请设置登录密码">
  40.           </label>
  41.         </div>
  42.         <div class="fieldbox">
  43.           <label>
  44.             <span>确认密码：</span>
  45.             <input type="password" name="password2" required placeholder="请再次输入密码">
  46.           </label>
  47.         </div>
  48.       </fieldset>
  50.       <fieldset>
  51.         <legend>扩展信息</legend>
  52.         <div class="fieldbox">
  53.           <label>
  54.             <span>年龄：</span>
  55.             <input type="text" name="age" placeholder="请输入年龄">
  56.           </label>
  57.         </div>
  58.         <div class="fieldbox">
  59.           <label>
  60.             <span>性别：</span>
  61.             <label><input type="radio" name="gender" value="1" checked> 男</label>
  62.             <label><input type="radio" name="gender" value="2"> 女</label>
  63.           </label>
  64.         </div>
  65.         <div class="fieldbox">
  66.           <label>
  67.             <span>兴趣爱好：</span>
  68.             <label><input type="checkbox" name="hobby[]" value="打游戏"> 打游戏</label>
  69.             <label><input type="checkbox" name="hobby[]" value="看书"> 看书</label>
  70.             <label><input type="checkbox" name="hobby[]" value="听音乐"> 听音乐</label>
  71.           </label>
  72.         </div>
  73.       </fieldset>
  74.       <div class="btn-box">
  75.         <button type="submit">立即注册</button>
  76.       </div>
  77.     </form>
  78.   </div>
  79. </body>
  80. </html>

学习小结

直播课堂时间有限，老师讲的也有限，课后自己练习，查阅相关资料很有必要。

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