表格内容左右居中对齐用 text-align: center，上下居中需同时设 vertical-align: middle；去除默认边框和间距需设置 border-collapse: collapse 和 border-spacing: 0。
表格内容左右居中对齐用什么属性
单元格内文字默认左对齐、顶部对齐，要让内容水平垂直都居中，得同时设 text-align: center 和 vertical-align: middle。只加 text-align 只能管左右，上下还是贴顶；只加 vertical-align 对块级元素无效，必须作用在 td 或 th 上。
常见错误是写成 align="center" 这种旧式 HTML 属性——现代写法应统一用 CSS，否则容易被浏览器忽略或与 CSS 冲突。
-
td, th { text-align: center; vertical-align: middle; }是最稳妥的全局设置 - 如果只要某列居中，给该列加 class，比如
<td class="col-center">，再写.col-center { text-align: center; } - 图片在单元格里也贴顶？记得给
img加vertical-align: middle，否则它按基线对齐，底下会留白
怎么去掉表格默认边框和间距
浏览器会给 table 默认加 border-collapse: separate 和 border-spacing: 2px，导致单元格间有白缝、边框双线。想实现紧贴、单线效果，必须显式重置：
table {
border-collapse: collapse;
border-spacing: 0;
}
这个组合不能只写一个——border-collapse: collapse 消除单元格间隙，但若没关 border-spacing，某些旧版 Safari 仍可能保留空隙。
立即学习“前端免费学习笔记（深入）”；
- 所有
td/th的padding也要手动设，否则默认有 1–2px 内边距，影响紧凑感 - 如果用了
border，记得给table、td、th都设，否则只有部分边有线 - 响应式页面中，小屏下建议加
table { width: 100%; }，避免横向溢出
个人页面常用表格结构怎么写才干净
个人页面里的表格（如技能列表、项目经历、联系方式）不需要复杂嵌套，重点是语义清晰、易维护。避免用表格做布局，但纯数据展示时，结构越简单越稳。
推荐写法：用 thead 包标题行，tbody 包内容，不写 tfoot（除非真有汇总行）；每列用 scope="col" 标明表头归属，提升可访问性。
- 不要省略
<tbody>—— 浏览器会自动补，但显式写出更可控，JS 操作时也不易出错 - 避免
colspan/rowspan嵌套过深，尤其在移动端，容易撑宽或错位 - 联系人表格里，图标用
<img>或 SVG 就行，别塞进background-image，否则打印或高对比度模式下可能消失
用 CSS Grid 或 Flex 替代表格是否更合适
如果只是“看起来像表格”的排版（比如三栏技能图标、两列信息并排），用 display: grid 或 flex 更灵活、语义更准，也更容易响应式断点控制。但前提是——内容不是真正二维关系的数据。
例如“姓名/电话/邮箱”这种带明确字段名+值的结构，仍建议用 table；而“前端技能：React、Vue、TypeScript”这种单维度罗列，用 ul + Flex 更轻量。
- Grid 实现等宽多列：用
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，比表格缩放更自然 - Flex 行内对齐：给容器设
display: flex; align-items: center;，比调vertical-align直观 - 但别为了“不用 table”硬改——屏幕阅读器对正确语义化表格的支持，远好于一堆 div 拼出来的“假表格”
white-space、word-break 和 max-width 联合控制，而不是只调 padding 或 font-size。 
