CSS Table(表格)

表格是展示二维数据最直观的方式。HTML 提供 table、tr、th、td 等标签搭建结构，但默认外观简陋：无边框、单元格贴在一起。CSS 通过边框、间距、颜色、对齐等属性，可以把表格修饰得清晰专业，数据一目了然。

默认外观与加边框

浏览器默认不给表格画边框，需要手动为 table、th、td 添加：

table, th, td {
    border: 1px solid #ccc;
}

<table><tr><th>姓名</th><th>成绩</th></tr><tr><td>小明</td><td>90</td></tr></table>

效果说明：th 是表头单元格（默认加粗居中），td 是普通单元格；上面的代码给整个表格画上细边框。

合并边框 border-collapse

默认每个单元格各自画边框，相邻处形成"双线"；collapse 可合并为单线：

table {
    border-collapse: collapse;  /* 合并相邻边框 */
}

效果说明：collapse 让相邻边框合成一条，表格干净紧凑；separate 是默认值，保留双线效果。

单元格内边距与对齐

给 th/td 加 padding 留出空间，用 text-align 控制内容对齐：

th, td {
    padding: 8px 12px;
    text-align: left;      /* 数据左对齐 */
}
th { text-align: center; } /* 表头居中 */

效果说明：padding 让文字不再紧贴边框；表头与数据分别对齐，整体更整齐耐看。

宽度与布局

width 控制表格整体宽度，table-layout 决定列宽如何计算：

table {
    width: 100%;           /* 表格占满容器 */
    table-layout: fixed;   /* 固定布局：列宽按第一行均分 */
}

效果说明：fixed 让各列宽度依据首行均分，长文本会换行而不撑破表格，适合列数固定的数据表。

隔行变色与悬停高亮

利用 :nth-child 伪类做斑马纹，用 :hover 提升可读性：

tr:nth-child(even) { background-color: #f2f2f2; } /* 偶数行浅灰 */
tr:hover { background-color: #d9edf7; }            /* 悬停变蓝 */

<table><tr><th>商品</th><th>价格</th></tr><tr><td>苹果</td><td>5</td></tr><tr><td>香蕉</td><td>3</td></tr></table>

效果说明：奇偶行颜色交替、鼠标划过行高亮，长表格更容易逐行阅读。

综合示例

把以上技巧合在一起，一个美观的"成绩表"就完成了：

table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
th { background-color: #4caf50; color: white; }
tr:nth-child(even) { background-color: #f9f9f9; }

效果说明：绿色表头配白字、单线边框加斑马纹，结构清晰、配色统一，可直接用于真实页面。

小结

表格样式要点有四：给 table/th/td 统一加边框、用 border-collapse: collapse 合并双线、设置单元格 padding 与对齐、用 nth-child 做隔行变色。掌握这些，数据表格既规整又美观。