Bootstrap 基礎表格（Tables）和樣式CSS

標準結構

標籤	描述
<table>	用以包裝表格化的數據
<thead>	容納表格標題行 (<tr>)以標識表格列，
<tbody>	容納表格行 (<tr>)
<tr>	容納行內的一組單元格 (<td> or <th>)
<td>	默認的表格單元格
<th>	用於列頭(或是行，取決於標籤所在位置和區域)的特殊標籤 必須置於 <thead> 標籤內。
<caption>	表格用途的描述或摘要，對屏幕閱讀器（視障人士讀屏軟件）很是有用

[html] view plaincopy

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 plaincopy

1. <table class="table">  

2.   …  

3. </table>  

表格的可選類

在.table後面能夠添加下列任意類。

.table-striped可使奇數行的背景設爲灰色。

[html] view plaincopy

1. <table class="table table-striped">  

2.   …  

3. </table>  

.table-bordered可使邊框顯示。

[html] view plaincopy

1. <table class="table table-bordered">  

2.   …  

3. </table>  

.table-hover可使鼠標懸停的行的背景變爲灰色。

[html] view plaincopy

1. <table class="table table-hover">  

2.   …  

3. </table>  

.table-condensed可使行間距變小。

[html] view plaincopy

1. <table class="table table-condensed">  

2.   …  

3. </table>  

行的可選類

使用下列類可使行的背景色變化，從而表達必定含義。

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

[html] view plaincopy

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. ...