CSS - 表格样式

上一页
下一页

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

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

目录


 

CSS 表格边框样式

在 CSS 中，有几个边框属性可以应用于表格

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

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-collapse: separate;
            border-radius: 10px;
            border-style: inset;
            border-color: blue;
            width: 100%;
        }
        td {
            border: 2px dashed;
            height: 50px;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>
    </table>
</body>

</html>

CSS 表格边框折叠

属性 border-collapse 确保表格单元格之间的边框折叠成单个边框，从而创建更简洁的外观。属性 border-collapse 可以具有值 collapse 或 separate（默认值）。

以下示例显示了 collapse 和 separate 值的区别。

示例

<!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>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>

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

    <tr>
        <td> Data 1</td>
        <td> Data 2</td>
        <td> Data 3</td>
    </tr>

    <tr>
        <td> Data 1</td>
        <td> Data 2</td>
        <td> Data 3</td>
    </tr>
</table>
</body>
</html>

CSS 表格边框间距

border-spacing 属性指定分隔表格中相邻单元格边框的距离。此属性可以指定为一个或两个值。

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

示例

<!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>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>
</body>

</html>

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

CSS 表格标题位置

CSS 中的 caption-side 属性用于控制表格标题相对于表格的位置。它可以具有 top、bottom、block-start 等值。让我们看一个例子

示例

<!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 ABOVE the table
        </caption>
        
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>
    <br />

    <table class="bottom">
        <caption>
            Caption BELOW the table
        </caption>

        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>
</body>
</html>

CSS 表格空单元格

CSS 中的 empty-cells 属性用于控制表格中没有内容或被认为是“空”的单元格的呈现方式。它仅适用于表格和表格单元格。

  • empty-cells: show：它表示应显示空单元格，并带有边框和间距，就好像它们包含内容一样。它是默认值。
  • empty-cells: 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> Empty Cells: Show </h2>    
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> </td>
        </tr>
    </table>

    <h2> Empty Cells: Hide </h2>    
    <table style="empty-cells: hide;">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td> Data 1</td>
        <td> Data 2</td>
        <td> </td>
    </tr>
</table>
</body>
</html>

CSS 表格布局

table-layout 属性用于控制浏览器如何呈现表格。此属性可以具有以下值之一

  • table-layout: auto：在这种情况下，浏览器将根据单元格的内容计算列和单元格的宽度。
  • table-layout: 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>Table with fixed layout</h2>
    <table style="table-layout: fixed; ">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
            <td>Row 1, Column 3</td>
        </tr>

        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
            <td>Row 2, Column 3</td>
        </tr>
    </table>

    <h2>Table with auto layout</h2>
    <table style="table-layout: auto; ">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <tr>
            <td>This is some longer content in Column 1</td>
            <td>Short content</td>
            <td>Even longer content that might wrap in Column 3</td>
        </tr>

        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
            <td>Row 2, Column 3</td>
        </tr>
    </table>
</body>
</html>

注意：使用 table-layout: fixed 在您希望创建具有始终一致的列宽的表格时非常有用，尤其是在处理大量数据或希望保持特定设计时。

CSS 表格内容对齐

text-align 和 vertical-align 属性可用于对齐表格单元格的内容。

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

示例

<!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>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td style="text-align: center;">Data Center</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td style="vertical-align: bottom">Data Bottom</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td style="vertical-align: top">Data Top</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>
    </table>

    </body>
</html>

注意：默认情况下，<th> 元素的内容是居中对齐的，<td 元素的内容是左对齐的。默认情况下，<th> 和 <td 元素内容的垂直对齐方式为中间。

CSS 表格背景颜色

可以使用 background-color 属性设置表格的背景颜色。

/* To set the background color of table */
table {
    background-color: #f2f2f2;
}
/* To set the background color of a cell or a row */
td {
    background-color: #f2f2f2;
}
tr {
     background-color: #ffffff;
}

要设置整个表格的背景颜色，请使用 table 选择器。要设置单个单元格或行的背景颜色，请分别使用 td 或 tr 选择器。

示例

<!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>Background color property</h2>
   <table>
        <tr>
            <th>Header 1</th>
            <th style="background-color: #f0f0f0">Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>
        
        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td style="background-color: #04af2f;">Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>
   </table>
</body>
</html>

CSS 表格文本字体样式

可以使用与字体相关的属性（例如，font-size、font-family、font-weight 等）在 <th> 和 <td 元素上设置表格内容的字体样式。

示例

<!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>font styles</h2>
    <div>
        <table class = "one" border = "1">
            <th>Heading</th>
            <tr>
                <td> Cell value</td>
            </tr>
            <tr>
                <td> Cell value</td>
            </tr>
        </table>
    </div>
</body>
</html>

CSS 表格分隔线

表格中的分隔线用于分隔表格内容并使其更易于阅读。您可以使用 border 属性向表格及其单元格添加水平和垂直分隔线。

示例

<!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;
        }
    </style>
</head>

<body>
    <h2>Horizontal Divider</h2>
    <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
        </tr>
    </table>
</body>
</html>

CSS 条纹表格

条纹表格是指具有交替行背景颜色的表格，这使得更容易阅读和理解数据。您可以使用 CSS 创建条纹表格，方法是使用 nth-child 选择器为奇数行和偶数行应用不同的背景颜色。

示例

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

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

        tr:nth-child(odd) {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
   <h2>Striped table</h2>
   <table>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>

        <tr>
            <td> Data 1</td>
            <td> Data 2</td>
            <td> Data 3</td>
            <td> Data 4</td>
        </tr>
   </table>
</body>

</html>

CSS 响应式表格

响应式表格是指根据不同的屏幕尺寸和分辨率调整和适应其布局和格式的表格。它确保表格在各种屏幕尺寸上易于阅读和访问。当屏幕较小且无法看到所有内容时，您可以使用属性 overflow: auto 向表格添加水平滚动条。

示例

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

<head>
    <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>Responsive Table</h2>
    <table class="responsive-table">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>

            <tr>
                <td>Data 5</td>
                <td>Data 6</td>
                <td>Data 7</td>
                <td>Data 8</td>
            </tr>

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

</html>
打印页面
上一页
下一页
广告