表格基本样式 CSS

在网页开发中，表格是非常常见的元素。为了美观和统一风格，我们需要对表格进行样式的设置。在 CSS 中，有许多属性可以设置表格样式。

表格基本结构

在 HTML 中，表格是由 <table> 标签来定义的。其基本结构包含三个标签：<table>、<tr> 和 <td>。

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

上述代码定义了一个 2 行 2 列的表格。

表格边框样式

CSS 中，我们可以设置表格边框样式。常见的样式有：实线、虚线、双线等。通过 border 属性，我们可以设置表格的边框样式。例如：

table {
    border: 2px solid #000;
}

上述代码设置了表格的边框宽度为 2px，边框样式为实线，边框颜色为黑色。边框样式还可以设置成其他样式，例如：

table {
    border: 2px dashed #000;
}

上述代码设置了表格的边框样式为虚线。

表格间距和边框间距

表格和表格之间以及表格边框和表格之间都可以设置间距。其中，表格与表格之间的间距通过 border-spacing 属性设置，而表格边框和表格之间的间距通过 border-collapse 属性设置。

table {
    border-spacing: 10px; /*表格与表格之间的间距*/
    border-collapse: collapse; /*表格边框和表格之间的间距*/
}

上述代码设置了表格与表格之间的间距为 10px，且表格边框和表格之间没有间距。

表头样式

表头是表格中比较特殊的一行，通常用于表头信息的展示。我们可以通过 th 标签来定义表头。对于表头，我们可以进行单独的样式设置。例如：

th {
    background-color: #e7e7e7;
    font-weight: bold;
    text-align: center;
}

上述代码设置了表头的背景颜色为灰色，字体加粗，居中对齐。

单元格样式

单元格是表格中的基本元素。我们可以对单元格进行设置，例如设置单元格的左右边框、背景颜色等等。例如：

td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

上述代码设置了单元格的边框为 1px 实线，边框颜色为灰色，内边距为 8px，文本居中对齐。

总结

通过以上介绍，我们了解了表格的基本结构以及 CSS 中表格样式的设置方法，可以根据实际需求进行设置，实现美观的表格展示效果。