编写一个表格，如果不使用bootstrap或者其他类似的框架，有以下两步：构思设计表格的样式、宽度、高度、行高、对齐方式、边框等，但若一开始的设想与实际效果不符，后面需要不断的调试。编写相应的html/css代码，边写边调试，考虑如何个id或class命名等。如果使用bootstrap，只需要引入bootstrap，然后在<table>标签中添加一个类名.table就可以获得一个bootrap设好的表格样式！
工具/原料
网页编辑器
浏览器
bootrap表格的使用方法
1、表格的基本用法：构建bootstrap表格的基础样式是通过给<table>标签添加class=“table”来实现的。注意，bootstrap的表格默认样式是不带边框和分隔的。具体实现如下：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>表格的使用</title><linkrel="stylesheet"href="css/bootstrap.min.css"></head><body><table><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><th>张三</th><th>年龄</th><th>程序员</th></tr><tr><th>李四</th><th>23</th><th>营运专员</th></tr></table></body></html>效果如图：
bootstrap表格的附加样式
1、.table-bordered:为表格加上边框例子：（注意要引入bootstrap，具体查看上面第一步）html/css部分：<tableclass="tabletable-bordered"><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><th>张三</th><th>年龄</th><th>程序员</th></tr><tr><th>李四</th><th>23</th><th>营运专员</th></tr></table>效果如图：
2、.table-striped：为表格加上斑马线效果例子：html部分：<tableclass="tabletable-striped"><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><th>张三</th><th>年龄</th><th>程序员</th></tr><tr><th>李四</th><th>23</th><th>营运专员</th></tr></table>效果如图：
3、.table-hover：鼠标悬停在表格上时，出现不同的背景色例子：html部分：<tableclass="tabletable-hover"><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><th>张三</th><th>年龄</th><th>程序员</th></tr><tr><th>李四</th><th>23</th><th>营运专员</th></tr></table>效果如图：
4、.table-condensed：设置更为紧凑的表格样式。例子：html部分：<tabl娣定撰钠eclass租涫疼迟="tabletable-condensed"><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><th>张三</th><th>年龄</th><th>程序员</th></tr><tr><th>李四</th><th>23</th><th>营运专员</th></tr></table>效果如图1：四种样式可以叠加使用，具体如下：<tableclass="tabletable-borderedtable-stripedtable-hovertable-condensed"><tr><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><th>张三</th><th>年龄</th><th>程序员</th></tr><tr><th>李四</th><th>23</th><th>营运专员</th></tr></table>效果如图2:
bootstrap响应式表格
1、响应式表格是bootstra圬桦孰礅p3新增的特性，可以让较宽的表格在小屏幕设备上（小于768px）出现水平滚动条。但屏幕宽度大于768p旌忭檀挢x时，水平滚动条消失。使用方法：把表格包裹在一个class=“table-responsive”的元素中即可，具体如下：html：<divclass="table-responsive"><tableclass="table"><tr><th>姓名</th><th>年龄</th><th>职业</th><th>姓名</th><th>年龄</th><th>职业</th><th>姓名</th><th>年龄</th><th>职业</th><th>姓名</th><th>年龄</th><th>职业</th><th>姓名</th><th>年龄</th><th>职业</th></tr><tr><th>张三</th><th>年龄</th><th>程序员</th><th>张三</th><th>年龄</th><th>程序员</th><th>张三</th><th>年龄</th><th>程序员</th><th>张三</th><th>年龄</th><th>程序员</th><th>张三</th><th>年龄</th><th>程序员</th></tr><tr><th>李四</th><th>23</th><th>营运专员</th><th>李四</th><th>23</th><th>营运专员</th><th>李四</th><th>23</th><th>营运专员</th><th>李四</th><th>23</th><th>营运专员</th><th>李四</th><th>23</th><th>营运专员</th></tr></table></div>效果如图：
