Pricing Tables

Style 1

EmployeeSalaryBonusSupervisor
Conto Conti $300 $50 Brigg
Manto Manti $150 - Brogg
Montu Montu $200 $35 Bregg
Mintu Mintu $175 $25 Brugg
Get The Code
			<table id="horizontalZebraColor" style="width: 480px; margin: 45px;">
    <thead style="text-align: left;">
        <tr style="text-align: left;">
            <th scope="col" style="text-align: left;">
                Employee</th>
            <th scope="col" style="text-align: left;">
                Salary</th>
            <th scope="col" style="text-align: left;">
                Bonus</th>
            <th scope="col" style="text-align: left;">
                Supervisor</th>
        </tr>
    </thead>
    <tbody style="text-align: left;">
        <tr class="oddRow" style="text-align: left;">
            <td style="text-align: left;">
                Stephen C. Cox</td>
            <td style="text-align: left;">
                $300</td>
            <td style="text-align: left;">
                $50</td>
            <td style="text-align: left;">
                Bob</td>
        </tr>
        <tr style="text-align: left;">
            <td style="text-align: left;">
                Josephin Tan</td>
            <td style="text-align: left;">
                $150</td>
            <td style="text-align: left;">
                -</td>
            <td style="text-align: left;">
                Annie</td>
        </tr>
        <tr class="oddRow" style="text-align: left;">
            <td style="text-align: left;">
                Joyce Ming</td>
            <td style="text-align: left;">
                $200</td>
            <td style="text-align: left;">
                $35</td>
            <td style="text-align: left;">
                Andy</td>
        </tr>
        <tr style="text-align: left;">
            <td style="text-align: left;">
                James A. Pentel</td>
            <td style="text-align: left;">
                $175</td>
            <td style="text-align: left;">
                $25</td>
            <td style="text-align: left;">
                Annie</td>
        </tr>
    </tbody>
</table>

 

 

Style 2

ComedyAdventureActionChildren
Movie A Crentis Mantis Movie E Movie J
Movie B Nulla Lorem Movie F Movie K
Movie C Mansignis Conti Movie G Movie L
Movie D Crento Garto Movie I Movie M
Get The Code
			<table id="verticalZebraColor" style="width: 480px; margin: 45px;">
    <colgroup style="text-align: left;">
        <col class="verticalZebraColor-odd" style="text-align: left;" />
        <col class="verticalZebraColor-even" style="text-align: left;" />
        <col class="verticalZebraColor-odd" style="text-align: left;" />
        <col class="verticalZebraColor-even" style="text-align: left;" />
    </colgroup>
    <thead style="text-align: left;">
        <tr style="text-align: left;">
            <th id="verticalZebraColor-odd" scope="col" style="text-align: left;">
                Comedy</th>
            <th id="verticalZebraColor-even" scope="col" style="text-align: left;">
                Adventure</th>
            <th id="verticalZebraColor-odd" scope="col" style="text-align: left;">
                Action</th>
            <th id="verticalZebraColor-even" scope="col" style="text-align: left;">
                Children</th>
        </tr>
    </thead>
    <tbody style="text-align: left;">
        <tr style="text-align: left;">
            <td style="text-align: left;">
                Scary Movie</td>
            <td style="text-align: left;">
                Indiana Jones</td>
            <td style="text-align: left;">
                The Punisher</td>
            <td style="text-align: left;">
                Wall-E</td>
        </tr>
        <tr style="text-align: left;">
            <td style="text-align: left;">
                Epic Movie</td>
            <td style="text-align: left;">
                Star Wars</td>
            <td style="text-align: left;">
                Bad Boys</td>
            <td style="text-align: left;">
                Madagascar</td>
        </tr>
        <tr style="text-align: left;">
            <td style="text-align: left;">
                Spartan</td>
            <td style="text-align: left;">
                LOTR</td>
            <td style="text-align: left;">
                Die Hard</td>
            <td style="text-align: left;">
                Finding Nemo</td>
        </tr>
        <tr style="text-align: left;">
            <td style="text-align: left;">
                Dr. Dolittle</td>
            <td style="text-align: left;">
                The Mummy</td>
            <td style="text-align: left;">
                300</td>
            <td style="text-align: left;">
                A Bug&#39;s Life</td>
        </tr>
    </tbody>
</table>

 

 

Style 3

CompanyQ1Q2Q3Q4
Company A 20.3 30.5 23.5 40.3
Company B 50.2 40.63 45.23 39.3
Company C 25.4 30.2 33.3 36.7
Company D 20.4 15.6 22.3 29.3
Get The Code
			<table id="oneColumnColor" style="margin: 45px; width: 480px; height: 191px;">
    <colgroup style="text-align: left;">
        <col class="firstColumn" style="text-align: left;" />
    </colgroup>
    <thead style="text-align: left;">
        <tr style="text-align: left;">
            <th class="firstColumnSet" scope="col" style="text-align: left;">
                Company</th>
            <th scope="col" style="text-align: left;">
                Q1</th>
            <th scope="col" style="text-align: left;">
                Q2</th>
            <th scope="col" style="text-align: left;">
                Q3</th>
            <th scope="col" style="text-align: left;">
                Q4</th>
        </tr>
    </thead>
    <tbody style="text-align: left;">
        <tr style="text-align: left;">
            <td class="firstColumnSet" style="text-align: left;">
                Microsoft</td>
            <td style="text-align: left;">
                20.3</td>
            <td style="text-align: left;">
                30.5</td>
            <td style="text-align: left;">
                23.5</td>
            <td style="text-align: left;">
                40.3</td>
        </tr>
        <tr style="text-align: left;">
            <td class="firstColumnSet" style="text-align: left;">
                Google</td>
            <td style="text-align: left;">
                50.2</td>
            <td style="text-align: left;">
                40.63</td>
            <td style="text-align: left;">
                45.23</td>
            <td style="text-align: left;">
                39.3</td>
        </tr>
        <tr style="text-align: left;">
            <td class="firstColumnSet" style="text-align: left;">
                Apple</td>
            <td style="text-align: left;">
                25.4</td>
            <td style="text-align: left;">
                30.2</td>
            <td style="text-align: left;">
                33.3</td>
            <td style="text-align: left;">
                36.7</td>
        </tr>
        <tr style="text-align: left;">
            <td class="firstColumnSet" style="text-align: left;">
                IBM</td>
            <td style="text-align: left;">
                20.4</td>
            <td style="text-align: left;">
                15.6</td>
            <td style="text-align: left;">
                22.3</td>
            <td style="text-align: left;">
                29.3</td>
        </tr>
    </tbody>
</table>

 

Syndicate Feeds

Articles Related Items

Vine Clean Designs

Fusce varius euismod lorem, semper ante ullam corper condi mentum. Lorem ipsum dolor consectetur adipiscing elit ante

Pron et arcu quam. Fusce non magna sed lacus vestibulum ullamcorper. Maecenas justo diam

Romuald Alias Dead-Red

Je suis un Passionné d'informatique et depuis l'achat de la maison je découvre le monde de la domotique