HTML 表格

数据用表格展示最清晰，比如成绩单、价格表、日程表。HTML 通过 <table> 标签创建表格，配合行、单元格、表头等子标签，就能搭出结构规范的数据表格，是网页排版和数据显示的常用工具。

表格的基本结构

一个表格由 行（<tr>）和行内的 单元格（<td>）组成；第一行若用 <th> 写表头，文字会自动加粗并居中。这些标签必须层层嵌套：table 里放 tr，tr 里放 td/th。

<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>92</td>
    <td>88</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>85</td>
    <td>95</td>
  </tr>
</table>

在浏览器中显示为：一个 3 行 3 列的表格，首行为加粗的"姓名/语文/数学"表头，下方两行是成绩数据。

表格边框 border

<table> 上的 border 属性直接指定边框粗细（像素）；但它只是简单的单线框。想要更美观的双线边框或圆角，通常交给 CSS 的 border-collapse 等属性处理。

<table border="1">
  <tr><td>第一格</td><td>第二格</td></tr>
</table>

在浏览器中显示为：带细边框的两格单行表格。

合并单元格：colspan 与 rowspan

• colspan：让一个单元格横向跨占多列。
• rowspan：让一个单元格纵向跨占多行。 合并后该行/列的单元格数量要相应减少，否则表格会错位。

<table border="1">
  <tr>
    <td colspan="2">跨两列的大格子</td>
  </tr>
  <tr>
    <td rowspan="2">跨两行</td>
    <td>右上</td>
  </tr>
  <tr>
    <td>右下</td>
  </tr>
</table>

在浏览器中显示为：第一行一个大格子横跨两列，第二、三行的左列合并成一个竖长格子。

表格标题与分组

<caption> 为表格添加居中标题；<thead>、<tbody>、<tfoot> 可把表头、表体、表尾分组，便于浏览器单独滚动或打印时重复表头，也让代码结构更清晰。

<table border="1">
  <caption>三年级一班成绩表</caption>
  <thead>
    <tr><th>姓名</th><th>总分</th></tr>
  </thead>
  <tbody>
    <tr><td>小明</td><td>180</td></tr>
  </tbody>
</table>

在浏览器中显示为：表格上方居中显示标题"三年级一班成绩表"，下方是表头和一行数据。

易错点提示

• 忘记嵌套关系（如把 td 直接放 table 里）会导致表格显示错乱。
• 用了 colspan/rowspan 却不减少对应单元格数量，列会对不齐。
• 少用 border、cellpadding 这类属性做美化，页面样式应交给 CSS。

小结

表格 = table + tr + td（表头用 th），配合 colspan/rowspan 能合并单元格，caption 可加标题。把数据放进规范表格，阅读起来一目了然。