2.2.1 基本的表格

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默认表格样式