css表格

作者：夜雨行空发布日期:2025-06-30 浏览:34

<!DOCTYPE html>
<html>
<head>
    <title>CSS表格示例</title>
    <style>
        /* 定义表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* 设置单元格边框和内边距 */
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        /* 设置表头背景颜色 */
        th {
            background-color: #f2f2f2;
        }

        /* 鼠标悬停在行上时改变背景颜色 */
        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>

<h2>使用CSS样式的表格</h2>

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>28</td>
        <td>工程师</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>34</td>
        <td>设计师</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>45</td>
        <td>经理</td>
    </tr>
</table>

</body>
</html>

解释说明：

HTML结构：
- 使用了标准的HTML表格标签<table>、<tr>（表格行）、<th>（表头单元格）和<td>（数据单元格）来构建表格。
CSS样式：
- table：设置表格宽度为100%，并使用border-collapse: collapse使表格边框合并，避免双重边框。
- th, td：为表头和数据单元格设置了边框、内边距以及文本对齐方式。
- th：为表头单元格设置了背景颜色。
- tr:hover：当鼠标悬停在表格行上时，改变该行的背景颜色，提升用户体验。

上一篇：css 最后一个元素

下一篇：css边框渐变