4.表格元素

最新推荐文章于 2022-09-01 10:44:21 发布

hua_cuo

最新推荐文章于 2022-09-01 10:44:21 发布

阅读量121

点赞数

分类专栏： HTML进阶笔记

本文链接：https://blog.csdn.net/hua_cuo/article/details/110621304

版权

笔记同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

HTML进阶

5 篇文章 0 订阅

订阅专栏

表格元素

在css技术之前，网页通常使用表格布局

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

前台：面向用户

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

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

table（表格）
caption（表格标题）
1. 表头（thead）
2. 表（tbody）
3. 表（tfoot）用于统计表格内的数据（总分，平均分等）
其中放置tr（table row）元素表示“一行”，td或td表示列
可用colspan="n"表示合并n行;rowspan="n"表示合并n列
1. 标题单元格（th）
2. 单元格（td）

display:table;表示表格格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            width: 100%;
            border-collapse: collapse; /* 表示表格形式 */
        }
        table caption{
            font-size: 2em;
            font-weight: boldo;
        }
        th,td{
            border:1px solid black ;
        }
        /* 下面是对表格的美化 */
        th,td{
            border: 1px solid #999;
            text-align: center;
            padding: 20px 0;
        }
        thead tr{
            background: #008c8c;
            color: white;
        }
        tbody tr:nth-child(odd){
            background:#eee;
        }
        tbody tr:hover{
            background: #ccc;
        }
        tbody th:last-child{
            color: chocolate;
        }
    </style>
</head>
<body>
    <table>
        <caption>这是一个表格标题</caption>
        <thead>
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
                <th>列4</th>
                <th>列5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="2">数据1</th>
                <th>数据2</th>
                <th>数据3</th>
                <th>数据4</th>
                <th>数据5</th>
            </tr>
            <tr>
                <!-- <th>数据1</th> -->
                <th>数据2</th>
                <th>数据3</th>
                <th>数据4</th>
                <th>数据5</th>
            </tr>
            <tr>
                <th>数据1</th>
                <th>数据2</th>
                <th>数据3</th>
                <th>数据4</th>
                <th>数据5</th>
            </tr>
            <tr>
                <th>数据1</th>
                <th>数据2</th>
                <th>数据3</th>
                <th>数据4</th>
                <th>数据5</th>
            </tr>
            <tr>
                <th>数据1</th>
                <th>数据2</th>
                <th>数据3</th>
                <th>数据4</th>
                <th>数据5</th>
            </tr>
            <tr>
                <th>数据1</th>
                <th>数据2</th>
                <th>数据3</th>
                <th>数据4</th>
                <th>数据5</th>
            </tr>
            <tr>
                <th>数据1</th>
                <th>数据2</th>
                <th>数据3</th>
                <th>数据4</th>
                <th>数据5</th>
            </tr>
            <tr>
                <th>数据1</th>
                <th>数据2</th>
                <th>数据3</th>
                <th>数据4</th>
                <th>数据5</th>
            </tr>
            <tr>
                <th>数据1</th>
                <th>数据2</th>
                <th>数据3</th>
                <th>数据4</th>
                <th>数据5</th>
            </tr>
            <tr>
                <th>数据1</th>
                <th>数据2</th>
                <th>数据3</th>
                <th>数据4</th>
                <th>数据5</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th>合计：xxx</th>
            </tr>
            <tr>
                <th colspan="5">合计：xxx</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述