表格元素-优快云博客

本文探讨了在CSS技术出现之前，网页布局依赖于表格的方法，以及在后台管理系统中表格的应用。详细介绍了表格的各个组成部分，如标题、表头、主体、表尾、行和单元格，并提供了HTML和CSS代码示例，展示了如何通过CSS美化表格，包括边框折叠、背景颜色、交替行颜色和鼠标悬停效果。

表格元素

在CSS技术出现前，网页通常使用表格布局。

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

前台：面向用户

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

问：表格不再使用于网页布局？答：表格的渲染速度过慢。

表格术语

表格：table
表格标题：caption
表头：thead
表格主体：tbody
表尾：tfoot
表格行：tr
标题单元格：th
单元格：td


<!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: bold;
            margin: 1em 0;

        }

        th,td{
            border: 1px solid #ccc;
            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 tr td:first-child{
            color: chocolate;
        }

        tfoot td{
            text-align: right;
            padding-right: 20px;
        }
    </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>
                <!-- 跨越行 -->
                <!-- <td rowspan="2">数据1</td> -->
                <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>
            <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>
                <!-- /*跨越5列合并单元格*/ -->
                <td colspan="5">合计：XXXX</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>