HTML表格默认样式丑陋，必须用CSS设置border-collapse:collapse、font-family、line-height、padding、text-align和vertical-align等5项基础样式才能保证可读性。
HTML 表格本身不负责“精美”，真正起作用的是 CSS 样式；纯 <table> 标签默认丑得理直气壮，直接套用会得到一张带粗边框、文字挤在一起、毫无呼吸感的请假条。
为什么不能只写 <table> 就完事
浏览器对 <table> 的默认渲染：单元格有 border-collapse: separate、padding 为 0、字体小、行高紧、颜色灰暗。你看到的“难看”，不是你写错了，是它本来就这样。
- 不加
border-collapse: collapse→ 表格内外全是双线缝 - 不设
padding→ 文字贴着边框，像被墙挤扁了 - 不用
font-family和line-height→ 中文显示发虚、行距窒息 - 忽略
text-align和vertical-align→ “申请人”和名字左右不对齐、上下飘着
关键样式必须加这 5 条
下面这段 CSS 不是“可选美化”，而是让表格能正常阅读的底线配置。复制粘贴到 <style> 里就能立刻变样：
table {
width: 100%;
border-collapse: collapse;
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
}
td, th {
padding: 12px 16px;
border: 1px solid #ddd;
text-align: left;
vertical-align: top;
}
-
border-collapse: collapse是开关级设置，不加它，所有边框优化都白搭 -
line-height: 1.6比默认值（约 1.1）宽松得多，中文段落才不会糊成一片 -
vertical-align: top防止多行内容（比如请假事由）和单行项（如日期）错位对齐 -
padding值别用10px或8px—— 太小没呼吸感；12px–16px是视觉舒适区间
结构上别用 <tr><td> 堆到底
一张可读的请假条，需要视觉分区：抬头、主体信息、签名栏。硬塞进一个大表格里，后期改样式、调间距、加横线都会卡住。
立即学习“前端免费学习笔记（深入）”；
- 把标题（如“员工请假条”）单独放一个
<h2>，不要塞进<td> - 用多个小表：一个表放申请人/部门/日期，另一个表放事由/时间/备注，签名单独一行
- 避免跨列（
colspan）滥用 —— 一旦要加边框或背景色，colspan单元格容易漏边或错位 - 签名栏建议用
<div class="sign-line"></div>+ CSS 画底线，比在<td>里敲一串______更可控
打印时边框消失？加这条媒体查询
很多单位要求打印纸质版，但 Chrome/Firefox 默认不打印背景色和部分边框 —— 你屏幕上看得好好的，打出来只剩文字。
- 必须显式声明：
@media print { table, td, th { border: 1px solid #000 !important; } } - 别依赖
background-color做强调色，打印时大概率变灰或消失 - 字号别小于
12px，否则打印后肉眼难辨；14px是安全下限 - 测试打印前，先用浏览器“打印预览”（Ctrl+P）看真实效果，别信页面渲染
真正麻烦的从来不是怎么画格子，而是让“申请人”三个字和它右边的名字保持垂直居中、让“自 X 月 X 日至 X 月 X 日”这一行不换行撕裂、让手写签名位置留够 3 行空白——这些细节没有通用解法，得一行行调 padding、试 min-width、删空格、测打印。做一遍就知道，所谓“精美”，其实是把每处留白和对齐都亲手按住。
