Bootstrap中的排版(3)-表格
全屏宽度带水平线的表格 .table
带边框的表格 .table-bordered
条纹状表格 .table-striped
悬停变色表格 .table-hover
紧凑风格表格 .table-condensed
小练习:
![](https://images2015.cnblogs.com/blog/1160039/201706/1160039-20170608212914559-543571421.png)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 7 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 8 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 9 </head> 10 <body> 11 <table class="table table-striped table-bordered table-hover"> 12 <thead> 13 <tr> 14 <th>标题一</th> 15 <th>标题二</th> 16 <th>标题三</th> 17 <th>标题四</th> 18 <th>标题五</th> 19 </tr> 20 </thead> 21 <tbody> 22 <tr> 23 <td>内容一</td> 24 <td>内容二</td> 25 <td>内容三</td> 26 <td>内容四</td> 27 <td>内容五</td> 28 </tr> 29 <tr> 30 <td>内容一</td> 31 <td>内容二</td> 32 <td>内容三</td> 33 <td>内容四</td> 34 <td>内容五</td> 35 </tr> 36 <tr> 37 <td>内容一</td> 38 <td>内容二</td> 39 <td>内容三</td> 40 <td>内容四</td> 41 <td>内容五</td> 42 </tr> 43 </tbody> 44 </table> 45 </body> 46 </html>