Manipulating tables

The Bootstrap framework offers a wide variety for table customization. To present them, we will create a new row before the <footer> and a price table for our landing page, like this:

To do this, we must create a regular table with the <table>, <thead>, <tbody>, <tr>, <th>, and <td> tags. The table will have three columns and eight rows. Therefore, the HTML code should be like this:

<p class="row">
  <p class="col-md-10 col-md-offset-1">
    <table>
      <thead>
        <tr>
          <th>
            <h4>Free plan</h4>
          </th>
          <th>
            <h4>Standard plan</h4>
          </th>
          <th>
            <h4>Premium plan</h4>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <h3>$ 0</h3>
          </td>
          <td>
            <h3>$ 99</h3>
          </td>
          <td>
            <h3>$ 999</h3>
          </td>
        </tr>
        <tr>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
        </tr>
        <tr>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
        </tr>
        <tr>
          <td>Dolor sit amet</td>
          <td>Lorem ipsum</td>
          <td>Lorem ipsum</td>
        </tr>
        <tr>
          <td>-</td>
          <td>Dolor sit amet</td>
          <td>Lorem ipsum</td>
        </tr>
        <tr>
          <td>-</td>
          <td>-</td>
          <td>Lorem ipsum</td>
        </tr>
        <tr>
          <td><a href="#">Purchase</a></td>
          <td><a href="#">Purchase</a></td>
          <td><a href="#">Purchase</a></td>
        </tr>
      </tbody>
    </table>
  </p>
</p>

Right now, we have no secrets in our table. Let's start using CSS Bootstrap styles! First of all, add the .table class to the <table> tag (duh!). This seems redundant, but it's an option of the framework used to make it explicit.

Then, we will apply some specific styles. To make the rows striped, we add the .table-striped class to <table> as well. We want this table to have borders, so we add the .table-bordered class to make it like that. Last but not least, add the .table-hover class to enable hover state in the <tbody> rows.

Now we will move on to the <tr> tag inside <thead>. To make its background green, we add the .success class. Similar to buttons, every cell, row, or table in a <table> tag can receive color classes, officially called Bootstrap contextual classes.

Contextual classes follow the same colors meant for buttons. So, for the second column, we apply the .info class to get a cyan background color, and we use a .danger class to get a red background color in the last column.

Note

The framework also offers the .active class, which offers the same color of hover and the .warning class, which offers a yellow color.

Inside each <th> tag, we have an <h4> typography tag. If you take a look at the image showing how the table should look, you will notice that the heading texts are in the center. You may remember how to do that; just apply the .text-center class in the headings.

The themed <thead> tag will be like this:

<thead>
  <tr>
    <th class="success">
      <h4 class="text-center">Free plan</h4>
    </th>
    <th class="info">
      <h4 class="text-center">Standard plan</h4>
    </th>
    <th class="danger">
      <h4 class="text-center">Premium plan</h4>
    </th>
  </tr>
</thead>

Now we will move on to the first table row in <tbody>, which is the price row. We just need to center <h4> in the same way as we did in the <thead> row—by adding the .text-center class:

<h3 class="text-center">$ 0</h3>

The next five rows have no specific style, but the last one has buttons and some tricks!

Styling the buttons

Do you remember how to apply the color theme in the buttons? You just need to follow the <thead> column color style, prepending .btn-* in the Bootstrap contextual classes. For instance, the first one will have the .btn-success class to turn a green button.

Furthermore, the button must fill the full width of the cell. To make the button span the complete parent width, add the .btn-block class and the magic is completely done! The code for the last row is as follows:

<tr>
  <td><a href="#" class="btn btn-success btn-block">Purchase</a></td>
  <td><a href="#" class="btn btn-info btn-block">Purchase</a></td>
  <td><a href="#" class="btn btn-danger btn-block">Purchase</a></td>
</tr>