⬅️ 返回地图
第 11 话

表格:数据网格

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

1. 表格三剑客

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

表格结构图
<th>
<th>
<td>
<td>
<td>
<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 布局,就像是用算盘打《黑神话:悟空》。