CSS样式全解析：打造完美表格

"表格之CSS樣式" 在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素样式的重要工具。本篇将详细讲解如何使用CSS来美化和控制HTML表格（table）的呈现效果，特别是针对`tr`（行）、`td`（单元格）的样式设置。 首先，理解CSS样式的应用顺序至关重要。对于表格，样式会按照以下顺序进行应用：`td`（单元格） -> `tr`（行） -> `rowgroup`（如`tbody`） -> `col` -> `colgroup` -> `table`。这意味着更具体的元素选择器将优先于更通用的选择器。 1. **文字**：你可以通过`font`、`color`等属性来改变表格中的文字样式。例如，设置所有表格文字为红色、18像素的字体大小，可以写为： ```css table { color: red; font-size: 18px; } ``` 2. **对齐方式**：使用`text-align`和`vertical-align`属性可以调整文本的水平和垂直对齐。例如，使单元格内容居中显示： ```css td { text-align: center; vertical-align: middle; } ``` 3. **背景**：通过`background`属性可以设定单元格或整个表格的背景颜色或图片。例如，设置表格背景图片： ```css body { background-image: url(rule2.png); } table { background-color: #F0F0F0; } ``` 4. **边框**：边框样式可以通过`border`属性定义，但只能应用于`table`、`td`和`th`元素。例如，创建一个红色边框的表格： ```css table { border: 2px solid red; } ``` 5. **间距**： - `margin`：仅适用于`table`和`caption`元素，用于设置元素周围的空白区域。例如，为表格添加10像素的外边距： ```css table { margin: 10px; } ``` - `padding`：仅适用于`td`和`th`，设置元素内部的空白。例如，给单元格添加15像素的内边距： ```css td { padding: 15px; } ``` 6. **储存格距离**：`border-spacing`属性用于设置单元格之间的距离，仅适用于`table`元素。例如，设置单元格间20像素的水平和垂直间距： ```css table { border-spacing: 20px; } ``` 7. **宽度和高度**：`width`和`height`属性允许你设定表格、单元格的尺寸。例如，固定表格宽度和高度： ```css table { width: 500px; height: 300px; } td { width: 100px; height: 50px; } ``` 8. **储存格边框样式**：通过`border-collapse`属性控制单元格边框的合并方式。默认情况下，边框是分开的，但如果设置为`collapse`，则相邻单元格的边框会合并： ```css table { border-collapse: separate; /* 或 collapse */ } ``` 9. **边框冲突解决**：当相邻单元格的边框格式不同时，浏览器会根据`border-collapse`的设置来处理边框冲突。在`border-collapse: separate`时，每个单元格的边框都会独立显示；而在`border-collapse: collapse`时，浏览器会选取一个边框样式。 通过以上CSS属性，你可以精确地控制表格的样式，实现各种复杂的布局和视觉效果。在实际应用中，还可以结合类选择器、伪类选择器等进一步细化控制，以满足不同场景的需求。