CSS 表格样式学习笔记

时间：2025-04-14 14:10:34

CSS 提供了强大的工具来美化和定制 HTML 表格的外观。通过合理使用 CSS 属性，可以使表格更加美观、易读且功能强大。以下是对 CSS 表格样式的详细学习笔记。

一、表格边框

1. 单独边框

默认情况下，表格的 <table>、<th> 和 <td> 元素都有独立的边框。可以通过 border 属性为这些元素设置边框样式。

示例：

css

复制

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

这将为表格的每个单元格和表头设置黑色边框。

2. 折叠边框

为了使表格的边框看起来更整洁，可以使用 border-collapse 属性将边框折叠成一个单一的边框。

示例：

css

复制

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

这样，表格的边框将合并为一个单一的边框，而不是显示双线。

二、表格宽度和高度

1. 设置表格宽度

可以使用 width 属性为表格设置宽度。宽度可以是固定值（如像素、百分比等）。

示例：

css

复制

table {
    width: 100%; /* 表格宽度占满整个父容器 */
}

2. 设置表头高度

可以使用 height 属性为 <th> 元素设置高度。

示例：

css

复制

th {
    height: 50px; /* 表头高度为 50 像素 */
}

三、表格文字对齐

1. 水平对齐

使用 text-align 属性可以设置表格单元格中的文本水平对齐方式（左对齐、居中对齐、右对齐）。

示例：

css

复制

td {
    text-align: center; /* 单元格文本居中对齐 */
}

2. 垂直对齐

使用 vertical-align 属性可以设置表格单元格中的文本垂直对齐方式（顶部对齐、居中对齐、底部对齐）。

示例：

css

复制

td {
    height: 50px;
    vertical-align: bottom; /* 单元格文本底部对齐 */
}

四、表格填充

使用 padding 属性可以控制表格单元格内容与边框之间的间距。这有助于改善表格的可读性。

示例：

css

复制

td, th {
    padding: 10px; /* 单元格内容与边框之间的间距为 10 像素 */
}

五、表格颜色

1. 边框颜色

可以使用 border-color 属性为表格边框设置颜色。

示例：

css

复制

table, td, th {
    border: 1px solid green; /* 边框颜色为绿色 */
}

2. 表头背景颜色

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

示例：

css

复制

th {
    background-color: green; /* 表头背景颜色为绿色 */
    color: white; /* 表头文字颜色为白色 */
}

六、更多实例

1. 个性表格

可以结合多种 CSS 属性创建个性化的表格。例如，为表格添加背景颜色、边框样式、文本对齐方式等。

示例：

css

复制

table {
    width: 100%;
    border-collapse: collapse;
    background-color: #f2f2f2; /* 表格背景颜色 */
}

th {
    background-color: green;
    color: white;
    padding: 10px;
    text-align: center;
}

td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd; /* 单元格底部边框 */
}

2. 定位表格标题

可以使用 caption 元素为表格添加标题，并通过 CSS 设置其位置。

示例：

HTML

预览

复制

<table>
    <caption>公司信息</caption>
    <tr>
        <th>公司</th>
        <th>联系人</th>
        <th>国家</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <!-- 其他行 -->
</table>

css

复制

caption {
    caption-side: top; /* 标题位于表格顶部 */
    font-weight: bold;
    padding: 10px;
}

相关文章