(For more resources related to this topic, see here.)

Let’s revisit the mockup of how our client would like the pricing tables to look on desktop-sized screens:

Let’s see how close we can get to the desired result, and what we can work out for other viewport sizes.

Setting up the variables, files, and markup

As shown in the preceding screenshot, there are a few tables in this design. We can begin by adjusting a few fundamental variables for all tables. These are found in _variables.less. Search for the tables section and adjust the variables for background, accented rows, and borders as desired. I’ve made these adjustments as shown in the following lines of code:

// Tables
// -------------------------
...
@table-bg: transparent; // overall background-color
@table-bg-accent: hsla(0,0,1%,.1); // for striping
@table-bg-hover: hsla(0,0,1%,.2);
@table-bg-active: @table-bg-hover;
@table-border-color: #ccc; // table and cell border

Save the file, compile it to CSS, and refresh to see the result as shown in the following screenshot:

That’s a start. Now we need to write the more specific styles.

The _page-contents.less file is now growing long, and the task before us is extensive and highly focused on table styles. To carry the custom styles, let’s create a new LESS file for these pricing tables:

1. Create _pricing-tables.less in the main less folder.
2. Import it into __main.less just after _page-contents.less as shown in the following line:

   @import "_pricing-tables.less";

3. Open _pricing-tables.less in your editor and begin writing your new styles.

But before we begin writing styles, let’s review the markup that we’ll be working with.

We have the following special classes already provided in the markup on the parent element of each respective table:

 

• package package-basic

• package package-premium

• package package-pro

 

Thus, for the first table, you’ll see the following markup on its parent div:

<div class="package package-basic col-lg-4">
<table class="table table-striped">
...

Similarly, we’ll use package package-premium and package package-pro for the second and third table, respectively.

These parent containers obviously also provide basic layout instructions using the col-md-4 class to set up a three-column layout in medium viewports.

Next, we will observe the markup for each table. We see that the basic table and table-striped classes have been applied:

<table class="table table-striped">

The table uses the <thead> element for its top-most block. Within this, there is <th> spanning two columns, with an <h2> heading for the package name and <div class=”price”> to markup the dollar amount:

<thead>
<tr>
<th colspan="2">
<h2>Basic Plan</h2>
<div class="price">$19</div>
</th>
</tr>
</thead>

Next is the tfoot tag with the Sign up Now! button:

<tfoot>
<tr><td colspan="2"><a href="#" class="btn">Sign up
now!</a></td></tr>
</tfoot>

Then is the tbody tag with the list of features laid out in a straightforward manner in rows with two columns:

<tbody>
<tr><td>Feature</td><td>Name</td></tr>
<tr><td>Feature</td><td>Name</td></tr>
<tr><td>Feature</td><td>Name</td></tr>
<tr><td>Feature</td><td>Name</td></tr>
<tr><td>Feature</td><td>Name</td></tr>
</tbody>

And finally, of course, the closing tags for the table and parent div tags:

</table>
</div><!-- /.package .package-basic -->

Each table repeats this basic structure.

This gives us what we need to start work!

Beautifying the table head

To beautify the thead element of all of our tables, we’ll do the following:

• Align the text at the center
• Add a background color—for now, add a gray color that is approximately a midtone similar to the colors we’ll apply to the final version
• Turn the font color white
• Convert the h2 heading to uppercase
• Increase the size of the price table
• Add the necessary padding all around the tables

We can apply many of these touches with the following lines of code. We’ll specify the #signup section as the context for these special table styles:

#signup {
table {
border: 1px solid @table-border-color;
thead th {
text-align: center;
background-color: @gray-light;
color: #fff;
padding-top: 12px;
padding-bottom: 32px;
h2 {
text-transform: uppercase;
}
}
}
}

In short, we’ve accomplished everything except increasing the size of the price tables. We can get started on this by adding the following lines of code, which are still nested within our #signup table selector:

.price {
    font-size: 7em;
    line-height: 1;
}

This yields the following result:

This is close to our desired result, but we need to decrease the size of the dollar sign. To give ourselves control over that character, let’s go to the markup and wrap a span tag around it:

<em class="price"><span>$</span>19</em>

Remember to do the same for the other two tables.

With this new bit of markup in place, we can nest this within our styles for .price:

.price {
...
span {
font-size: .5em;
vertical-align: super;
}

These lines reduce the dollar sign to half its size and align it at the top.

Now to recenter the result, we need to add a bit of negative margin to the parent .price selector:

.price {
margin-left: -0.25em;
...

The following screenshot shows the result:

Styling the table body and foot

By continuing to focus on the styles that apply to all three pricing tables, let’s make the following adjustments:

• Add left and right padding to the list of features
• Stretch the button to full width
• Increase the button size

We can accomplish this by adding the following rules:

#signup {
table {
...
tbody {
td {
padding-left: 16px;
padding-right: 16px;
}
}
a.btn {
.btn-lg;
display: block;
width: 100%;
background-color: @gray-light;
color: #fff;
}
}
}

Save the file, compile it to CSS, and refresh the browser. You should see the following result:

We’re now ready to add styles to differentiate our three packages.