Table Style
Ut per verterem incorrupte delicatissimi, graecis scripserit in mea, duo no rebum petentium torquatos. Fugit consul ex vel, mei laudem scribentur an. Ex has munere detraxit comprehensam. Vidit periculis no usu, sonet homero usu ei. Pro at accommodare mediocritatem, ei rebum aliquid commune nec, sea ut solet placerat. Ei mea illud summo corrumpit. Id sea omnium habemus.
- Details
- Hits: 208
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 |
<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 |
<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's Life</td> </tr> </tbody> </table>
Style 3
| Company | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
| 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 |
<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>














Features 