4.2 Bootstrap表格
Bootstrap框架为表格（table）增强了多种表现样式，使得表格在页面中呈现出简洁、美观和多样的特性，本节详细介绍表格的应用。
4.2.1 默认样式表格
使用Bootstrap框架中默认样式的表格非常简单，仅需要在table标签内添加一个．table类即可，下面看一段代码示例。
【代码4-20】是一个默认样式表格的设计（详见源代码ch04目录中ch04.table.html文件）：
01 <div class="bs-docs-example">
02 <table class="table">
03 <thead>
04 <tr>
05 <th>No.</th>
06 <th>姓名</th>
07 <th>性别</th>
08 <th>年龄</th>
09 </tr>
10 </thead>
11 <tbody>
12 <tr>
13 <td>1</td>
14 <td>张三</td>
15 <td>男</td>
16 <td>20</td>
17 </tr>
18 <tr>
19 <td>2</td>
20 <td>李四</td>
21 <td>女</td>
22 <td>18</td>
23 </tr>
24 <tr>
25 <td>3</td>
26 <td>王五</td>
27 <td>男</td>
28 <td>22</td>
29 </tr>
30 </tbody>
31 </table>
32 </div>
上面的代码展示了一个Bootstrap默认样式表格，页面效果如图4.20所示。
图4.20 默认样式表格
4.2.2 斑马纹样式表格
使用Bootstrap框架中斑马纹样式的表格也非常简单，仅需要在table标签内再添加一个．table-striped类即可，下面看一段代码示例。
【代码4-21】是一个斑马纹样式表格的设计（详见源代码ch04目录中ch04.stripedTable.html文件）：
01 <div class="bs-docs-example">
02 <table class="table table-striped">
03 <thead>
04 <tr>
05 <th>No.</th>
06 <th>姓名</th>
07 <th>性别</th>
08 <th>年龄</th>
09 </tr>
10 </thead>
11 <tbody>
12 <tr>
13 <td>1</td>
14 <td>张三</td>
15 <td>男</td>
16 <td>20</td>
17 </tr>
18 <tr>
19 <td>2</td>
20 <td>李四</td>
21 <td>女</td>
22 <td>18</td>
23 </tr>
24 <tr>
25 <td>3</td>
26 <td>王五</td>
27 <td>男</td>
28 <td>22</td>
29 </tr>
30 </tbody>
31 </table>
32 </div>
上面的代码展示了一个Bootstrap斑马纹样式表格，页面效果如图4.21所示。
图4.21 斑马纹样式表格
4.2.3 圆角边框样式表格
使用Bootstrap框架中圆角边框样式的表格同样非常简单，仅需要在table标签内再添加一个．table-bordered类即可，下面看一段代码示例。
【代码4-22】是一个圆角边框样式表格的设计（详见源代码ch04目录中ch04.borderedTable.html文件）：
01 <div class="bs-docs-example">
02 <table class="table table-bordered">
03 <thead>
04 <tr>
05 <th>No.</th>
06 <th>姓名</th>
07 <th>性别</th>
08 <th>年龄</th>
09 </tr>
10 </thead>
11 <tbody>
12 <tr>
13 <td>1</td>
14 <td>张三</td>
15 <td>男</td>
16 <td>20</td>
17 </tr>
18 <tr>
19 <td>2</td>
20 <td>李四</td>
21 <td>女</td>
22 <td>18</td>
23 </tr>
24 <tr>
25 <td>3</td>
26 <td>王五</td>
27 <td>男</td>
28 <td>22</td>
29 </tr>
30 </tbody>
31 </table>
32 </div>
上面的代码展示了一个Bootstrap带圆角边框样式的表格，页面效果如图4.22所示。
图4.22 圆角边框样式表格
4.2.4 鼠标悬停样式表格
对于表格行列数较多的表格浏览起来通常比较困难，Bootstrap框架提供了一种鼠标悬停样式的表格来提高用户体验，即当鼠标停留在表格某一行时该行会高亮显示。应用Bootstrap框架实现该功能仅需要在table标签内再添加一个．table-hover类即可，下面看一段代码示例。
【代码4-23】是一个鼠标悬停样式表格的设计（详见源代码ch04目录中ch04.hoverTable.html文件）：
01 <div class="bs-docs-example">
02 <table class="table table-hover">
03 <thead>
04 <tr>
05 <th>No.</th>
06 <th>姓名</th>
07 <th>性别</th>
08 <th>年龄</th>
09 </tr>
10 </thead>
11 <tbody>
12 <tr>
13 <td>1</td>
14 <td>张三</td>
15 <td>男</td>
16 <td>20</td>
17 </tr>
18 <tr>
19 <td>2</td>
20 <td>李四</td>
21 <td>女</td>
22 <td>18</td>
23 </tr>
24 <tr>
25 <td>3</td>
26 <td>王五</td>
27 <td>男</td>
28 <td>22</td>
29 </tr>
30 </tbody>
31 </table>
32 </div>
上面的代码展示了一个Bootstrap带鼠标悬停样式的表格，页面效果如图4.23所示。
图4.23 鼠标悬停样式表格
4.2.5 带行属性样式表格
Bootstrap框架还可以满足为每行单独设定属性样式的表格，应用该功能仅需要在需要增加行属性的<tr>标签内添加情景(contextual)类即可。这些情景类包括：.success、.error、.warning和．info共4种，每一种分别使用不同的背景颜色来定义。下面看一段代码示例。
【代码4-24】是一个带行属性样式表格的设计（详见源代码ch04目录中ch04.contextualTable.html文件）：
01 <div class="bs-docs-example">
02 <table class="table table-bordered">
03 <thead>
04 <tr>
05 <th>No.</th>
06 <th>姓名</th>
07 <th>性别</th>
08 <th>年龄</th>
09 </tr>
10 </thead>
11 <tbody>
12 <tr class="error">
13 <td>1</td>
14 <td>张三</td>
15 <td>男</td>
16 <td>20</td>
17 </tr>
18 <tr class="warning">
19 <td>2</td>
20 <td>李四</td>
21 <td>女</td>
22 <td>18</td>
23 </tr>
24 <tr class="success">
25 <td>3</td>
26 <td>王五</td>
27 <td>男</td>
28 <td>22</td>
29 </tr>
30 <tr class="info">
31 <td>4</td>
32 <td>姓名</td>
33 <td>性别</td>
34 <td>年龄</td>
35 </tr>
36 </tbody>
37 </table>
38 </div>
上面的代码展示了一个Bootstrap带行属性样式的表格，页面效果如图4.24所示。
图4.24 带行属性样式表格