Style 1

Employee Salary Bonus Supervisor
Stephen C. Cox $300 $50 Bob
Josephin Tan $150 - Annie
Joyce Ming $200 $35 Andy
James A. Pentel $175 $25 Annie
View 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

Comedy Adventure Action Children
Scary Movie Indiana Jones The Punisher Wall-E
Epic Movie Star Wars Bad Boys Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle The Mummy 300 A Bug's Life
View 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

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
View 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>