text-align: left 必须作用于 td 或 th 才生效，table 上设置仅靠继承；留空隙需用 padding（如 padding-left），而非 text-align；align 属性已废弃，应改用 CSS；vertical-align 不影响左右空隙，但配合 padding 可稳定垂直对齐效果。
text-align: left 要加在 td 或 th 上才生效
直接给 <table> 设置 text-align: left 看似合理，但实际是“继承”生效——<table> 自身不渲染文本，真正起作用的是它内部的 td 和 th。如果没显式写，浏览器会按默认行为（td 默认左对齐，th 默认居中）处理，但一旦父级或全局样式干扰（比如重置了 td { text-align: center }），就可能失效。
正确做法是明确作用于单元格：
td, th {
text-align: left;
}
或者只针对数据行：td { text-align: left; }，让表头保持居中更合理。
留空隙不是靠 text-align，而是用 padding
text-align 只管文字在单元格内的水平位置，和“空隙”无关。所谓“留出空隙”，本质是控制文字离单元格边框的距离，必须用 padding。
立即学习“前端免费学习笔记（深入）”；
-
padding-left控制左边空隙（最常用） -
padding-right控制右边空隙（配合右对齐时有用） -
padding一次性设四边，比如padding: 4px 12px;表示上下 4px、左右 12px
示例：
td {
text-align: left;
padding-left: 16px;
}
这样文字就靠左，但离左边框有 16px 空隙，视觉上更清爽。
避免用 align="left" 属性，它已废弃且不可靠
HTML5 中 align 属性（如 <td align="left">）已被移除。现代浏览器（Chrome/Firefox/Safari 最新版）不再保证兼容，W3C 验证器报错，而且语义混乱——<table align="left"> 是浮动表格，<td align="left"> 才是内容对齐，容易写错。
实操建议：
- 彻底删除所有
align属性，用 CSS 替代 - 如果旧项目要快速迁移，可用正则批量替换：
align="left"→style="text-align: left;"，但最终应抽离为类名 - 别信“加了就能用”的临时写法，尤其在响应式或组件化场景下，内联样式维护成本极高
注意 vertical-align 不影响左右空隙，但会影响垂直对齐观感
有人误以为调 vertical-align: top 能“拉开”文字和上边距，其实它只控制内容在单元格高度内的垂直位置，和左右空隙无关。但若单元格高度被撑开（比如含多行文本或图片），vertical-align: top 能让文字紧贴顶部，配合 padding-top 才能真正控制上边空隙。
常见组合：
td {
text-align: left;
padding-left: 12px;
padding-top: 8px;
vertical-align: top;
}
这里 vertical-align: top 不是“留空隙”的主因，但它让 padding-top 的效果更稳定——否则默认 middle 可能在不同行高下表现不一致。
真正容易被忽略的是：当单元格里嵌套了 div 或用了 display: flex，text-align 就完全失效了，此时得靠子元素自身的对齐控制。
