菜单 搜索
首页 前端知识 HTML5常用标签表格

HTML5常用标签表格

2024-06-06 00:06:08 前端知识 前端哥 931 677 我要收藏

04-08、表格标签table

概述

表格：是一种行和列组合而成的单元格。一般应用于后台网页设计管理数据使用。

表格的架构部分：

  • table
  • table head 表格头 thead
  • table body - 表格体 tbody
  • table foot -表格的页脚 tfoot

表格的基本组成部分：

  • table row - tr 表格中的行
  • table data cell - td 表格中的单元格
  • table header cell -th 表格中的头部的单元格

表格的基本语法：

<!--table表格标签-->
<table border="1px">
    <!--tr 行标签-->
    <tr>
        <!--td 单元格标签-->
        <td>第1个单元格的内容</td>
        <td>第2个单元格的内容</td>
        ……
    </tr>
    <tr>
        <td>第1个单元格的内容</td>
        <td>第2个单元格的内容</td>
        ……
    </tr>
</table>

代码

简单表格：

<!--table表格标签-->
<table border="1px">
    <!--tr 行标签-->
    <tr>
        <!--td 单元格标签-->
        <td>第1个单元格的内容</td>
        <td>第2个单元格的内容</td>
        ……
    </tr>
    <tr>
        <td>第1个单元格的内容</td>
        <td>第2个单元格的内容</td>
        ……
    </tr>
</table>

表格完整分类

demo15.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格table</title>
    <style>
        *{margin: 0;padding: 0;}
    body{margin: 100px;}
      table{width: 100%;border-collapse:collapse;margin: 20px 0;}
      table thead th,
      table tbody td{
        text-align: left;
        padding:10px;
        border:1px solid #ccc
      } 

       .thead th,
       .tbody td{
        text-align: left;
        padding:10px;
        border:1px solid #ccc

      } 
    </style>
</head>
<body>
    
    <!--简单表格-->
    <table >
        <tr class="thead">
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr class="tbody">
            <td>1</td>
            <td>飞哥</td>
            <td>35</td>
            <td>编辑</td>
        </tr>
        <tr class="tbody">
            <td>2</td>
            <td>狂神</td>
            <td>25</td>
            <td>编辑</td>
        </tr>
    </table>
    <hr>
    <!--完整表格-->
    <table >
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>飞哥</td>
                <td>35</td>
                <td>编辑</td>
            </tr>
            <tr>
                <td>2</td>
                <td>狂神</td>
                <td>25</td>
                <td>编辑</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td colspan="10">总共：2个用户</td>
            </tr>
        </tfoot>
    </table>
    
</body>
</html>
  • table > thead > td > th 默认是加粗 + 居中
  • table > tbody> td > td 默认是不加粗 + 居左

合并单元格 - 合并行—>rowspan

demo16.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格table</title>
    <style>
        *{margin: 0;padding: 0;}
    body{margin: 100px;}
      table{width: 100%;border-collapse:collapse;margin: 20px 0;}
      table thead th,
      table tbody td,
      table tfoot td{
        text-align: left;
        padding:10px;
        border:1px solid #ccc
      } 

    </style>
</head>
<body>
    
    
    <!--完整表格-->
    <table >
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>总年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">1</td>
                <td>飞哥</td>
                <td>35</td>
                <td rowspan="2">60</td>
                <td>编辑</td>
            </tr>
            <tr>
                <td>狂神</td>
                <td>25</td>
                <td>编辑</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" >总共：2个用户</td>
            </tr>
        </tfoot>
    </table>
    
</body>
</html>

合并单元格 - 合并列—>colspan

    <!--合并单元格的问题 -- 合并列-->
    <div>
        <h3>合并单元格的问题 -- 合并列</h3>
        <table border="1" width="100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>狂神</td>
                    <td>20</td>
                    <td>
                        <a href="#">编辑</a>
                        <a href="#">移除</a>
                    </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>飞哥</td>
                    <td>35</td>
                    <td>
                        <a href="#">编辑</a>
                        <a href="#">移除</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">总计：2人 性别男：2个 性别女：0个 平均年龄：30</td>
                </tr>
            </tfoot>
        </table>
    </div>

表格的跨行和跨列

<!--文档类型：主要定义页面支持的标签类型，以及后续每个标签的命名，特征和行为-->
<!DOCTYPE html>
<!--整个页面的根元素-->
<html>
<!--页面的头部：主要用来设置浏览器解析页面时候的编码，头信息，页面描述、关键字,css样式列表引入和js引入，响应式规则等-->

<head>
    <!--告诉浏览器解析网页的内容使用utf-8进行编码-->
    <meta charset="utf-8">
    <!--响应式规则-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--设置关键字和描述-->
    <meta name="keywords" content="KuangStudy,KuangStudy文章,KuangStudy博客,KuangStudy论坛,KuangStudy学习,学相伴">
    <meta name="description" content="KuangStudy是一个致力于为每个想学习知识的人提供一个少走弯路的平台,包含优质体系课程、文章博客、专栏书写、技术论坛、资源下载等产品服务,提供有用、优质、完整内容的自学交流社区.">
    <!--设置图标-->
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
    <!--给浏览器的标签上显示标题，也可以作为网页收藏的文字-->
    <title>表格分组-学相伴</title>
</head>

<body>

    <!---完整的表格 -->
    <div>
        <h3>完整的表格</h3>
        <table border="1" width="100%">
            <colgroup>
                <col width="200px" align="center" />
                <col />
                <col />
                <col />
                <col width="100px" />
            </colgroup>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户姓名</th>
                    <th>年龄</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>狂神</td>
                    <td>20</td>
                    <td>重庆</td>
                    <td>
                        <a href="#">编辑</a>
                        <a href="#">移除</a>
                    </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>飞哥</td>
                    <td>35</td>
                    <td>湖南</td>
                    <td>
                        <a href="#">编辑</a>
                        <a href="#">移除</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">分页</td>
                </tr>
            </tfoot>
        </table>
    </div>

</body>

</html>

表格和表单组合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--table表格标签-->
    <table border="1" width="100%">
        <tr>
            <td>标题</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
        <tr>
            <td><input type='text' /></td>
            <td><input type='text' /></td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
    </table>
</body>
</html>

固定表格列的宽度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--table表格标签-->
    <table border="1" width="100%">
        <tr>
            <td align="center" width="200px">标题</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
        <tr>
            <td align="center" width="200px"><input type='text' /></td>
            <td><input type='text' /></td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
    </table>
</body>

</html>

colgroup统一设置列的宽度和对齐方式

<!--文档类型：主要定义页面支持的标签类型，以及后续每个标签的命名，特征和行为-->
<!DOCTYPE html>
<!--整个页面的根元素-->
<html>
<!--页面的头部：主要用来设置浏览器解析页面时候的编码，头信息，页面描述、关键字,css样式列表引入和js引入，响应式规则等-->

<head>
    <!--告诉浏览器解析网页的内容使用utf-8进行编码-->
    <meta charset="utf-8">
    <!--响应式规则-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--设置关键字和描述-->
    <meta name="keywords" content="KuangStudy,KuangStudy文章,KuangStudy博客,KuangStudy论坛,KuangStudy学习,学相伴">
    <meta name="description" content="KuangStudy是一个致力于为每个想学习知识的人提供一个少走弯路的平台,包含优质体系课程、文章博客、专栏书写、技术论坛、资源下载等产品服务,提供有用、优质、完整内容的自学交流社区.">
    <!--设置图标-->
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
    <!--给浏览器的标签上显示标题，也可以作为网页收藏的文字-->
    <title>表格分组-学相伴</title>
</head>

<body>

    <!---完整的表格 -->
    <div>
        <h3>完整的表格</h3>
        <table border="1" width="100%">
            <colgroup>
                <col width="200px" align="center" />
                <col />
                <col />
                <col />
                <col width="100px" />
            </colgroup>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户姓名</th>
                    <th>年龄</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>狂神</td>
                    <td>20</td>
                    <td>重庆</td>
                    <td>
                        <a href="#">编辑</a>
                        <a href="#">移除</a>
                    </td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>飞哥</td>
                    <td>35</td>
                    <td>湖南</td>
                    <td>
                        <a href="#">编辑</a>
                        <a href="#">移除</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">分页</td>
                </tr>
            </tfoot>
        </table>
    </div>

</body>

</html>

注意col元素-只能控制宽度，不能控制对齐方式，如果都设置了会忽略宽度，变成自动分配。

场景

  • https://preview.pro.ant.design/ 后台管理系统
    在这里插入图片描述

  • https://v3.bootcss.com/css/#tables
    在这里插入图片描述

demo01---->合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container{width: 960px;margin: 0 auto; background: #fafafa; padding: 20px;}
        /* 合并边框 */
        table{border-collapse: collapse; width: 100%;}
        /* solid实线 text-align: center;全部居中*/
        table tr th,table tr td{border: 1px solid #111; padding: 10px; text-align: center;}
    </style>
</head>
<body>
    <div class="container">
        <h1>表格的认识table</h1>
        <div>横向是合并:列 colspan=,垂直方向是合并:行 rowspan= 最终合并时在td上</div>

        <table>
            <!-- 控制某一行的宽度 -->
            <!-- <colgroup>
                <col style="width:  500px;"/>
                <col style="width:  500px;"/>
            </colgroup> -->
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>小成</td>
                    <td>26</td>
                    <td>编辑,操作</td>
                </tr>

                <tr>
                    <td>1</td>
                    <td>小成</td>
                    <td>26</td>
                    <td>编辑,操作</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">分页</td>
                    <!-- <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td> -->
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

demo2—>选中的状态和淡入淡出的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container{width:960px;margin: 0 auto;background:#fafafa;padding:20px;}
        .ksd-ui-table{border-collapse: collapse;width: 100%;}
        .ksd-ui-table tr th,.ksd-ui-table tr td{border:1px solid #ccc;padding:10px;text-align: center;}
        /* 淡入淡出的效果 */
        .ksd-ui-table tr{transition: 300ms;}
        /* 选中的状态 */
        .ksd-ui-table tr:hover{background:#eee;}
    </style>
</head>
<body>
    <div class="container">
        <table class="ksd-ui-table">
            <thead>
                <tr>
                    <th>ID</th>    
                    <th>姓名</th>    
                    <th>年龄</th>    
                    <th>操作</th>    
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>ID</td>    
                    <td>姓名</td>    
                    <td>年龄</td>    
                    <td>操作</td>        
                </tr>
                <tr>
                    <td>ID</td>    
                    <td>姓名</td>    
                    <td>年龄</td>    
                    <td>操作</td>        
                </tr>
                <tr>
                    <td>ID</td>    
                    <td>姓名</td>    
                    <td>年龄</td>    
                    <td>操作</td>        
                </tr>
                <tr>
                    <td>ID</td>    
                    <td>姓名</td>    
                    <td>年龄</td>    
                    <td>操作</td>      
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>ID</td>    
                    <td>姓名</td>    
                    <td>年龄</td>    
                    <td>操作</td>      
                </tr>
            </tfoot>
        </table>

    </div>
</body>
</html>

demo—>单双行界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container{width:960px;margin: 0 auto;background:#fafafa;padding:20px;}
        .ksd-ui-table{border-collapse: collapse;width: 100%;}
        .ksd-ui-table tr th,.ksd-ui-table tr td{border:1px solid #ccc;padding:10px;text-align: center;}
        /* 淡入淡出的效果 */
        .ksd-ui-table tr{transition: 300ms;}

       
        /* 单双行界面 */
        .ksd-ui-table tbody tr:nth-child(odd){background:#fafafa;}
        .ksd-ui-table tbody tr:nth-child(even){background:#eee;}

          /* 选中的状态 nth-child比hover优先级更高*/
          .ksd-ui-table tbody tr:hover{background:#111;color: #fff;}
    </style>
</head>
<body>
    <div class="container">
        <table class="ksd-ui-table">
            <thead>
                <tr>
                    <th>ID</th>    
                    <th>姓名</th>    
                    <th>年龄</th>    
                    <th>操作</th>    
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>ID</td>    
                    <td>姓名</td>    
                    <td>年龄</td>    
                    <td>操作</td>        
                </tr>
                <tr>
                    <td>ID</td>    
                    <td>姓名</td>    
                    <td>年龄</td>    
                    <td>操作</td>        
                </tr>
                <tr>
                    <td>ID</td>    
                    <td>姓名</td>    
                    <td>年龄</td>    
                    <td>操作</td>        
                </tr>
                <tr>
                    <td>ID</td>    
                    <td>姓名</td>    
                    <td>年龄</td>    
                    <td>操作</td>      
                </tr>
            </tbody>
        </table>

    </div>
</body>
</html>

demo->给外部加边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container{width:960px;margin: 0 auto;background:#fafafa;padding:20px;}
        .ksd-ui-table{border-collapse: collapse;width: 100%;}

        /* 给外部加边框  border-bottom 去掉下边框*/
        .ksd-ui-table-box{border: 1px solid #ccc; border-bottom: 0px;}
        /* border-bottom只给底部加入边框 */
        .ksd-ui-table tr th,.ksd-ui-table tr td{border-bottom:1px solid #ccc;padding:10px;text-align: center;}
        /* 淡入淡出的效果 */
        .ksd-ui-table tr{transition: 300ms;}

       
        /* 单双行界面 */
        .ksd-ui-table tbody tr:nth-child(odd){background:#fafafa;}
        .ksd-ui-table tbody tr:nth-child(even){background:#eee;}

          /* 选中的状态 nth-child比hover优先级更高*/
          .ksd-ui-table tbody tr:hover{background:#111;color: #fff;}
    </style>
</head>
<body>
    <div class="container">
        <div class="ksd-ui-table-box">
            <table class="ksd-ui-table">
                <thead>
                    <tr>
                        <th>ID</th>    
                        <th>姓名</th>    
                        <th>年龄</th>    
                        <th>操作</th>    
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>      
                    </tr>
                </tbody>
            </table>
    
        </div>
    </div>
</body>
</html>

demo–>悬浮定位和固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container{width:960px;margin: 0 auto;background:#fafafa;padding:20px;}
        /* table-layout: fixed;数据对齐 布局全部用fixed*/
        .ksd-ui-table{border-collapse: collapse;width: 100%; table-layout: fixed;}

        /* 给外部加边框  border-bottom 去掉下边框*/
        .ksd-ui-table-box{border: 1px solid #ccc; border-bottom: 0px;}
        /* border-bottom只给底部加入边框 */
        .ksd-ui-table tr th,.ksd-ui-table tr td{border-bottom:1px solid #ccc;padding:10px;text-align: center;}
        /* 淡入淡出的效果 */
        .ksd-ui-table tr{transition: 300ms;}

       
        /* 单双行界面 */
        .ksd-ui-table tbody tr:nth-child(odd){background:#fafafa;}
        .ksd-ui-table tbody tr:nth-child(even){background:#eee;}

          /* 选中的状态 nth-child比hover优先级更高*/
          .ksd-ui-table tbody tr:hover{background:#111;color: #fff;}
          /* 悬浮定位和固定定位  当滚动条加载到top：0的时候没救把定位static改成fixed*/
          .ksd-ui-table-headfix{position: sticky;top: 0; background: #fff;}
    </style>
</head>
<body>
    <div class="container">
        <div class="ksd-ui-table-box">
            <table class="ksd-ui-table ksd-ui-table-headfix">
                <thead>
                    <tr>
                        <th>ID</th>    
                        <th>姓名</th>    
                        <th>年龄</th>    
                        <th>操作</th>    
                    </tr>
                </thead>
            </table>
            <table class="ksd-ui-table">
                <tbody>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>        
                    </tr>
                    <tr>
                        <td>ID</td>    
                        <td>姓名</td>    
                        <td>年龄</td>    
                        <td>操作</td>      
                    </tr>
                </tbody>
            </table>
    
        </div>
    </div>
</body>
</html>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/10985.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Session在前端页面无法传递的原因及解决方法

2024-06-10 23:06:14

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例4-9 HTML5 表单验证

2024-06-10 23:06:12

css如何把header栏固定在屏幕顶部

2024-06-10 23:06:11

《HTML5网页设计》——HTML5基础

2024-06-10 23:06:56

编程笔记 html5&css&js 076 Javascript 表达式

2024-06-10 23:06:55

js 指定光标位置

2024-06-10 23:06:55

Node.js毕业设计基于HTML5的历史车轮—汴京网站（Express 附源码）

2024-06-10 23:06:45

编程笔记 html5&css&js 014 网页布局框架

2024-06-10 23:06:45

HTML5文档头部相关标签怎样使用？，附架构师必备技术详解

2024-06-10 23:06:34

Vue2中v-html引发的安全问题

2024-06-10 23:06:30

大家推荐的文章
1

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
2

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
3

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
4

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
5

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
6

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
7

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
8

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
9

UE4.27支持HTML5

2024-05-07 13:05:261000
10

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！