表格标签

标签 描述
<table> 包含格式化成表格的数据
<thead> 包含表头行(<tr>),标示列
<tbody> 包含表的内容行(<tr>)
<tr> 表格的列,包含一个个单元格 (<td> 或者<th>)形成一行数据
<td> 表格的单元格
<th> 用于表头,标识列。必须用于<thead>
<标题> 描述和总结表,对于屏幕阅读设备(screen readers) 特别有用
<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
</table>

表格类型

名称 样式 描述
默认表格 没有任何其他样式,仅是行和列
基本表格 .table 行间只有水平的线
有边框的表格 .table-bordered 添加圆角和外边框
奇偶相间的表格 .table-striped 行间添加奇偶背景色 (1, 3, 5, etc)
压缩的表格 .table-condensed tdth元素的纵向间距(padding)减半从 8px 到 4px

表格示例

1. 默认的表格样式

表格默认的样式仅有一些边框来保证表格的可读性和结构性,DPL中code>.table样式是必须的。

<table class="table">
  …
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

2.奇偶相间的表格

为了实现更好的视觉效果可以在表行上添加奇偶线—仅仅添加 .table-striped样式.

警告: 奇偶相间的背景使用:nth-child CSS 选择器 ,在IE7-IE8不支持此特性。

<table class="table table-striped">
  …
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

3. 有边框的表格

给整个表格添加边框,同时添加圆角美化表格的内容。

<table class="table table-bordered">
  …
</table>
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

4. 压缩的表格

使你的表格更紧凑可以使用 .table-condensed样式,减半单元格的边距(padding),从8px 到 4px。

<table class="table table-condensed">
  …
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

5.组合使用上面的样式

F利用上面的样式,进行组合灵活的实现自己表格的样式。

<table class="table table-striped table-bordered table-condensed">
  ...
</table>
Full name
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter