HTML 表格列表

最新推荐文章于 2022-07-06 20:04:08 发布

一片海x

最新推荐文章于 2022-07-06 20:04:08 发布

阅读量109

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/xingxinglinxi/article/details/108589415

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

表格用来展示数据

<table>

<thead>

</thead>

<tbody>

</tody>

</table>

合并单元格先确定跨行还是跨列，找到目标单元格，写合并代码，删除多余单元格

跨行合并：rowspan="合并个数"

跨列合并：colspan="合并个数"

列表

无序列表 ul ：unordered list

有序列表 ol：ordered list

自定义列表 dl dd dt

！！！

border-collapse: collapse 边框合并； sparate 边框分开；

list-style：none；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         table {
            margin: 100px auto;
            width: 900px;
            text-align: center;
            border-collapse: collapse;
        }
        thead {
            background-color: rgb(151, 198, 252);
            color: #ccc;
        }

        tr {
            height: 30px;
            width: 600px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>客户名称</th>
                <th>真实姓名</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>客户等级</th>
                <th>客户来源</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>安徽省淮北市</td>
                <td>林芳</td>
                <td>18845678900</td>
                <td>1190887@163.com</td>
                <td>普通用户</td>
                <td>客服录入</td>
            </tr>
            <tr>
                <td>安徽省淮北市</td>
                <td>林芳</td>
                <td>18845678900</td>
                <td>1190887@163.com</td>
                <td>普通用户</td>
                <td>客服录入</td>
            </tr>
            <tr>
                <td>安徽省淮北市</td>
                <td>林芳</td>
                <td>18845678900</td>
                <td>1190887@163.com</td>
                <td>普通用户</td>
                <td>客服录入</td>
            </tr>
            
        </tbody>
    </table>
    <script>
        var tbody=document.querySelector("tbody");
        var trs=tbody.querySelectorAll("tr");
        for(var i=0;i<trs.length;i++){
            trs[i].addEventListener("mouseover",function(){
                for(var i=0;i<trs.length;i++){
                    trs[i].style.backgroundColor="";
                }
                this.style.backgroundColor="rgb(151, 198, 252)";
            });
            trs[i].addEventListener("mouseout",function(){
                this.style.backgroundColor="";
            })
        }
    </script>
</body>
</html>

结果显示

一片海x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 表格列表

表格用来展示数据<table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr></tody></table>合并单元格先确定跨行还是跨列，找到目标单元格，
复制链接

扫一扫