表格：数据网格

Excel 的远房亲戚，Web 数据的展示神器。

1. 表格三剑客

HTML 表格不是一个标签能搞定的，它需要三个好基友配合。这就像是搭积木：

表格结构图

<th>

<td>

🧱

<table> 地基： 定义整个表格区域。
<tr> 楼层 (Row)： 表格的一行。
<td> 房间 (Data)： 实际住数据的地方。
<th> 招牌 (Header)： 标题单元格，自带加粗光环。

2. 实战演练

我们来做一个简单的“极客战力排行榜”。

<table border="1">
  <tr>
    <th>英雄</th>
    <th>战力</th>
  </tr>
  <tr>
    <td>蝙蝠侠</td>
    <td>999</td>
  </tr>
  <tr>
    <td>蜘蛛侠</td>
    <td>888</td>
  </tr>
</table>
            

英雄	战力
蝙蝠侠	999
蜘蛛侠	888

(注：钞能力也是一种战力)

3. 合并单元格的噩梦

如果你想让一个格子跨越两行或两列，就需要用到 rowspan (跨行) 和 colspan (跨列)。

🛌

胖虎发言：
"<td colspan='2'> 就是我看电影买了两张票，一个人占两个座！"

4. 历史遗留问题

⛔

千万别用来布局！

在遥远的 2000 年代（上古时期），人们喜欢用 Table 来进行网页布局，把整个网页切成无数个小格子。

现在绝对不要这样做！ 表格是用来放数据的，布局请交给 CSS (Flexbox/Grid)。如果你现在还在用 Table 布局，就像是用算盘打《黑神话：悟空》。

🔙 上一关下一关：排行榜 📝