基本类型

名称 描述
表头 <thead> 一般表格的第一行作为表头,用于描述表中每一列数据名称。为区别于表格其他行,表头具备不同的样式,例如字体加粗等。在垂直显示一组数据的表格中,表头也可能是垂直的第一列,而不是行。
内容 <tbody> 一般内容会在单元格内靠左对齐,对于数字可能靠右对齐比较好。在一些表格中,内容可以按单元格选择或者按行选择,选中的部分会以不同的样式区分。为了使得行与行便于区分,通常也会使得行交替使用不同的背景色。图片或其他控件也可以应用单元格中。
表尾 <tfoot> 表位放置与表末尾提供与表相关补充数据或操作,不过并不常见。
提示 表头、内容、和表尾都是可选的。
<table class="table">
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tfoot>
</table>

隔行交替样式的表

.table-striped

# First Name Last Name Username
1 Sunshine Sunday catouse
4 Sunday Sunshine catouse
2 catouse azhi zenUI
3 God Lady Gaga catouse
<table class="table table-striped">
  ...
</table>

响应鼠标悬停

.table-hover

# First Name Last Name Username
1 Sunshine Sunday catouse
4 Sunday Sunshine catouse
2 catouse azhi zenUI
3 God Lady Gaga catouse
<table class="table table-hover">
  ...
</table>

带所有边框的表格

.table-bordered

# First Name Last Name Username
1 Sunshine Sunday catouse
4 Sunday Sunshine catouse
2 catouse azhi zenUI
3 God Lady Gaga catouse
<table class="table table-bordered">
  ...
</table>

更为紧凑的表格

.table-condensed

# First Name Last Name Username
1 catouse hello world
2 jay thks jajaja
3 JK row thks Pa
<table class="table table-condensed">
  ...
</table>

色彩主题

可以根据语义标记整行或者某一单元格

# 描述 Payment Taken Status
1 表示成功或积极的行为。 01/04/2012 Approved
2 表示一个危险或存有潜在危险的行为。 02/04/2012 Declined
3 表示警告,可能需要注意。 03/04/2012 Pending
4 标记为激活行。 04/04/2012 Call in to confirm
<table class="table">
  <tbody>
    <tr class="success">
      ...
    </tr>
    <tr class="danger">
      ...
    </tr>
    <tr class="warning">
      ...
    </tr>
    <tr class="active">
      ...
    </tr>
  </tbody>
</table>