下载掌阅APP，畅读海量书库
立即打开
Bootstrap中定义了表格的基本样式，以及几种常用的表格。使用这些表格时，读者仅需在表格标签中添加对应的类名即可。
Bootstrap中设置了表格的基本样式。若用户没有为表格定义表格样式，则默认表格的底部外边距为1rem，文字颜色为#212529。具体表格样式如图2-22所示。
基本的表格
图2-22 Bootstrap表格的基本样式
【例2-16】使用Bootstrap制作会员信息统计表。实现时，为了表格美观，设置表格顶部外边距为3rem（仅需为<table>标签设置类名为.mt-5），自定义表格的背景样式。具体代码如下：
<style type="text/css">
body {
background: url("images/24.jpg") no-repeat;
}
</style>
<table class="table mt-5">
<thead>
<th>姓名</th><th>会员号</th><th>会员类型</th><th>会员积分</th>
</thead>
<tbody>
<tr><td>小仙女</td><td>v08001</td><td>白金会员</td><td>50</td></tr>
<tr><td>ai小哥哥</td><td>v08034</td><td>钻石会员</td><td>3551</td></tr>
<tr><td>一信鸽</td><td>v08021</td><td>黄金会员</td><td>290</td></tr>
<tr><td>猫喵喵</td><td>v08002</td><td>白金会员</td><td>70</td></tr>
</tbody>
</table>
编写完代码后，在浏览器中运行本例，具体运行效果如图2-23所示。
图2-23 Bootstrap默认表格样式
颜色翻转对比风格的表格指的是以深色为背景色，浅色为文本色的表格。要制作颜色翻转对比风格的表格，只需添加类名.table-dark。
可选的表格样式
【例2-17】使用Bootstrap实现黑色背景的歌单信息统计表。实现时，需要为<table>标签设置类名为.table-dark。具体代码如下：
<table class="table table-dark">
<thead>
<tr>
<th>歌曲名</th><th>歌手</th>
<th>热度</th><th>时长</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td> 最美情侣</td>
<td>白小白</td>
<td><img src="images/13.png"><img src="images/13.png"> <i mg src="images/13.png"> <imgsrc="images/13.png"></td>
<td>04:02</td><td>播放</td>
</tr>
<tr>
<td> 让我做你的眼睛</td><td>子芮</td>
<td><img src="images/13.png"> <img src="images/13.png"> <img src="images/13.png"> <imgsrc="images/13.png"> <img src="images/13.png"></td>
<td>03:21</td><td>播放</td>
</tr>
<!--表格后两行代码与上面类似，故省略-->
</tbody>
</table>
在浏览器中运行本例，运行效果如图2-24所示。
图2-24 颜色翻转对比风格的表格
在网页中添加表格时，仅需一个类名就可以设置表头的样式。Bootstrap中预设的表头样式有两种，第一种为深色（#343a40）背景和浅色文字。设置表头为该样式时，仅需在<thead>标签中添加类名.thead-dark。而第二种则与之相反，其样式为浅色（#454d55）背景和深色文字（#495057）。要使用这种样式，仅需在<thead>标签中添加类名.thead-light。图2-25所示为深色背景、浅色文字的表头样式。
图2-25 在Bootstrap中设置表格的表头
【例2-18】使用Bootstrap中的表头样式制作明日科技的明星讲师页面，并且为<thead>标签设置类名为.thead-dark。具体代码如下：
<table class="table"> <thead class="thead-dark"> <h3 class="text-center text-primary">明日科技的明星讲师</h3> <tr><th>讲师</th><th> 擅长领域</th></tr> </thead> <tbody> <tr><td>小科老师</td><td>C语言、C#、ASP.NET</td></tr> <tr><td>大米粥</td><td>C语言、Oracle、MySQL</td></tr> <tr><td>根号申</td><td>Java、Java Web</td></tr> <tr><td>无语</td><td>Android、Java Web、JSP</td></tr> <tr><td>Andy</td><td>PHP、JavaScript、CSS</td></tbody> </table>
在浏览器中运行本例，运行效果如图2-26所示。
图2-26 设置表格的表头样式
条纹状表格指的是表格呈现为隔行变色，具体表格样式如图2-27所示。要制作条纹状表格，需要为表格标签<table>添加类名.table-striped。
图2-27 Bootstrap中的条纹状表格
【例2-19】使用Bootstrap制作员工工作进度统计表。实现时，需要为表格标签添加类名.table striped。具体代码如下：
<table class="table table-striped">
<thead>
<h3 class="text-center text-warning">2019年员工工作进度统计</h3>
<tr>
<th>月份</th><th>部门编号</th>
<th> 工作完成情况</th><th>未完成原因</th>
<th> 绩效考评</th>
</tr>
</thead>
<tbody>
<tr>
<td>201901</td><td>BM01</td><td>80% </td>
<td>B12</td><td>80</td>
</tr>
<tr>
<td>201902</td><td>BM02</td><td>86% </td>
<td>B13</td><td>85</td>
</tr>
<!--省略相似代码-->
</tbody>
</table>
在浏览器中运行本例，运行效果如图2-28所示。
使用Bootstrap时，通过添加类名.table-bordered，即可设置表格边框样式为“1px solide #dee2e6”。
图2-28 条纹状表格
【例2-20】使用Bootstrap实现在网页中显示输入键盘的效果。实现时，为了键盘的美观，需要设置表格的背景颜色（设置类名为.bg-success）以及文字颜色（设置类名为.text-white），然后设置文本居中显示（设置类名为.text-center）和表格的边框。具体代码如下：
<table class="table bg-success text-white table-bordered text-center">
<tr>
<td>～<br/>、</td>
<td>！<br/>1</td>
<td>@<br/>2</td>
<td>#<br/>3</td>
<td>$<br/>4</td>
<td>% <br/>5</td>
<td>^<br/>6</td>
<td>&<br/>7</td>
<td>*<br/>8</td>
<td>(<br/>9</td>
<td>)<br/>0</td>
<td>_<br/>-</td>
<td>+<br/>=</td>
<td>←Backspace</td>
</tr>
<tr>
<td>Tab</td>
<td>Q</td>
<td>W</td>
<td>E</td>
<td>R</td>
<td>T</td>
<td>Y</td>
<td>U</td>
<td>I</td>
<td>O</td>
<td>P</td>
<td>{<br>[</td>
<td>}<br>]</td>
<td rowspan="2">Enter</td>
</tr>
<!--省略相似代码-->
</table>
在浏览器中运行本例，运行效果如图2-29所示。
图2-29 设置表格边框样式
在Bootstrap中还可以清除表格的边框，清除表格边框时仅需添加类名.table-borderless即可。
【例2-21】使用Bootstrap实现蚂蚁庄园中爱心值的排名效果。实现时，为了美观，需要在<table>标签中添加类名.table-borderless。具体代码如下：
<img src="images/29.jpg" alt="" class="img-fluid">
<table class="table table-borderless">
<tr>
<td><img src="images/25.png"> </td>
<td><h5>网红款仙女<br/><span class="initialism">累计献出爱心190颗</span> </h5></td>
<td>爱心值<span class="text-warning">38</span></td>
</tr>
<tr>
<td><img src="images/26.png"> </td>
<td><h5>boom pow<br/><span class="initialism">累计献出爱心160颗</span> </h5></td>
<td>爱心值<span class="text-warning">32</span></td>
</tr>
<!--省略相似代码-->
</table>
在浏览器中运行本例，运行效果如图2-30所示。
图2-30 清除表格边框的爱心值排名效果
Bootstrap还提供了鼠标指针悬停表格上的效果。设置该效果后，当鼠标指针放置在表格上时，对应行就会出现状态提示。要设置悬停效果只需在<table>标签中添加类名.table hover，具体样式可参考例2-22。
【例2-22】使用Bootstrap制作蒙牛酸奶的营养成分表。具体代码如下：
<table class="table table-hover table-danger text-center">
<h3 class="text-center">蒙牛风味酸牛奶营养成分表</h3>
<thead>
<tr>
<td>项目</td>
<td>每100克</td>
<td> 营养参考值</td>
</tr>
</thead>
<tbody>
<tr>
<td>能量</td>
<td>307千焦</td>
<td>4% </td>
</tr>
<tr>
<td>蛋白质</td>
<td>2.7克</td>
<td>5% </td>
</tr>
<!--省略相似代码-->
</tbody>
</table>
在浏览器中运行本例，运行效果如图2-31所示。表格中第4行的样式为鼠标指针悬停时的样式。
图2-31 鼠标指针悬停表格上时的样式
前面所介绍的表格样式中，表格内容与表格边框之间的内间距为0.75rem。如果想要将表格的内间距缩小，则可以为<table>标签添加类名.table-sm，将表格的内间距修改为0.3rem，从而实现表格的紧缩效果。
【例2-23】使用Bootstrap制作车次信息表。实现时需要为<table>标签设置类名为.table-sm。具体代码如下：
<style type="text/css">
.cont{
background: url("images/30.jpg");
background-size: 100% 100% ;
}
</style>
<table class="table table-success text-center cont table-sm">
<thead>
<tr>
<td>车次 </td>
<td>出发站—到达站</td>
<td>出发时间</td>
<td>到达时间</td>
<td>历时</td>
</tr>
</thead>
<tbody>
<tr>
<td>D74 </td>
<td>长春—北京</td>
<td>11:04</td>
<td>17:47</td>
<td>6：43</td>
</tr>
<!--省略相似代码-->
</tbody>
</table>
在浏览器中运行本例，运行效果如图2-32所示。
图2-32 表格紧缩效果
在网页中添加表格时，还可以设置表格行的背景颜色。在设置行的背景颜色时，可以通过添加不同的class属性值来设置相应的背景颜色，具体如下。
·.table-active：设置表格背景颜色为rgba(0,0,0,0.075)。
·.table-danger：设置表格背景颜色为#f5c6cb。
·.table-success：设置表格背景颜色为#c3e6cb。
·.table-info：设置表格背景颜色为#bee5eb。
·.table-primary：设置表格背景颜色为#b8daff。
【例2-24】使用Bootstrap制作微信运动排行榜页面，并且用不同的背景颜色显示微信用户的运动信息。具体代码如下：
<head>
<style type="text/css">
.bg {
height: 180px;
background: url("images/38.png") no-repeat;
background-size: 100% 100% ;
}
</style>
</head>
<body>
<table class="table text-center cont table-sm">
<tr class="bg">
<td colspan="5" class="pt-5">
<img src="images/32.png" alt="" width="30"><span>布谷鸟占领了封面</span>
</td>
</tr>
<tr class="table-active">
<td></td>
<td><img src="images/31.png" alt="" width="50"></td>
<td> 跟蜗牛赛跑<p class="text-muted">第8名</p></td>
<td>8800</td>
<td>3<br><img src="images/36.png" width="40" alt=""></td>
</tr>
<tr class="table-success">
<td>1</td>
<td><img src="images/32.png" alt="" width="50"></td>
<td>布谷鸟<p class="text-muted">第1名</p></td>
<td>18806</td>
<td>10<br><img src="images/36.png" width="40" alt=""></td>
</tr>
<!--省略相似代码-->
</table>
</body>
编写完代码后在浏览器中运行本例，运行效果如图2-33所示。
图2-33 添加表格行的背景颜色
同样，通过添加类名还可以实现响应式表格的创建。响应式表格就是能根据浏览器屏幕的尺寸自动调节大小的表格，例如图2-34和图2-35所示的就是Bootstrap实现的同一表格在iPhone 6屏幕中和iPad屏幕中的不同样式。使用Bootstrap创建响应式表格仅需添加类名.table-responsive即可。此外，还可以使用.table-responsive sm、.table-responsive-md、.table-responsive-lg、.table-responsive-xl等来设置各屏幕尺寸下表格的样式，具体说明如下。
响应式表格
图2-34 iPhone 6屏幕中表格的样式
图2-35 iPad屏幕中表格的样式
·.table-responsive-sm：当浏览器窗口宽度小于575.98px且浏览器窗口中无法放置表格所有内容时，显示滚动条。
·.table-responsive-md：当浏览器窗口宽度小于767.98px且浏览器窗口中无法放置表格所有内容时，显示滚动条。
·.table-responsive-lg：当浏览器窗口宽度小于991.98px且浏览器窗口中无法放置表格所有内容时，显示滚动条。
·.table-responsive-xl：当浏览器窗口宽度小于1199.98px且浏览器窗口中无法放置表格所有内容时，显示滚动条。
设置响应式表格需要在表格的外层添加<div>，然后在<div>标签中添加以上类名，而并非在<table>标签中直接添加。
【例2-25】使用Bootstrap制作高考成绩信息表，并且设置表格为响应式表格。具体代码如下：
<div class=" table-responsive-lg table-responsive-md table-responsive-sm table-responsive-xl">
<table class="table">
<thead>
<tr class="table-primary">
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>历史</td>
<td>地理</td>
<td>政治</td>
<td>化学</td>
<td>生物</td>
<td>物理</td>
</tr>
</thead>
<tbody>
<tr class="table-dark">
<td>阿毛</td>
<td>118</td>
<td>119</td>
<td>134</td>
<td>80</td>
<td>86</td>
<td>70</td>
<td>90</td>
<td>80</td>
<td>97</td>
</tr>
<tr class="table-warning">
<td>脆猫</td>
<td>114</td>
<td>130</td>
<td>110</td>
<td>80</td>
<td>85</td>
<td>92</td>
<td>86</td>
<td>87</td>
<td>87</td>
</tr>
<!--省略相似代码-->
</tbody>
</table>
</div>
在浏览器中运行本例时，当屏幕宽度大于或等于575.98px时，其运行效果如图2-36所示；反之，效果如图2-37所示。
图2-36 浏览器宽度大于或等于575.98px时的表格
图2-37 浏览器宽度小于575.98px时的表格