Intermezzo

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

 


 

Our Blog

  • 1
  • 2
  • 3

Modern Interior Design

Modern Interior Design

Lorem ipsum ad iracundia adolescens abhorreant mei. Ad usu eruditi argumentum. Probo admodum patrioque at sit. Vim ei deseruisse expetendis, mea ea autem summo, ea adhuc audiam deserunt sit. Fierent...

Read more

Trend Office Building

Trend Office Building

Lorem ipsum ad iracundia adolescens abhorreant mei. Ad usu eruditi argumentum. Probo admodum patrioque at sit. Vim ei deseruisse expetendis, mea ea autem summo, ea adhuc audiam deserunt sit. Fierent...

Read more

Appartement Buildings

Appartement Buildings

Lorem ipsum ad iracundia adolescens abhorreant mei. Ad usu eruditi argumentum. Probo admodum patrioque at sit. Vim ei deseruisse expetendis, mea ea autem summo, ea adhuc audiam deserunt sit. Fierent...

Read more

Member Login

You are here: Home Typography Table Style