HTML 表格进阶 — 边框/合并/样式

table 的 border、colspan、rowspan、斑马纹、响应式处理 · 难度：入门 · +15XP

HTML 表格进阶

表格边框

<table border="1">  <!-- HTML 属性方式（不推荐）-->
<table style="border:1px solid black;border-collapse:collapse;">  <!-- CSS 方式（推荐）-->

合并单元格：colspan 与 rowspan

<td colspan="2">跨两列</td>   <!-- 水平合并 -->
<td rowspan="3">跨三行</td>   <!-- 垂直合并 -->

表格结构标签

<table>
  <thead><tr><th>表头</th></tr></thead>
  <tbody><tr><td>数据</td></tr></tbody>
  <tfoot><tr><td>表尾</td></tr></tfoot>
</table>

用 thead/tbody/tfoot 语义化表格，CSS 可以分别控制样式。

CSS 美化表格

/* 斑马纹 */
tr:nth-child(even) { background: #f2f2f2; }
/* 悬停高亮 */
tr:hover { background: #e0e0e0; }
/* 响应式 */
@media (max-width:600px) { table { font-size: 14px; } }