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