css表格属性

Qwe7

发布于 2022-04-15 08:33:29

9190

发布于 2022-04-15 08:33:29

文章被收录于专栏：网络收集

11、表格样式

一、表格边框合并border-collapse

在了解什么叫“表格边框合并”之前，我们先来看一下在默认情况下表格加入边框是怎样的一个效果。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        table,th,td{border:1px solid gray;}

    </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>标准单元格1</td>

                <td>标准单元格2</td>

            </tr>

        </tbody>

        <!--表脚-->

        <tfoot>

            <tr>

                <td>标准单元格1</td>

                <td>标准单元格2</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

在浏览器预览效果如下：

<thead>、<tbody>和<tfoot>都是表格中语义化结构标签，这三个标签也是HTML代码语义化中非常重要的标签。详细内容请看“表格语义化标签”。

大家可以看到了，表格加入边框的默认情况下，单元格与单元格之间有一定的空隙。那如果我们要去除单元格之间的空隙，那该怎么办呢？

在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙。

语法：

border-collapse:属性值;

说明：

border-collapse是表格独有的属性。除了表格，在其他地方是用不上的。

border-collapse属性取值如下：

表1 border-collapse属性取值

border-collapse属性值说明

separate 默认值，边框分开，不合并

collapse 边框合并，如果相邻，则共用一个边框

separate意思是“分离”，而collapse意思是“折叠，瓦解”。

举例：


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>border-collapse属性</title>

    <style type="text/css">

        table,th,td{border:1px solid gray;}

        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>标准单元格1</td>

                <td>标准单元格2</td>

            </tr>

        </tbody>

        <!--表脚-->

        <tfoot>

            <tr>

                <td>标准单元格1</td>

                <td>标准单元格2</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

在浏览器预览效果如下：