微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 UI设计 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > html表格与表单详解
博主信息
博文 100
粉丝 8
评论 2
访问量 174900
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html表格与表单详解
lilove的博客
原创
1245人浏览过

一、常规表格

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

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

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

批改老师：WJWJ

批改状态：合格

老师批语：表格那块写的非常不错，继续加油！
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录