引导你的网页 4 - 装饰表格

前言

承接Bootstrap网页教程3 – 文字排版的内容。你已经学习了Bootstrap的HTML文本排版，现在我们将了解Bootstrap如何美化HTML表格。

美化表格

我们使用HTML表格将数据制成行和列的形式，以便在网页上呈现。默认的HTML表格样式由Bootstrap的类来定义，这些类作用于<table>元素。让我们逐一了解这些针对<table>的类。

 

基本样式

在<table>元素的起始标签中添加Bootstrap的.table类，如下面的代码所示，或者在线下载

<div class="container">
  <h2>Bootstrap's Table - Basic Style</h2>       
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Assignment</th>
        <th>Project</th>
        <th>Exam</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Peter</td>
        <td>80</td>
        <td>65</td>
        <td>77</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>82</td>
        <td>67</td>
        <td>70</td>
      </tr>
      <tr>
        <td>Linda</td>
        <td>68</td>
        <td>55</td>
        <td>60</td>
      </tr>
    </tbody>
  </table>  
</div>

.table类将为HTML表格添加浅色填充和水平分隔线，如下图1所示，或者在线查看

条纹行

在前面的代码中，与.table类一起添加.table-striped类，即 <table class="table table-striped">，这将在<tbody>中的表格行添加斑马纹条纹，如下图2所示，或者在线查看

你可以在线下载代码。

表格边框

类似地，与.table类一起添加.table-bordered类，即 <table class="table table-bordered">，这将在表格和单元格的所有侧面添加边框，如下图3所示，或者在线查看

你可以在线下载代码。

鼠标悬停行

只需与.table类一起添加.table-hover类，即 <table class="table table-hover">，你就可以在鼠标悬停在行上时突出显示该行，如下图4所示，或者在线查看

你可以在线下载代码。

紧凑表格

你可以通过与.table类一起添加.table-condensed类，即 <table class="table table-condensed">，来使表格更紧凑，这将使单元格填充减少一半，如下图5所示，或者在线查看

你可以在线下载代码。

上下文类

Bootstrap提供上下文类，可以通过颜色来表达HTML表格中行和单元格的含义。它们是.active、.success、.info、.warning和.danger。

要将这些类应用于表格行，请将它们添加到<tr>标签的起始处，如下面的代码所示，或者在线下载

<h2>Bootstrap's Table - Contextual Rows</h2>       
<table class="table">
  <thead>
    <tr>
      <th>Contextual Class</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td><code>.active</code></td>
      <td>Apply the hover color to this row.</td>
    </tr>
    <tr class="success">
      <td><code>.success</code></td>
      <td>Indicates a successful situation in this row.</td>
    </tr>
    <tr class="info">
      <td><code>.info</code></td>
      <td>Convey information in this row.</td>
    </tr>
    <tr class="warning">
      <td><code>.warning</code></td>
      <td>Conveys a warning to draw attentions in this row.</td>
    </tr>
    <tr class="danger">
      <td><code>.danger</code></td>
      <td>Indicates a dangerous situation in this row.</td>
    </tr>
  </tbody>
</table>

此代码将呈现带有上下文颜色行的表格，如下图6所示，或者在线查看

要将这些类应用于表格单元格，请将它们添加到<td>标签的起始处，如下面的代码所示，或者在线下载

<h2>Bootstrap's Table - Contextual Cells</h2>       
<table class="table">
  <thead>
    <tr>
      <th>Contextual Class</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>.active</code></td>
      <td class="active">Apply the hover color to this cell.</td>
    </tr>
    <tr>
      <td><code>.success</code></td>
      <td class="success">Indicates a successful situation in this cell.</td>
    </tr>
    <tr>
      <td><code>.info</code></td>
      <td class="info">Convey information in this cell.</td>
    </tr>
    <tr>
      <td><code>.warning</code></td>
      <td class="warning">Conveys a warning to draw attentions in this cell.</td>
    </tr>
    <tr>
      <td><code>.danger</code></td>
      <td class="danger">Indicates a dangerous situation in this cell.</td>
    </tr>
  </tbody>
</table>

此代码将呈现带有上下文颜色单元格的表格，如下图7所示，或者在线查看

响应式表格

Bootstrap提供.table-responsive类来创建响应式HTML表格，该表格将在xs尺寸的设备（如移动电话）上水平滚动。为此，请将整个HTML表格包装在一个带有.table-responsive类属性的<div>中，如下面的代码所示，或者在线下载

<div class="container">
<h2>Bootstrap's Table - Responsive</h2>
<div class="table-responsive">       
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Assignment</th>
      <th>Project</th>
      <th>Exam</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>80</td>
      <td>65</td>
      <td>77</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>82</td>
      <td>67</td>
      <td>70</td>
    </tr>
    <tr>
      <td>Linda</td>
      <td>68</td>
      <td>55</td>
      <td>60</td>
    </tr>
  </tbody>
</table>  
</div>
<footer>© 2016 Peter Leow</footer>
</div>

当此代码在xs尺寸的设备上显示时，将呈现带有水平滚动条的表格，如下图8所示，或者在线查看

但是，此功能在Firefox浏览器中无法正常工作，除非使用Stack Overflow上的此答案中提供的修复程序。

下一部分

你已经学习了如何使用Bootstrap美化HTML表格。想知道下一个教程的内容吗？你将会及时了解。与此同时，请耐心等待……

 

文章Bootstrap网页教程4 – 美化表格 首次出现在Peter Leow的代码博客。