首页 前端CSS正文

CSS - 表格样式

原创
admin 4个月前 (08-07) 阅读数 20 #CSS

CSS - 表格样式

在网页中设置表格样式涉及使用CSS属性来自定义表格的外观。CSS属性如border-collapse、border-spacing和caption-side可以应用于表格，以控制表格及其单元格的边框、间距和对齐方式。

本章讨论如何使用CSS设置HTML表格的不同属性。

CSS表格边框样式

要设置表格边框样式，我们可以使用CSS属性如border和border-radius。您可以在表格、行或单个单元格上使用border属性来设置边框的宽度、颜色和样式。

  • border：CSS border属性设置表格边框所有四边的宽度、样式和颜色（例如，border: 1px solid black;）。
  • border-radius：CSS border-radius属性使表格边框的角变圆（例如，border-radius: 5px|50%）。

示例

在此示例中，我们使用CSS的border和border-radius属性设置了圆角表格边框。

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-radius: 10px;
            border: 2px solid #031926;
            width: 100%;
        }
        td {
            border: 1px solid black;
            height: 50px;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
            <th>标题 4</th>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
            <td> 数据 4</td>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
            <td> 数据 4</td>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
            <td> 数据 4</td>
        </tr>
    </table>
</body>

</html>

CSS表格边框折叠

要合并表格的单元格边框或保持单元格边框分离，使用border-collapse属性。要合并单元格边框，使用collapse值，而separate值保持边框独立。

示例

在以下示例中，我们使用了带有collapse和separate值的border-collapse属性。

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border: 3px solid purple;
        }
        th, td {
            border: 1px solid black;
            padding: 6px;
        }
    </style>
</head>

<body>
    <h2> border-collapse: separate </h2>
    <table>
        <tr>
            <th>标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
        </tr>
    </table>

    <h2> border-collapse: collapse </h2>
    <table style="border-collapse: collapse;">
    <tr>
        <th>标题 1</th>
        <th>标题 2</th>
        <th>标题 3</th>
    </tr>

    <tr>
        <td> 数据 1</td>
        <td> 数据 2</td>
        <td> 数据 3</td>
    </tr>

    <tr>
        <td> 数据 1</td>
        <td> 数据 2</td>
        <td> 数据 3</td>
    </tr>
</table>
</body>
</html>

CSS表格边框间距

要设置表格中相邻单元格边框之间的距离，使用border-spacing属性。此属性可以指定为一个或两个值。

  • border-spacing: 2px: 它对垂直和水平边框都应用2px间距。
  • border-spacing: 1cm 2em: 在这种情况下，第一个值定义单元格之间的水平间距（即相邻列中单元格之间的空间），第二个值定义单元格之间的垂直间距（即相邻行中单元格之间的空间）。

示例

在此示例中，我们将border-spacing属性设置为水平1em，垂直0.5em。

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-collapse: separate;
            border-spacing: 1em 0.5em;
            border: 3px solid;
        }
        td {
            width: 1.5em;
            height: 1.5em;
            border: 1px solid black;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
        </tr>
    </table>
</body>

</html>

注意： border-spacing属性仅在border-collapse设置为separate时才有效。如果将border-collapse设置为collapse，则border-spacing属性将不起作用，边框将折叠成一条线。

CSS表格标题位置

要控制表格标题的位置，使用caption-side属性。

示例

在此示例中，我们使用caption-side属性将表格标题分别放置在第一个表格的顶部和第二个表格的底部。

<!DOCTYPE html>
<html>

<head>
    <style>
        .top caption {
            caption-side: top;
        }
        .bottom caption {
            caption-side: bottom;
        }
        table {
            border: 1px solid red;
        }
        td {
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <table class="top">
        <caption>
            表格上方的标题
        </caption>
        
        <tr>
            <th>标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
        </tr>
        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
        </tr>
    </table>
    <br />

    <table class="bottom">
        <caption>
            表格下方的标题
        </caption>

        <tr>
            <th>标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
        </tr>
        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
        </tr>
    </table>
</body>
</html>

CSS表格空单元格

要渲染表格中的空单元格，使用empty-cells属性。empty-cells属性仅应用于表格和表格单元格。它有以下两个值：

  • show: 这是默认值，表示空单元格应显示边框和间距，就好像它们包含内容一样。
  • hide: 表示空单元格应隐藏，不占用任何空间。空单元格的边框和间距将不会显示。

示例

在此示例中，我们使用empty-cells属性，分别使用show和hide值来显示和隐藏空单元格。

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 350px;
            border-collapse: separate;
            empty-cells: show;
        }
        td,th {
            padding: 5px;
            border-style: solid;
            border-width: 1px;
            border-color: #999999;
        }
    </style>
</head>

<body>
    <h2> 空单元格：显示 </h2>    
    <table>
        <tr>
            <th>标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
        </tr>
        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> </td>
        </tr>
    </table>

    <h2> 空单元格：隐藏 </h2>    
    <table style="empty-cells: hide;">
    <tr>
        <th>标题 1</th>
        <th>标题 2</th>
        <th>标题 3</th>
    </tr>
    <tr>
        <td> 数据 1</td>
        <td> 数据 2</td>
        <td> </td>
    </tr>
</table>
</body>
</html>

CSS表格布局

CSS table-layout属性用于控制浏览器应如何渲染表格。它定义用于布局表格单元格、行和列的算法。它具有以下属性值：

  • auto: 这是默认值，浏览器根据内容计算列和单元格的宽度。
  • fixed: 它基于指定的表格或列宽度设置固定列宽。如果未指定宽度，则使用第一行确定列宽，其余行遵循相同的列宽，无论内容如何。

示例

在此示例中，table-layout属性与auto和fixed值一起使用。

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>固定布局的表格</h2>
    <table style="table-layout: fixed; ">
        <tr>
            <th>标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
        </tr>

        <tr>
            <td>第1行，第1列</td>
            <td>第1行，第2列</td>
            <td>第1行，第3列</td>
        </tr>

        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
        </tr>
    </table>

    <h2>自动布局的表格</h2>
    <table style="table-layout: auto; ">
        <tr>
            <th>标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
        </tr>

        <tr>
            <td>第1列中的一些较长内容</td>
            <td>短内容</td>
            <td>第3列中可能换行的更长内容</td>
        </tr>

        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
        </tr>
    </table>
</body>
</html>

注意： 固定表格布局比自动布局更快，因为固定值不依赖于表格的内容，而是依赖于表格的宽度。

CSS表格内容对齐

要对齐表格单元格中的内容，使用CSS属性如text-align和vertical-align属性。

  • text-align：它设置表格单元格内文本内容的水平对齐方式。它可以有left、right、center和justify等值。
  • CSS vertical-align：它设置表格单元格内内容的垂直对齐方式。它可以有top、bottom和middle等值。

示例

在此示例中，我们使用text-align和vertical-align属性来水平垂直对齐文本内容。

<!DOCTYPE html>
<html>
<head>
    <style>
        table, td, th {
            border: 2px solid black;
        }
        table {
            border-collapse: collapse;
        }
        td {
            width: 100px;
            height: 70px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
            <th>标题 4</th>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td style="text-align: center;">居中数据</td>
            <td> 数据 3</td>
            <td> 数据 4</td>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td style="vertical-align: bottom">底部对齐数据</td>
            <td> 数据 4</td>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td style="vertical-align: top">顶部对齐数据</td>
            <td> 数据 3</td>
            <td> 数据 4</td>
        </tr>
    </table>

    </body>
</html>

注意：<th>和<td>的默认水平对齐方式分别是center和left。<th>和<td>的默认垂直对齐方式都是middle。

CSS表格背景颜色

要设置单元格、行或整个表格的背景颜色，使用CSS的background-color属性。

语法

设置单元格、行和表格背景颜色的语法如下：

/* 设置表格的背景颜色 */
table {
    background-color: #f2f2f2;
}

/* 设置单元格或行的背景颜色 */
td {
    background-color: #f2f2f2;
}

/* 设置行的背景颜色 */
tr {
     background-color: #ffffff;
}

示例

在此示例中，我们使用元素选择器设置表格的背景颜色。为了设置行和单元格的背景颜色，我们使用了内联CSS。

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border: 2px solid black;
            background-color: rgb(237, 181, 237);
            width: 100%;
            border-collapse: collapse;
        }
        td {
            height: 50px;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
   <h2>背景颜色属性</h2>
   <table>
        <tr>
            <th>标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
            <th>标题 4</th>
        </tr>
        
        <tr>
            <td> 数据 1</td>
            <td style="background-color: #f0f0ff;"> 数据 2</td>
            <td>数据 3</td>
            <td> 数据 4</td>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
            <td> 数据 4</td>
        </tr>

        <tr style="background-color: #04af2f;">
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
            <td> 数据 4</td>
        </tr>
   </table>
</body>
</html>

CSS表格文本字体样式

要设置表格的文本内容样式，我们可以在表格元素上使用CSS字体属性，如font-size、font-family、font-weight等。

示例

在此示例中，我们设置了th和td标签的font-size和font-family。

<!DOCTYPE html>
<html>
<head>
    <style>
        table.one {
            border-collapse: collapse;
            width: 400px;
        }
        th {
            font-size: large;
            font-family: 'Lucida Sans', sans-serif;
        }
        td {
            font-size: small;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
    </style>
</head>

<body>
    <h2>字体样式</h2>
    <div>
        <table class = "one" border = "1">
            <th>标题</th>
            <tr>
                <td> 单元格值</td>
            </tr>
            <tr>
                <td> 单元格值</td>
            </tr>
        </table>
    </div>
</body>
</html>

CSS表格分隔线

表格中的分隔线用于分隔表格内容，使其更易读。要设置垂直分隔线，使用border-right属性，而使用border-bottom属性设置水平分隔线。

示例

在此示例中，我们使用border-right属性设置垂直分隔线，使用border-bottom属性设置水平分隔线。

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border: 2px solid black;
            background-color: rgb(200, 240, 210);
            border-collapse: collapse;
            width: 100%;
        }

        th {
            border-bottom: 2px solid black;
            padding: 5px;
        }

        td {
            border-bottom: 1px solid grey;
            padding: 5px;
            text-align: center;
        }

        .vDiv {
            border-right: 2px solid black;
        }
    </style>
</head>

<body>
    <h2>水平分隔线</h2>
    <table>
        <tr>
            <th class="vDiv">标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
        </tr>

        <tr>
            <td class="vDiv"> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
        </tr>

        <tr>
            <td class="vDiv"> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
        </tr>

        <tr>
            <td class="vDiv"> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
        </tr>
    </table>
</body>

</html>

CSS条纹表格

条纹表格是指具有交替行背景颜色的表格，使其更易于阅读和理解数据。要创建条纹表格，使用nth-child选择器为奇数行和偶数行应用不同的背景颜色。

示例

在此示例中，我们使用nth-child选择器设置单元格的绿色和浅绿色背景颜色，创建条纹表格。

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
            color: white;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(odd) {
            background-color: rgba(4, 175, 47, 1);
        }
        tr:nth-child(even) {
            background-color: rgba(4, 175, 47, 0.4);
        }
    </style>
</head>

<body>
   <h2>条纹表格</h2>
   <table>
        <tr>
            <th>标题 1</th>
            <th>标题 2</th>
            <th>标题 3</th>
            <th>标题 4</th>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
            <td> 数据 4</td>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
            <td> 数据 4</td>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
            <td> 数据 4</td>
        </tr>

        <tr>
            <td> 数据 1</td>
            <td> 数据 2</td>
            <td> 数据 3</td>
            <td> 数据 4</td>
        </tr>
   </table>
</body>

</html>

CSS响应式表格

响应式表格是指根据不同的屏幕尺寸和分辨率调整和适应其布局和格式的表格。您可以使用overflow-x属性在小屏幕尺寸下为表格添加水平滚动条，当整个屏幕无法显示时。

示例

在此示例中，我们使用overflow-x属性添加水平滚动以适应较小的屏幕。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, 
          initial-scale=1.0">
    <style>
        .responsive-table {
            width: 100%;
            border-collapse: collapse;
            overflow-x: auto;
            display: block;
        }

        .responsive-table th, .responsive-table td {
            text-align: left;
            padding: 8px;
            border: 1px solid #ddd;
        }

        .responsive-table th {
            background-color: #f2f2f2;
        }

        .responsive-table tr:nth-child(odd) {
            background-color: #f9f9f9;
        }
    </style>
</head>

<body>
    <h2>响应式表格</h2>
    <table class="responsive-table">
        <thead>
            <tr>
                <th>标题 1</th>
                <th>标题 2</th>
                <th>标题 3</th>
                <th>标题 4</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>数据 1</td>
                <td>数据 2</td>
                <td>数据 3</td>
                <td>数据 4</td>
            </tr>

            <tr>
                <td>数据 5</td>
                <td>数据 6</td>
                <td>数据 7</td>
                <td>数据 8</td>
            </tr>

            <tr>
                <td>数据 9</td>
                <td>数据 10</td>
                <td>数据 11</td>
                <td>数据 12</td>
            </tr>
        </tbody>
    </table>
</body>

</html>
版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。

上一篇： CSS - 链接 下一篇： CSS - 边框
相关文章
admin

admin

作者文章
浏览更多
热门
最新文章
标签列表
    闽ICP备2022017130号-1
    Powered By Z-BlogPHP Theme By 编程老白