Client Login

Enterprise Pro

Profile

Layout

Menu Style

Cpanel
You are here: Home Typography Table Style

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

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 Sytle 1

<table id="horizontalZebraColor" style="width: 480px; margin: 45px 45px 45px 45px;">
    <thead>
        <tr>
           <th scope="col">Employee</th>
           <th scope="col">Salary</th>
           <th scope="col">Bonus</th>
           <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
         <tr class="oddRow">
             <td>Stephen C. Cox</td>
             <td>$300</td>
             <td>$50</td>
             <td>Bob</td>
        </tr>
        <tr>
             <td>Josephin Tan</td>
             <td>$150</td>
             <td>-</td>
             <td>Annie</td>
        </tr>
        <tr class="oddRow">
             <td>Joyce Ming</td>
             <td>$200</td>
             <td>$35</td>
             <td>Andy</td>
        </tr>
        <tr>
             <td>James A. Pentel</td>
             <td>$175</td>
             <td>$25</td>
             <td>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 Sytle 2

<table id="verticalZebraColor" style="width: 480px; margin: 45px 45px 45px 45px;">
       <colgroup>
             <col class="verticalZebraColor-odd" />
             <col class="verticalZebraColor-even" />
             <col class="verticalZebraColor-odd" />
             <col class="verticalZebraColor-even" />
       </colgroup>
       <thead>
           <tr>
               <th scope="col" id="verticalZebraColor-odd">Comedy</th>
               <th scope="col" id="verticalZebraColor-even">Adventure</th>
               <th scope="col" id="verticalZebraColor-odd">Action</th>
               <th scope="col" id="verticalZebraColor-even">Children</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>Scary Movie</td>
               <td>Indiana Jones</td>
               <td>The Punisher</td>
               <td>Wall-E</td>
           </tr>
           <tr>
               <td>Epic Movie</td>
               <td>Star Wars</td>
               <td>Bad Boys</td>
               <td>Madagascar</td>
           </tr>
           <tr>
               <td>Spartan</td>
               <td>LOTR</td>
               <td>Die Hard</td>
               <td>Finding Nemo</td>
           </tr>
           <tr>
               <td>Dr. Dolittle</td>
               <td>The Mummy</td>
               <td>300</td>
               <td>A Bug'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 Sytle 3

<table id="oneColumnColor" style="width: 480px; margin: 45px 45px 45px 45px;">
   <colgroup>
         <col class="firstColumn" />
   </colgroup>
   <thead>
       <tr>
           <th class="firstColumnSet" scope="col">Company</th>
           <th scope="col">Q1</th>
           <th scope="col">Q2</th>
           <th scope="col">Q3</th>
           <th scope="col">Q4</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td class="firstColumnSet">Microsoft</td>
          <td>20.3</td>
          <td>30.5</td>
          <td>23.5</td>
          <td>40.3</td>
      </tr>
      <tr>
          <td class="firstColumnSet">Google</td>
          <td>50.2</td>
          <td>40.63</td>
          <td>45.23</td>
          <td>39.3</td>
      </tr>
      <tr>
          <td class="firstColumnSet">Apple</td>
          <td>25.4</td>
          <td>30.2</td>
          <td>33.3</td>
          <td>36.7</td>
      </tr>
      <tr>
          <td class="firstColumnSet">IBM</td>
          <td>20.4</td>
          <td>15.6</td>
          <td>22.3</td>
          <td>29.3</td>
      </tr>
  </tbody>
</table>

 


 

All About Enterprise Pro

  • Our Location
  • About Company
  • Our Strategy
  • Our business

  Monday - Friday  |   8am - 11pm              
  0878 - 976553576

Consectetuer ipsum neque. Cum sociis natoque penatibus et magnis dis parturien montes, sei, nascetur ridiculus mus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque.

penatibus eti magnis dis parturient montes, nasc etur ridiculus mu dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Lorem ipsum dolor sit ami lomet, consectetuer adipiscing elit. Fusce anequi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Melin Integer urna. Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturien montes, sei, nascetur ridiculus mus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus eti magnis dis parturient montes, nasc etur ridiculus mus. Lorem.

ipsum dolor sit amet, consectetuer adipiscing elit. Me Lorem ipsum dolor sit amet Integer urna. Aenean tristique. Lorem ipsum dolor sitan, consectetuer adipiscinguni elit. Fusce a neque penatibus et magnis dis parturient montes. Aenean tristique. Fusce a neque.

Strategy nasc etur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Me Lorem ipsum dolor sit amet Integer urna. Aenean tristique. Lorem ipsum dolor sitan.

 

consectetuer adipiscinguni elit. Fusce a neque penatibus et magnis dis parturient montes. Aenean tristique. Fusce a neque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aenean tristique. Lorem ipsum dolor sit ami lomet, consectetuer adipiscing elit. Fusce anequi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Melin Integer urna.
Aenean tristique. Fusce a neque. Cum sociis natoque penatibus et magnis dis parturien montes, sei.nascetur ridiculus mus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus eti magnis dis parturient montes. nasc etur ridiculus mus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Me Lorem ipsum dolor sit amet Integer urna.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer urna. Aen ean tristique. Lorem ipsum dolor sit ami lomet, consectetuer adipiscing.

PROJECTS

Cum sociis natoque penatibus et magnis dis parturien montes, sei, nascetur ridiculus mus.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque pen.

TECHNOLOGY

Lridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Me Lorem ipsum dolor sit amet Integer urna. Aenean tristique. Lorem ipsum dolor sitan, con.

SERVICE

Fusce a neque penatibus et magnis dis parturient montes. Aenean tristique. Fusce a neque dolor sit amet Integer urna. Aenean tristique.