Bootstrapping Your Web Pages 4 – Dressing Up Tables

Prelude

Continuing from Bootstrapping Your Web Pages 3 – Crafting Text where we left off. You have learned the Bootstrap’s crafting of HTML text, we shall now find out how Bootstrap dresses up HTML tables.

Dressing Up Tables

We use HTML tables to tabulate data into rows and columns for presentation on web pages. The default HTML table are styled different by Bootstrap’s classes targeting at the <table> element. Let’s visit these <table> targeted classes one by one.

Basic Style

Add the Bootstrap’s .table class to the opening tag of <table> element as shown below in the following code or download it on-line:

<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>

The .table class will style the HTML table with light padding and horizontal dividers as illustrated in Figure 1 below or view it on-line:

Figure 1: Bootstrap’s Basic Table Style

Row Stripes

Include a .table-striped class alongside  .table class in the preceding code, i.e.  <table class="table table-striped">, will add zebra stripes to table rows in the <tbody> as illustrated in Figure 2 below or view it on-line:

Figure 2: Table with Striped Rows

You may download the code on-line.

Table Borders

Similarly, include a .table-bordered class alongside  .table class, i.e.  <table class="table table-bordered">, will add borders on all sides of the table and cells as illustrated in Figure 3 below or view it on-line:

Figure 3: Bordered Table and Cells

You may download the code on-line.

Hovered Rows

You can highlight a row when you hover your mouse over it by simply including a .table-hover class alongside .table class, i.e.  <table class="table table-hover">, as illustrated in Figure 4 below or view it on-line:

Figure 4: Hovering Effect on Rows

You may download the code on-line.

Condensed Table

You can make a table more compact by including a .table-condensed class alongside .table class, i.e.  <table class="table table-condensed">,  to reduce the cell padding by half as illustrated in Figure 5 below or view it on-line:

Figure 5: Condensed Table

You may download the code on-line.

Contextual Classes

Bootstrap provides contextual classes to convey meanings via colors for rows and cells in HTML table. They are  .active, .success, .info, .warning, and .danger.

To apply these classes to table rows, add them to opening <tr> tags as shown in the following code or download it on-line:

<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>

This code will render the table with contextually colored rows as illustrated in Figure 6 below or view it on-line:

Figure 6: Contextual Table Rows

To apply these classes to table cells, add them to opening <td> tags as shown in the following code or download it on-line:

<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>

This code will render the table with contextually colored cells as illustrated in Figure 7 below or view it on-line:

Figure 7: Contextual Table Cells

Responsive Table

Bootstrap provides the .table-responsive class for creating a responsive HTML table that will scroll horizontally on xs sized devices such as mobile phones. To do this, wrap the whole HTML table inside a <div> that takes the .table-responsive class attribute as shown in the following code or download it on-line:

<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>

This code will render the table with a horizontal scroll bar when it is shown on xs sized devices as illustrated in Figure 8 below or view it on-line:

Figure 8: Responsive Table

However, this feature does not work on Firefox browser without a fix provided in this Stack Overflow’s answer.

Next Up

You have learned how to dress up HTML tables using Bootstrap. Wondering what is in store on the next shipment? You will find out in due course. Meanwhile, be patient…

The post Bootstrapping Your Web Pages 4 – Dressing Up Tables appeared first on Peter Leow's Code Blog.