HTML和CSS协同制作表格时，HTML负责构建结构：用定义表格容器，创建行，定义表头单元格，创建普通数据单元格，可通过rowspan/colspan实现单元格合并，CSS则负责样式美化：通过border属性设置边框样式（如solid、dashed）和颜色，text-align调整文本对齐（left/center/right），padding控制单元格内边距，background-color设置背景色，border-collapse合并边框消除间隙，还可结合width/height调整表格尺寸，使用:hover伪类实现鼠标悬停效果，或通过媒体查询适配响应式布局，确保表格在不同设备上显示清晰美观。
HTML+CSS打造精美表格：从基础结构到高级美化技巧
在网页开发中,表格是展示结构化数据的重要工具，无论是成绩单、财务报表、产品列表还是价格对比表，都离不开表格的身影，虽然如今CSS Flexbox和Grid布局已成为主流布局方案，但在数据展示场景下，表格凭借其清晰的行列结构和语义化优势，依然是不可替代的存在，本文将从HTML基础结构讲起，结合CSS美化技巧，带你掌握从"简单表格"到"精美数据展示"的完整过程。
HTML表格基础结构：搭建表格的"骨架"
创建表格的第一步是使用HTML标签构建其基础结构,HTML提供了丰富的语义化表格标签，确保内容清晰且易于浏览器解析，以下是核心标签及其作用：
核心标签解析
<table>：表格容器，所有表格内容必须包裹在此标签内。<tr>（Table Row）：表格行，每行由一个或多个单元格组成。<th>（Table Header）：表头单元格，通常用于列标题，默认文本加粗且居中，具有语义化重要性。<td>（Table Data）：数据单元格，表格的主体内容。<thead>（Table Head）：表头部分，包含<tr>和<th>，用于区分表头和表体。<tbody>（Table Body）：表体部分，包含数据行<tr>和<td>，是表格的核心内容区。<tfoot>（Table Foot）：表尾部分，可选，用于汇总或备注信息（如总计、平均值）。<caption>，提供表格的简要说明，提升可访问性。
基础示例：一个简单的学生成绩表
<table>
<caption>2023年春季学期学生成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>85</td>
<td>92</td>
<td>88</td>
</tr>
<tr>
<td>李四</td>
<td>78</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>王五</td>
<td>92</td>
<td>88</td>
<td>95</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>85</td>
<td>88.33</td>
<td>91</td>
</tr>
</tfoot>
</table>
说明：
<thead>、<tbody>、<tfoot>虽然不是必须的，但语义化标签能显著提升代码可读性，且方便CSS针对性美化（如固定表头）。<th>默认具有"表头"语义，屏幕阅读器会优先识别，有助于提升可访问性。<caption>标签为表格提供标题，不仅提升可访问性，也有利于SEO优化。
CSS基础美化：让表格"告别简陋"
默认情况下,HTML表格样式非常朴素（仅有默认边框和间距），我们需要通过CSS调整样式，让表格更美观、易读，以下是基础美化技巧：
去除默认边框与设置边框样式
表格默认边框较细且可能重叠,可通过border-collapse和border属性统一边框样式：
table {
width: 100%; /* 表格宽度占满容器 */
border-collapse: collapse; /* 合并边框，避免重叠 */
border: 1px solid #ddd; /* 设置表格整体边框 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* 使用系统字体栈 */
font-size: 14px; /* 设置基础字体大小 */
}
th, td {
border: 1px solid #ddd; / 单元格边框 /
padding: 12px 8px; / 上下12px，左右8px的内边距 /
text-align: center; / 文本居中（th默认居中，td可自定义） /
transition: background-color 0.2s ease; / 添加过渡效果 /
}
关键属性：
border-collapse: collapse：解决默认边框重叠问题，让边框更清晰。padding：设置单元格内边距，避免内容与边框距离过近，可以分别设置上下和左右的值以获得更好的视觉效果。transition：为交互效果添加平滑过渡，提升用户体验。
区分表头与数据行样式
通过CSS为表头和数据行设置不同背景色、字体颜色，提升视觉层次：
thead th {
background-color: #4a90e2; /* 表头背景色 */
color: white; /* 表头文字颜色 */
font-weight: 600; /* 加粗表头文字 */
text-transform: uppercase; /* 大写字母 */
letter-spacing: 0.5px; /* 字间距 */
position: sticky; /* 固定表头 */
top: 0; /* 距离顶部0 */
z-index: 10; /* 确保表头在滚动时始终在最上层 */
}
tbody tr:nth-child(even) {
background-color: #f8f9fa;
