HTML css——表格元素

最新推荐文章于 2024-05-14 16:52:58 发布

33的史努比

最新推荐文章于 2024-05-14 16:52:58 发布

阅读量956

点赞数

分类专栏：前端入门学习文章标签： css html css3

本文链接：https://blog.csdn.net/coising/article/details/122682380

版权

前端入门学习专栏收录该内容

88 篇文章 0 订阅

订阅专栏

表格元素

在css出现之前，网页通常使用表格布局

后台管理系统中，可能会使用表格

前台：面向用户

后台：面向管理员对界面要求不高对功能性要求高

表格不再适用于网页布局？表格的渲染速度过慢

<!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>
    <style>
        table{
            width: 100%;
            border-collapse: collapse;
        }
        table caption{
            font-size: 2em;
            font-weight: bold;
            margin: 1em 0;
        }
        th,td{
            border: 1px solid #ccc;
            text-align: center;
            padding: 20px 0;
        }

        thead tr{
            background-color: #008c8c;
            color: white;
        }

        tbody tr:nth-child(odd){
            background-color: rgb(212, 205, 205);
        }

        tbody tr:hover{
            background-color: rgb(134, 119, 119);
        }

        tbody td:first-child{
            color: chocolate;
        }

        tfoot td{
            text-align: right;
            padding-right: 20px;
        }




    </style>
</head>
<body>
    <table>
        <caption>标题呀</caption>
        <thead>
            <!-- table row -->
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
                <th>列4</th>
                <th>列5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
                <td>数据3</td>
                <td>数据4</td>
                <td>数据5</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>

            <!-- 跨越x列 -->
                <td colspan="5">合计:xxx</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

33的史努比

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML css——表格元素

表格元素在css出现之前，网页通常使用表格布局后台管理系统中，可能会使用表格前台：面向用户后台：面向管理员对界面要求不高对功能性要求高表格不再适用于网页布局？表格的渲染速度过慢<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫

专栏目录