CSS层叠样式表—CSS表格样式

来聊前端

于 2023-07-30 10:12:04 发布

阅读量148

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36893834/article/details/132004053

版权

表格样式

学习目标

在这里插入图片描述

表格标题位置

默认情况下，表格标题是在表格的上方。如果想要把表格标题放在表格的下方，应该怎么去实现呢？

在CSS中，我们可以使用caption-side属性来定义表格标题的位置。

语法：

caption-side: 取值;

说明：

caption-side属性取值只有2个，如下表所示。

属性值	说明
top	标题在顶部（默认值）
bottom	标题在底部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,tr, td,th{
            border:1px solid silver;
        }
        table{
            caption-side:bottom;
        }
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格1</td>
                <td>表行单元格2</td>
            </tr>
            <tr>
                <td>表行单元格3</td>
                <td>表行单元格4</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格5</td>
                <td>表行单元格6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表格边框合并

从前面的学习中可以知道，表格加入边框后的页面效果中，单元格之间是有一定空隙的。但是在实际开发中，为了让表格更加美观，我们都是要把单元格之间的空隙去除。

在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。

语法：

border-collapse: 取值;

说明：

border-collapse属性取值只有2个，如下表所示。

属性值	说明
separate	边框分开，有空隙（默认值）
collapse	边框合并，无空隙

separate指的是“分离”，而collapse指的是“折叠、瓦解”。从英文意思角度可以让我们更好地理解和记忆。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{
            border:1px solid silver;
        }
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格1</td>
                <td>表行单元格2</td>
            </tr>
            <tr>
                <td>表行单元格3</td>
                <td>表行单元格4</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格5</td>
                <td>表行单元格6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表格边框间距

在实际开发中，有时候我们却需要定义一下表格边框的间距。在CSS中，我们可以使用border-spacing属性来定义表格边框间距。

语法：

border-spacing: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{border-spacing: 8px;}
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格1</td>
                <td>表行单元格2</td>
            </tr>
            <tr>
                <td>表行单元格3</td>
                <td>表行单元格4</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格5</td>
                <td>表行单元格6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

课程总结

在这里插入图片描述

来聊前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠样式表—CSS表格样式

默认情况下，表格标题是在表格的上方。如果想要把表格标题放在表格的下方，应该怎么去实现呢？在CSS中，我们可以使用caption-side属性来定义表格标题的位置。语法：说明：caption-side属性取值只有2个，如下表所示。表格边框合并从前面的学习中可以知道，表格加入边框后的页面效果中，单元格之间是有一定空隙的。但是在实际开发中，为了让表格更加美观，我们都是要把单元格之间的空隙去除。在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条。
复制链接

扫一扫