HTML 表格广泛用于组织和显示数据。然而，默认的表格风格通常不够吸引人，缺乏视觉层次感和响应能力。CSS 的强大功能可以解决这些问题，为表格添加样式，使其更具吸引力、可用性和交互性。
使用 CSS 美化表格
1. 设置表格样式
-
table { width: 100%; border-collapse: collapse; border: 1px solid #ccc; }
-
设置表格宽度、设置边框合并为 collapse 以移除双重边框，并应用边框颜色。
2. 样式化表格标题
-
th { background-color: #eee; padding: 5px; text-align: center; }
-
为标题行设置背景色、内边距和居中对齐。
3. 样式化表格数据
-
td { padding: 5px; border: 1px solid #ccc; text-align: left; }
-
为数据单元格设置内边距、边框和左对齐。
4. 交替行着色
-
tr:nth-child(even) { background-color: #f9f9f9; }
-
为偶数行着色，提供视觉差异化。
增强表格交互性
1. 悬停效果
-
tr:hover { background-color: #ffff99; }
-
在悬停时为行添加背景色，提供视觉反馈。
2. 可排序表格
- 使用 JavaScript 库，如 DataTables，实现可排序表格。
3. 可响应表格
- 使用媒体查询为不同屏幕尺寸调整表格布局。 @media (max-width: 768px) { table { width: 100%; } }
4. 可访问性增强
- 确保表格具有适当的标题和标记，以提高可访问性。
- th { scope="col"; }
- td { scope="row"; }
结论
通过整合 CSS，可以显著改善 HTML 表格的外观、交互性和可访问性。使用上述技术，开发人员可以创建美观、易于使用和可响应的表格，以满足各种应用程序的需要。
