Bootstrap 表格

表格是展示结构化数据最常用的组件。Bootstrap 给 <table> 提供了基础样式与十几个修饰类：条纹、边框、悬停、深浅配色、紧凑字号等，加一个类名即可获得，无需手写复杂 CSS。

基础表格

给 <table> 加 .table 类即得到基础表格：单元格带分隔线、表头加粗。用 <thead> 包裹表头行，可以让表头在语义与样式上都更清晰：

<!-- 本示例基于 CDN 引入的 Bootstrap 5（引入代码见"环境安装"章节）；基础表格 -->
<table class="table">
  <thead>
    <tr><th>用户名</th><th>邮箱</th></tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>zhangsan@example.com</td></tr>
    <tr><td>李四</td><td>lisi@example.com</td></tr>
  </tbody>
</table>

显示效果：表头文字加粗、两行数据带横向分隔线，单元格间距适中，直接可读。

条纹与悬停

.table-striped 让奇数行带上浅灰底、更易扫读；.table-hover 让鼠标所在行高亮，适合数据量较大的表格提升定位速度：

<!-- 条纹 + 悬停 -->
<table class="table table-striped table-hover">
  <thead><tr><th>编号</th><th>状态</th></tr></thead>
  <tbody>
    <tr><td>001</td><td>已完成</td></tr>
    <tr><td>002</td><td>处理中</td></tr>
    <tr><td>003</td><td>已取消</td></tr>
  </tbody>
</table>

显示效果：奇数行灰底相间；把鼠标移到某一行时该行整行变色，便于跟随阅读。

边框与紧凑样式

.table-bordered 为所有单元格加上完整边框；.table-sm 把内边距减半得到紧凑表格，适合信息密集的页面；二者可叠加使用：

<!-- 全边框 + 紧凑 -->
<table class="table table-bordered table-sm">
  <tr><th>城市</th><th>气温</th></tr>
  <tr><td>北京</td><td>25℃</td></tr>
</table>

显示效果：每个单元格都被完整边框包围，行高明显变矮，信息密度更高。

上下文颜色表格

.table-primary、.table-success、.table-danger 等类可给整行或整格着色，用于按状态区分数据；表头也可用 .table-dark 变成深色：

<!-- 按状态着色 -->
<table class="table">
  <thead class="table-dark"><tr><th>订单</th><th>状态</th></tr></thead>
  <tbody>
    <tr class="table-success"><td>1001</td><td>已支付</td></tr>
    <tr class="table-danger"><td>1002</td><td>已退款</td></tr>
  </tbody>
</table>

显示效果：表头深灰，两行数据分别呈现浅绿与浅红底色，状态一眼可辨。

小结

记住「.table 是基础，striped/hover/bordered/sm 是修饰，table-颜色 表状态」的组合思路，绝大多数数据表格都能用几个类名拼出来。