Bootstrap 基础CSS - 表格（Tables）

标准结构

标签	描述
<table>	用以包装表格化的数据
<thead>	容纳表格标题行 (<tr>)以标识表格列，
<tbody>	容纳表格行 (<tr>)
<tr>	容纳行内的一组单元格 (<td> or <th>)
<td>	默认的表格单元格
<th>	用于列头(或是行，取决于标签所在位置和区域)的特殊标签 必须置于 <thead> 标签内。
<caption>	表格用途的描述或摘要，对屏幕阅读器（视障人士读屏软件）非常有用

[html]  view plain copy

1. <table>  
2.   <caption>...</caption>  
3.   <thead>  
4.     <tr>  
5.       <th>...</th>  
6.       <th>...</th>  
7.     </tr>  
8.   </thead>  
9.   <tbody>  
10.     <tr>  
11.       <td>...</td>  
12.       <td>...</td>  
13.     </tr>  
14.   </tbody>  
15. </table>  

默认样式

行与行之间用水平线相隔。只需向<table>添加.table

[html]  view plain copy

1. <table class="table">  
2.   …  
3. </table>  

表格的可选类

在.table后面可以添加下列任意类。

.table-striped可以使奇数行的背景设为灰色。

[html]  view plain copy

1. <table class="table table-striped">  
2.   …  
3. </table>  

.table-bordered可以使边框显示。

[html]  view plain copy

1. <table class="table table-bordered">  
2.   …  
3. </table>  

.table-hover可以使鼠标悬停的行的背景变为灰色。

[html]  view plain copy

1. <table class="table table-hover">  
2.   …  
3. </table>  

.table-condensed可以使行间距变小。

[html]  view plain copy

1. <table class="table table-condensed">  
2.   …  
3. </table>  

行的可选类

使用下列类可以使行的背景色变化，从而表达一定含义。

向<tr>添加.success、.error、.warning、.info。

[html]  view plain copy

1. ...  
2.   <tr class="success">  
3.     <td>1</td>  
4.     <td>TB - Monthly</td>  
5.     <td>01/04/2012</td>  
6.     <td>Approved</td>  
7.   </tr>  
8. ...