在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素呈现样式的语言，而HTML中的`<table>`标签则是用来创建表格布局的重要元素。`<table>`标签允许我们构建复杂的表格结构，包括行（`<tr>`）、列（`<th>`或`<td>`）以及表头（`<thead>`）、表体（`<tbody>`）和表脚（`<tfoot>`）。在本教程中，我们将深入探讨如何使用CSS来美化和增强HTML表格的表现力。
让我们了解CSS如何与HTML表格配合。CSS可以应用于表格的各个部分，如表格本身、表格行、表格列、单元格等，以实现定制化的样式。例如，我们可以使用以下选择器来改变表格的边框：
```css
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px solid black;
}
```
`border-collapse: collapse;`属性使得表格相邻边框合并，形成更整洁的外观，而`border`属性则为表格、表头和数据单元格添加边框。
接着，我们可以用CSS来定义不同类型的单元格。`<th>`标签用于创建表头，通常设置为粗体和居中对齐：
```css
th {
font-weight: bold;
text-align: center;
}
```
`<td>`标签则代表数据单元格，它们可以有自己的样式：
```css
td {
padding: 8px;
}
```
在表格中，我们还可以通过类选择器或者ID选择器为特定的行或列设置样式。例如，高亮某一行：
```css
tr.highlight {
background-color: yellow;
}
```
如果要让表格响应式，可以使用媒体查询来调整在不同设备上的显示效果：
```css
@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { margin-bottom: 1rem; }
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding: 8px;
font-weight: bold;
text-align: left;
}
}
```
这样的样式会让表格在小屏幕上变为垂直堆叠的块，数据前的标签通过`data-label`属性显示。
此外，`<caption>`标签可以为表格添加标题，`<colgroup>`和`<col>`用于定义列的样式，`<tfoot>`则可以用来放置表格的总结行。CSS还能帮助我们实现诸如排序、过滤和滚动等高级功能。
CSS在美化和优化HTML表格方面发挥着至关重要的作用。通过灵活运用各种选择器和属性，我们可以创建出符合设计需求的美观且实用的表格。在实践中，不断尝试和学习新的技巧，将使你的CSS技能更加熟练，从而提升网页的用户体验。
table.rar （2个子文件） 
table 
Index.html 2KB
th_bg.gif 900B
