2.2.2 可选的表格样式
1. 颜色翻转对比风格的表格
颜色翻转对比风格的表格指的是以深色为背景色，浅色为文本色的表格。要制作颜色翻转对比风格的表格，只需添加类名.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 颜色翻转对比风格的表格
2. 设置表格的表头
在网页中添加表格时，仅需一个类名就可以设置表头的样式。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 设置表格的表头样式
3. 条纹状表格
条纹状表格指的是表格呈现为隔行变色，具体表格样式如图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所示。
4. 表格边框处理
使用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 设置表格边框样式
5. 清除表格边框
在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 清除表格边框的爱心值排名效果
6. 鼠标指针悬停表格上的效果
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 鼠标指针悬停表格上时的样式
7. 设置表格紧缩效果
前面所介绍的表格样式中，表格内容与表格边框之间的内间距为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 表格紧缩效果
8. 设置表格行的样式
在网页中添加表格时，还可以设置表格行的背景颜色。在设置行的背景颜色时，可以通过添加不同的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 添加表格行的背景颜色