CSS表格中的内容如何居中？CSS表格中的文本样式介绍
在网页开发中，表格是展示结构化数据的常用组件，合理的样式设置能让表格更易读、更美观。很多开发者在使用CSS控制表格样式时，经常会遇到内容居中调整、文本样式设置的问题，本文会详细介绍相关实现方法。
一、CSS表格内容居中方法
表格内容的居中分为水平居中和垂直居中两种场景，不同场景的实现方式略有区别，我们可以针对单元格内容分别设置。
1. 水平居中
水平居中是最常用的对齐方式，我们可以通过text-align属性来实现，这个属性控制的是行内内容（包括文本、行内元素）的水平对齐方向。
/* 对所有表格单元格设置水平居中 */
table td, table th {
text-align: center;
}
/* 也可以单独对某一列设置居中，比如给第二列添加center-col类 */
.center-col {
text-align: center;
}如果需要同时让表格本身在页面中水平居中，可以给表格容器设置margin属性：
/* 让表格整体在父容器中水平居中 */
table {
margin: 0 auto;
}2. 垂直居中
垂直居中可以通过vertical-align属性实现，这个属性专门用于控制行内元素或表格单元格内容的垂直对齐方式，默认值是baseline（基线对齐），设置为middle即可实现垂直居中。
/* 对所有表格单元格设置垂直居中 */
table td, table th {
vertical-align: middle;
/* 同时设置行高可以优化单项内容的垂直居中效果，行高值建议和单元格高度一致 */
line-height: 40px;
}如果单元格内容高度不固定，也可以不设置固定行高，仅用vertical-align: middle就能实现内容的垂直居中。
3. 同时实现水平垂直居中
实际开发中我们通常会同时设置水平和垂直居中，让表格内容在单元格内完全居中，组合起来使用即可：
/* 表格单元格同时水平垂直居中 */
table td, table th {
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
padding: 12px 8px; /* 可选：添加内边距让内容更有呼吸感 */
}二、CSS表格文本样式介绍
除了对齐方式，表格的文本样式也是提升表格可读性的关键，常见的文本样式属性都可以直接应用到表格的单元格上。
1. 字体相关样式
我们可以通过font-family设置字体，font-size设置字号，font-weight设置字重，font-color（实际是color属性）设置文本颜色，这些属性和普通文本的设置方式完全一致。
/* 设置表格整体文本样式 */
table {
font-family: "Microsoft YaHei", sans-serif; /* 优先使用微软雅黑，没有则用系统无衬线字体 */
font-size: 14px; /* 基础字号 */
color: #333; /* 默认文本颜色 */
}
/* 表头文本加粗、颜色加深 */
table th {
font-weight: 600;
color: #1a1a1a;
}2. 文本装饰与间距
如果需要给文本添加下划线、删除线等装饰，可以用text-decoration属性；调整字符间距用letter-spacing，调整行间距用line-height，这些属性同样适用于表格文本。
/* 表头添加下划线装饰 */
table th {
text-decoration: underline;
letter-spacing: 1px; /* 字符间距1px */
}
/* 单元格内容行高设置，避免文本过密 */
table td {
line-height: 1.5; /* 行高为字号的1.5倍 */
}3. 文本溢出处理
当表格单元格内容过长时，可能会出现内容溢出单元格的问题，我们可以通过text-overflow属性配合white-space、overflow来处理，让过长文本显示为省略号。
/* 固定宽度的单元格文本溢出显示省略号 */
.ellipsis-cell {
width: 200px; /* 固定单元格宽度 */
white-space: nowrap; /* 禁止文本换行 */
overflow: hidden; /* 溢出内容隐藏 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
}使用时给需要限制长度的单元格添加ellipsis-cell类即可，鼠标悬停时可以通过title属性展示完整内容。
三、完整示例
下面是一个包含了内容居中和文本样式设置的完整表格示例，你可以直接复制运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS表格样式示例</title>
<style>
/* 表格基础样式 */
.demo-table {
width: 80%;
margin: 20px auto; /* 表格整体水平居中 */
border-collapse: collapse; /* 合并边框 */
font-family: "Microsoft YaHei", sans-serif;
font-size: 14px;
color: #333;
}
/* 单元格边框、内边距、对齐方式 */
.demo-table td, .demo-table th {
border: 1px solid #e0e0e0;
padding: 12px 8px;
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}
/* 表头样式 */
.demo-table th {
background-color: #f5f5f5;
font-weight: 600;
color: #1a1a1a;
letter-spacing: 1px;
}
/* 偶数行背景色，提升可读性 */
.demo-table tr:nth-child(even) {
background-color: #fafafa;
}
/* 过长文本省略样式 */
.ellipsis-col {
width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<table class="demo-table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>注册时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td class="ellipsis-col" title="test1@ipipp.com">test1@ipipp.com</td>
<td>2024-01-15</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td class="ellipsis-col" title="test2@ipipp.com">test2@ipipp.com</td>
<td>2024-02-20</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td class="ellipsis-col" title="test3@ipipp.com">test3@ipipp.com</td>
<td>2024-03-10</td>
</tr>
</tbody>
</table>
</body>
</html>这个示例中包含了表格内容水平垂直居中、表头文本样式、行交替背景色、长文本溢出省略等常用效果，你可以根据实际需求调整对应的CSS属性值。