Submit your widget

Very beautiful CSS3 Pricing Tables effect

Created 10 years ago   Views 16268   downloads 5253    Author designmodo
Very beautiful CSS3 Pricing Tables effect
View DemoDownload
42
Share |

we’ll learn how to code and style some CSS3 pricing tables from the Impressionist UI, made by Vladimir Kudinov. All said, let’s start the coding…

Step 1 – HTML

We will create a table with the class “pricing-table”, this class will be the base to add our styling. Then we will divide our pricing tables in three parts: the first one, <thead>, will have the title of the plan and the respective price; the second one, <tbody>, will have the features of the plan (for example: bandwidth, disk space, etc.); and finally the third one, <tfoot>, will be the footer with a text description.

<table class="pricing-table">
    <thead>
        <tr class="plan">
            <td class="green">
                <h2>Light</h2>
                <em>Great for small business</em>
            </td>
            <td class="orange">
                <h2>Run</h2>
                <em>Great for small business</em>
            </td>
            <td class="green">
                <h2>Fly</h2>
                <em>Great for small business</em>
            </td>
        </tr>
        <tr class="price">
            <td class="green">
                <p><span>$</span>5</p>
                <span>monthly</span>
                <a href="#">Join</a>
            </td>
            <td class="orange">
                <p><span>$</span>9<span>79</span></p>
                <span>monthly</span>
                <a href="#">Join</a>
            </td>
            <td class="green">
                <p><span>$</span>12</p>
                <span>monthly</span>
                <a href="#">Join</a>
            </td>
        </tr>
    </thead>
 
    <tbody>
        <tr class="clock-icon">
            <td>No Support</td>
            <td>24/7 Tech Support</td>
            <td>24/7 Tech Support</td>
        </tr>
        <tr class="basket-icon">
            <td>Basic Options</td>
            <td>Advanced Options</td>
            <td>Advanced Options</td>
        </tr>
        <tr class="star-icon">
            <td>100GB Storage</td>
            <td>200GB Storage</td>
            <td>500GB Storage</td>
        </tr>
        <tr class="heart-icon">
            <td>1TB Bandwidth</td>
            <td>2TB Bandwidth</td>
            <td>5TB Bandwidth</td>
        </tr>
    </tbody>
 
    <tfoot>
        <tr>
            <td>Known locally as "SoMa", this neighborhood was home to the dot.com boom and boasts.</td>
            <td>
                Known locally as "SoMa", this neighborhood was home to the dot.com boom and boasts.
 
                <div class="table-float">
                    <span class="arrow"></span>
                    <p>while our commercial director was on vacation, we came up with this</p>
                    <p class="big">crazy price</p>
                </div>
            </td>
            <td>Known locally as "SoMa", this neighborhood was home to the dot.com boom and boasts.</td>
        </tr>
    </tfoot>
</table>

Step 2 – Basic CSS

Before starting styling the pricing table, we will add a CSS reset file to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, etc. The CSS reset file that we will be using is this one, made by Eric Meyer.

Then we will set the width for the pricing tables. As we will use three columns, the width will be 670px, but if you will use more or less than three columns you will need to increase or decrease the width value. We’ll also set some basic styles for the table columns. To add the margin between the tables we have to set the <td> to “display: inline-block;”, by setting this property some bugs may appear depending on the content of your table, so if you don’t want the columns spacing you can remove the display property.

Read more:http://designmodo.com/create-css3-pricing-tables/
Tag: css3 table