CSS 表格样式学习笔记
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;
}