使用网页展示数据，常使用表格布局来展示，html默认的table表格显示数据，样式非常简陋，不适合项目使用
工具/原料
jquery
bootstrap
方法/步骤
1、首先看下boo隋茚粟胫tstrap普通的表格<!DOCTYPEhtml><html><head> <m髫潋啜缅etacharset="utf-8"> <title>Bootstrap测试</title> <linkrel="stylesheet"href="../css/bootstrap.min.css"> <scriptsrc="../js/jquery-2.0.3.js"></script> <scriptsrc="../js/bootstrap.min.js"></script></head><body><tableclass="table"style="width:400px"> <caption>普通表格布局</caption> <thead> <tr> <th>学校</th> <th>地区</th> <th>数量</th> </tr> </thead> <tbody> <tr> <td>小学</td> <td>南京</td> <td>200</td> </tr> <tr> <td>初中</td> <td>南京</td> <td>300</td> </tr> <tr> <td>小学</td> <td>上海</td> <td>500</td> </tr> </tbody></table></body></html>引用bootstrap.min.css、jquery-2.0.3.js和bootstrap.min.js添加class="table"打开浏览器测试看下效果
2、使用条纹表格可以间隔显示表格背景色，像斑马线，最主要的是添加bootstrap自带的class属性class="tabletable-striped"
3、边框表格最主要的是添加bootstrap自带的class属性class="tabletable-bordered"，添加次属性之后，可以自动给表格添加显示边框
4、悬停表格可以在鼠标的光标停留在某一个行时显示高亮背景，最主要的是添加bootstrap自带的class属性class="tabletable-hover"
5、bootstrap已经给我们定义好了成功、警告、危险不同级别的颜色显示，我们直接使用就可以class="success"class="warning"class="danger"
6、<tableclass="table"style屏顿幂垂="width:400px"稆糨孝汶;> <caption>不同级别颜色显示</caption> <thead> <tr> <th>级别</th> <th>类别</th> </tr> </thead> <tbody> <trclass="success"> <td>1</td> <td>成功</td> </tr> <trclass="warning"> <td>2</td> <td>警告</td> </tr> <trclass="danger"> <td>3</td> <td>危险</td> </tr> </tbody></table>
