Table Styles

Create stylish data & pricing tables quickly with pre-built CSS classes.

Table style 1

Table 1: CPU Comparison
Specs Xeon E5-2687W Core i7 990X Opteron 6274
Brand Intel Intel AMD
Speed 3.10GHz 3.47GHz 2.20Ghz
Cost $1800 $1100 $650
Cpu Mark 17,872 10,550 10,337

View code:


<!-- DC Table Styles I:1 Start -->
  <table class="dc_table_s1" cellspacing="0" summary="CPU Comparison" style="width:100%;">
    <caption>
    Table 1: CPU Comparison
    </caption>
    <tr>
      <th scope="col" abbr="Specs" class="nobg">Specs</th>
      <th scope="col" abbr="Xeon E5-2687W">Xeon E5-2687W</th>
      <th scope="col" abbr=Core i7 990X">Core i7 990X</th>
      <th scope="col" abbr="Opteron 6274">Opteron 6274</th>
    </tr>
    <tr>
      <th scope="row" abbr="Model" class="spec">Brand</th>
      <td>Intel</td>
      <td>Intel</td>
      <td>AMD</td>
    </tr>
    <tr>
      <th scope="row" abbr="Speed" class="specalt">Speed</th>
      <td class="alt">3.10GHz</td>
      <td class="alt">3.47GHz</td>
      <td class="alt">2.20Ghz</td>
    </tr>
    <tr>
      <th scope="row" abbr="Cost" class="spec">Cost</th>
      <td>$1800</td>
      <td>$1100</td>
      <td>$650</td>
    </tr>
    <tr>
      <th scope="row" abbr="Cpu Mark" class="specalt">Cpu Mark</th>
      <td class="alt">17,872</td>
      <td class="alt">10,550</td>
      <td class="alt">10,337</td>
    </tr>
  </table>
<!-- DC Table Styles I:1 End -->

Table style 2

Table 2: Web Hosting Plans
Simple Plan Business Plan Pro Plan
  Simple
$4.95 / month
order now		 Business
$9.95 / month
order now		 Pro
$19.95 / month
order now
Data Transfer 10 GB 50 GB 150 GB
Storage Space 1,000 MB 10,000 MB 20,000 MB
MySQL Databases 5 100 Unlimited
Email Boxes 5 25 Unlimited
Cpanel No Yes Yes

View code:


<!-- DC Table Styles I:2 Start -->
  <table class="dc_table_s2" summary="Overview of hosting plans" style="width:100%;">
    <caption>
    Table 2: Web Hosting Plans
    </caption>
    <thead>
      <tr class="odd">
        <td class="column1"></td>
        <th scope="col" abbr="Simple">Simple Plan</th>
        <th scope="col" abbr="Business">Business Plan</th>
        <th scope="col" abbr="Pro">Pro Plan</th>
      </tr>
    </thead>
    <tfoot>
      <tr class="odd">
        <td class="column1"> </td>
        <th scope="col"><strong>Simple</strong><br />
          <em>$4.95</em> / month<br />
          <a href="#">order now</a></th>
        <th scope="col"><strong>Business</strong><br />
          <em>$9.95</em> / month<br />
          <a href="#">order now</a></th>
        <th scope="col"><strong>Pro</strong><br />
          <em>$19.95</em> / month<br />
          <a href="#">order now</a></th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th scope="row" class="column1">Data Transfer</th>
        <td>10 GB</td>
        <td>50 GB</td>
        <td>150 GB</td>
      </tr>
      <tr class="odd">
        <th scope="row" class="column1">Storage Space</th>
        <td>1,000 MB </td>
        <td>10,000 MB</td>
        <td>20,000 MB</td>
      </tr>
      <tr>
        <th scope="row" class="column1">MySQL Databases</th>
        <td>5</td>
        <td>100</td>
        <td>Unlimited</td>
      </tr>
      <tr class="odd">
        <th scope="row" class="column1">Email Boxes</th>
        <td>5</td>
        <td>25</td>
        <td>Unlimited</td>
      </tr>
      <tr>
        <th scope="row" class="column1">Cpanel</th>
        <td>No</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:2 End -->

Table styles 3

Table 3: Sample Table
Structure Country City Height Built Rank ...
Total 4 buildings
Burj Khalifa UAE Dubai 829m 2010 1 details
Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 details
Taipei 101 Taiwan Taipei 509m 2004 3 details
Financial Center China Shanghai 492m 2008 4 details

View code:


<!-- DC Table Styles I:3 Start -->
  <table class="dc_table_s3" summary="Sample Table" style="width:100%;">
    <caption>
    Table 3: Sample Table
    </caption>
    <thead>
      <tr>
        <th scope="col">Structure</th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        <th scope="col">Height</th>
        <th scope="col">Built</th>
        <th scope="col">Rank</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td colspan="7">4 buildings</td>
      </tr>
    </tfoot>
    <tbody>
      <tr >
        <th scope="row">Burj Khalifa</th>
        <td>UAE</td>
        <td>Dubai</td>
        <td>829m</td>
        <td>2010</td>
        <td>1</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Clock Tower Hotel</th>
        <td>Saudi Arabia</td>
        <td>Mecca</td>
        <td>601m</td>
        <td>2012</td>
        <td>2</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr >
        <th scope="row">Taipei 101</th>
        <td>Taiwan</td>
        <td>Taipei</td>
        <td>509m</td>
        <td>2004</td>
        <td>3</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Financial Center</th>
        <td>China</td>
        <td>Shanghai</td>
        <td>492m</td>
        <td>2008</td>
        <td>4</td>
        <td><a href="#">details</a></td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:3 End -->

Table styles 4

Table 4: Sample Table
Structure Country City Height Built Rank ...
Total 4 buildings
Burj Khalifa UAE Dubai 829m 2010 1 details
Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 details
Taipei 101 Taiwan Taipei 509m 2004 3 details
Financial Center China Shanghai 492m 2008 4 details

View code:


<!-- DC Table Styles I:4 Start -->
  <table class="dc_table_s4" summary="Sample Table" style="width:100%;">
    <caption>
    Table 4: Sample Table
    </caption>
    <thead>
      <tr>
        <th scope="col">Structure</th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        <th scope="col">Height</th>
        <th scope="col">Built</th>
        <th scope="col">Rank</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td colspan="7">4 buildings</td>
      </tr>
    </tfoot>
    <tbody>
      <tr >
        <th scope="row">Burj Khalifa</th>
        <td>UAE</td>
        <td>Dubai</td>
        <td>829m</td>
        <td>2010</td>
        <td>1</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Clock Tower Hotel</th>
        <td>Saudi Arabia</td>
        <td>Mecca</td>
        <td>601m</td>
        <td>2012</td>
        <td>2</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr >
        <th scope="row">Taipei 101</th>
        <td>Taiwan</td>
        <td>Taipei</td>
        <td>509m</td>
        <td>2004</td>
        <td>3</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Financial Center</th>
        <td>China</td>
        <td>Shanghai</td>
        <td>492m</td>
        <td>2008</td>
        <td>4</td>
        <td><a href="#">details</a></td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:4 End -->

Table styles 5

Table 5: Sample Table
Structure Country City Height Built Rank ...
Total 4 buildings
Burj Khalifa UAE Dubai 829m 2010 1 details
Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 details
Taipei 101 Taiwan Taipei 509m 2004 3 details
Financial Center China Shanghai 492m 2008 4 details

View code:


<!-- DC Table Styles I:5 Start -->
  <table class="dc_table_s5" summary="Sample Table" style="width:100%;">
    <caption>
    Table 5: Sample Table
    </caption>
    <thead>
      <tr>
        <th scope="col">Structure</th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        <th scope="col">Height</th>
        <th scope="col">Built</th>
        <th scope="col">Rank</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td colspan="7">4 buildings</td>
      </tr>
    </tfoot>
    <tbody>
      <tr >
        <th scope="row">Burj Khalifa</th>
        <td>UAE</td>
        <td>Dubai</td>
        <td>829m</td>
        <td>2010</td>
        <td>1</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Clock Tower Hotel</th>
        <td>Saudi Arabia</td>
        <td>Mecca</td>
        <td>601m</td>
        <td>2012</td>
        <td>2</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr >
        <th scope="row">Taipei 101</th>
        <td>Taiwan</td>
        <td>Taipei</td>
        <td>509m</td>
        <td>2004</td>
        <td>3</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Financial Center</th>
        <td>China</td>
        <td>Shanghai</td>
        <td>492m</td>
        <td>2008</td>
        <td>4</td>
        <td><a href="#">details</a></td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:5 End -->

Table styles 6

Table 6: Sample Table
Structure Country City M YR # ...
Total 4 buildings
Burj Khalifa UAE Dubai 829m 2010 1 details
Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 details
Taipei 101 Taiwan Taipei 509m 2004 3 details
Financial Center China Shanghai 492m 2008 4 details

View code:


<!-- DC Table Styles I:6 Start -->
  <table class="dc_table_s6" summary="Sample Table" style="width:100%;">
    <caption>
    Table 6: Sample Table
    </caption>
    <thead>
      <tr>
        <th scope="col">Structure</th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        <th scope="col">M</th>
        <th scope="col">YR</th>
        <th scope="col">#</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td colspan="7">4 buildings</td>
      </tr>
    </tfoot>
    <tbody>
      <tr >
        <th scope="row">Burj Khalifa</th>
        <td>UAE</td>
        <td>Dubai</td>
        <td>829m</td>
        <td>2010</td>
        <td>1</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Clock Tower Hotel</th>
        <td>Saudi Arabia</td>
        <td>Mecca</td>
        <td>601m</td>
        <td>2012</td>
        <td>2</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr >
        <th scope="row">Taipei 101</th>
        <td>Taiwan</td>
        <td>Taipei</td>
        <td>509m</td>
        <td>2004</td>
        <td>3</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Financial Center</th>
        <td>China</td>
        <td>Shanghai</td>
        <td>492m</td>
        <td>2008</td>
        <td>4</td>
        <td><a href="#">details</a></td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:6 End -->

Table styles 7

Table 7: Sample Table
Structure Country City Height Built Rank ...
Total 4 buildings
Burj Khalifa UAE Dubai 829m 2010 1 details
Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 details
Taipei 101 Taiwan Taipei 509m 2004 3 details
Financial Center China Shanghai 492m 2008 4 details

View code:


<!-- DC Table Styles I:7 Start -->
  <table class="dc_table_s7" summary="Sample Table" style="width:100%;">
    <caption>
    Table 7: Sample Table
    </caption>
    <thead>
      <tr>
        <th scope="col">Structure</th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        <th scope="col">Height</th>
        <th scope="col">Built</th>
        <th scope="col">Rank</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td colspan="7">4 buildings</td>
      </tr>
    </tfoot>
    <tbody>
      <tr >
        <th scope="row">Burj Khalifa</th>
        <td>UAE</td>
        <td>Dubai</td>
        <td>829m</td>
        <td>2010</td>
        <td>1</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Clock Tower Hotel</th>
        <td>Saudi Arabia</td>
        <td>Mecca</td>
        <td>601m</td>
        <td>2012</td>
        <td>2</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr >
        <th scope="row">Taipei 101</th>
        <td>Taiwan</td>
        <td>Taipei</td>
        <td>509m</td>
        <td>2004</td>
        <td>3</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Financial Center</th>
        <td>China</td>
        <td>Shanghai</td>
        <td>492m</td>
        <td>2008</td>
        <td>4</td>
        <td><a href="#">details</a></td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:7 End -->

Table styles 8

Table 8: Sample Table
Structure Country City Height Built Rank ...
Total 4 buildings
Burj Khalifa UAE Dubai 829m 2010 1 details
Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 details
Taipei 101 Taiwan Taipei 509m 2004 3 details
Financial Center China Shanghai 492m 2008 4 details

View code:


<!-- DC Table Styles I:8 Start -->
  <table class="dc_table_s8" summary="Sample Table" style="width:100%;">
    <caption>
    Table 8: Sample Table
    </caption>
    <thead>
      <tr>
        <th scope="col">Structure</th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        <th scope="col">Height</th>
        <th scope="col">Built</th>
        <th scope="col">Rank</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td colspan="7">4 buildings</td>
      </tr>
    </tfoot>
    <tbody>
      <tr >
        <th scope="row">Burj Khalifa</th>
        <td>UAE</td>
        <td>Dubai</td>
        <td>829m</td>
        <td>2010</td>
        <td>1</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Clock Tower Hotel</th>
        <td>Saudi Arabia</td>
        <td>Mecca</td>
        <td>601m</td>
        <td>2012</td>
        <td>2</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr >
        <th scope="row">Taipei 101</th>
        <td>Taiwan</td>
        <td>Taipei</td>
        <td>509m</td>
        <td>2004</td>
        <td>3</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Financial Center</th>
        <td>China</td>
        <td>Shanghai</td>
        <td>492m</td>
        <td>2008</td>
        <td>4</td>
        <td><a href="#">details</a></td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:8 End -->

Table styles 9

Table 9: Sample Table
Structure Country City Height Built Rank ...
Total 4 buildings
Burj Khalifa UAE Dubai 829m 2010 1 details
Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 details
Taipei 101 Taiwan Taipei 509m 2004 3 details
Financial Center China Shanghai 492m 2008 4 details

View code:


<!-- DC Table Styles I:9 Start -->
  <table class="dc_table_s9" summary="Sample Table" style="width:100%;">
    <caption>
    Table 9: Sample Table
    </caption>
    <thead>
      <tr>
        <th scope="col">Structure</th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        <th scope="col">Height</th>
        <th scope="col">Built</th>
        <th scope="col">Rank</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td colspan="7">4 buildings</td>
      </tr>
    </tfoot>
    <tbody>
      <tr >
        <th scope="row">Burj Khalifa</th>
        <td>UAE</td>
        <td>Dubai</td>
        <td>829m</td>
        <td>2010</td>
        <td>1</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Clock Tower Hotel</th>
        <td>Saudi Arabia</td>
        <td>Mecca</td>
        <td>601m</td>
        <td>2012</td>
        <td>2</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr >
        <th scope="row">Taipei 101</th>
        <td>Taiwan</td>
        <td>Taipei</td>
        <td>509m</td>
        <td>2004</td>
        <td>3</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Financial Center</th>
        <td>China</td>
        <td>Shanghai</td>
        <td>492m</td>
        <td>2008</td>
        <td>4</td>
        <td><a href="#">details</a></td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:9 End -->

Table styles 10

Table 10: Sample Table
Structure Country City Height Built Rank ...
Total 4 buildings
Burj Khalifa UAE Dubai 829m 2010 1 details
Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 details
Taipei 101 Taiwan Taipei 509m 2004 3 details
Financial Center China Shanghai 492m 2008 4 details

View code:


<!-- DC Table Styles I:10 Start -->
  <table class="dc_table_s10" summary="Sample Table" style="width:100%;">
    <caption>
    Table 10: Sample Table
    </caption>
    <thead>
      <tr>
        <th scope="col">Structure</th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        <th scope="col">Height</th>
        <th scope="col">Built</th>
        <th scope="col">Rank</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td colspan="7">4 buildings</td>
      </tr>
    </tfoot>
    <tbody>
      <tr >
        <th scope="row">Burj Khalifa</th>
        <td>UAE</td>
        <td>Dubai</td>
        <td>829m</td>
        <td>2010</td>
        <td>1</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Clock Tower Hotel</th>
        <td>Saudi Arabia</td>
        <td>Mecca</td>
        <td>601m</td>
        <td>2012</td>
        <td>2</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr >
        <th scope="row">Taipei 101</th>
        <td>Taiwan</td>
        <td>Taipei</td>
        <td>509m</td>
        <td>2004</td>
        <td>3</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Financial Center</th>
        <td>China</td>
        <td>Shanghai</td>
        <td>492m</td>
        <td>2008</td>
        <td>4</td>
        <td><a href="#">details</a></td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:10 End -->

Table styles 11

Table 11: Sample Table
Structure Country City Height Built Rank ...
Total 4 buildings
Burj Khalifa UAE Dubai 829m 2010 1 details
Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 details
Taipei 101 Taiwan Taipei 509m 2004 3 details
Financial Center China Shanghai 492m 2008 4 details

View code:


<!-- DC Table Styles I:11 Start -->
  <table class="dc_table_s11" summary="Sample Table" style="width:100%;">
    <caption>
    Table 11: Sample Table
    </caption>
    <thead>
      <tr>
        <th scope="col">Structure</th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        <th scope="col">Height</th>
        <th scope="col">Built</th>
        <th scope="col">Rank</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td colspan="7">4 buildings</td>
      </tr>
    </tfoot>
    <tbody>
      <tr >
        <th scope="row">Burj Khalifa</th>
        <td>UAE</td>
        <td>Dubai</td>
        <td>829m</td>
        <td>2010</td>
        <td>1</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Clock Tower Hotel</th>
        <td>Saudi Arabia</td>
        <td>Mecca</td>
        <td>601m</td>
        <td>2012</td>
        <td>2</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr >
        <th scope="row">Taipei 101</th>
        <td>Taiwan</td>
        <td>Taipei</td>
        <td>509m</td>
        <td>2004</td>
        <td>3</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Financial Center</th>
        <td>China</td>
        <td>Shanghai</td>
        <td>492m</td>
        <td>2008</td>
        <td>4</td>
        <td><a href="#">details</a></td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:11 End -->

Table styles 12

Table 12: Sample Table
Structure Country City Height Built Rank ...
Total 4 buildings
Burj Khalifa UAE Dubai 829m 2010 1 details
Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 details
Taipei 101 Taiwan Taipei 509m 2004 3 details
Financial Center China Shanghai 492m 2008 4 details

View code:


<!-- DC Table Styles I:12 Start -->
  <table class="dc_table_s12" summary="Sample Table" style="width:100%;">
    <caption>
    Table 12: Sample Table
    </caption>
    <thead>
      <tr>
        <th scope="col">Structure</th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        <th scope="col">Height</th>
        <th scope="col">Built</th>
        <th scope="col">Rank</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td colspan="7">4 buildings</td>
      </tr>
    </tfoot>
    <tbody>
      <tr >
        <th scope="row">Burj Khalifa</th>
        <td>UAE</td>
        <td>Dubai</td>
        <td>829m</td>
        <td>2010</td>
        <td>1</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Clock Tower Hotel</th>
        <td>Saudi Arabia</td>
        <td>Mecca</td>
        <td>601m</td>
        <td>2012</td>
        <td>2</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr >
        <th scope="row">Taipei 101</th>
        <td>Taiwan</td>
        <td>Taipei</td>
        <td>509m</td>
        <td>2004</td>
        <td>3</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Financial Center</th>
        <td>China</td>
        <td>Shanghai</td>
        <td>492m</td>
        <td>2008</td>
        <td>4</td>
        <td><a href="#">details</a></td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:12 End -->

Table styles 13

Table 13: Sample Table
Structure Country City Height Built Rank ...
Total 4 buildings
Burj Khalifa UAE Dubai 829m 2010 1 details
Clock Tower Hotel Saudi Arabia Mecca 601m 2012 2 details
Taipei 101 Taiwan Taipei 509m 2004 3 details
Financial Center China Shanghai 492m 2008 4 details

Images, view code:


<!-- DC Table Styles I:13 Start -->
  <table class="dc_table_s13" summary="Sample Table" style="width:100%;">
    <caption>
    Table 13: Sample Table
    </caption>
    <thead>
      <tr>
        <th scope="col">Structure</th>
        <th scope="col">Country</th>
        <th scope="col">City</th>
        <th scope="col">Height</th>
        <th scope="col">Built</th>
        <th scope="col">Rank</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th scope="row">Total</th>
        <td colspan="7">4 buildings</td>
      </tr>
    </tfoot>
    <tbody>
      <tr >
        <th scope="row">Burj Khalifa</th>
        <td>UAE</td>
        <td>Dubai</td>
        <td>829m</td>
        <td>2010</td>
        <td>1</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Clock Tower Hotel</th>
        <td>Saudi Arabia</td>
        <td>Mecca</td>
        <td>601m</td>
        <td>2012</td>
        <td>2</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr >
        <th scope="row">Taipei 101</th>
        <td>Taiwan</td>
        <td>Taipei</td>
        <td>509m</td>
        <td>2004</td>
        <td>3</td>
        <td><a href="#">details</a></td>
      </tr>
      <tr class="odd">
        <th scope="row">Financial Center</th>
        <td>China</td>
        <td>Shanghai</td>
        <td>492m</td>
        <td>2008</td>
        <td>4</td>
        <td><a href="#">details</a></td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles I:13 End -->


Gradient Table


Features (DC) Others
Number of Codes 7,000 Single Buy
XHTML Slicing Yes Yes
Number of Shortcodes 1500 40
Sliders 20 3

View code:


<!-- jQuery Library (skip this step if already called on page ) -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <!-- (do not call twice) -->

<!-- DC Table Styles II:Gradient Settings -->
<script type="text/javascript">
 $(function() {
		/* For zebra striping */
        $("table tr:nth-child(odd)").addClass("odd-row");
		/* For cell text alignment */
		$("table td:first-child, table th:first-child").addClass("first");
		/* For removing the last border */
		$("table td:last-child, table th:last-child").addClass("last");
});
</script>

<!-- DC Table Styles II:Gradient Start -->
<table class="dc_tables2_0" cellspacing="0" summary="The Features" style="width:100%;">
  <tr>
    <th>Features</th>
    <th>(DC)</th>
    <th>Others</th>
  </tr>
  <tr>
    <td>Number of Codes</td>
    <td>7,000</td>
    <td>Single Buy</td>
  </tr>
  <tr>
    <td>XHTML Slicing</td>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <td>Number of Shortcodes</td>
    <td>1500</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Sliders</td>
    <td>20</td>
    <td>3</td>
  </tr>
</table>
<!-- DC Table Styles II:Gradient End -->

Table style 1

Employee Salary Bonus Supervisor
John D. Wells $300 $50 Bob
Fred Max $150 - Annie
Sam Cook $200 $35 Andy
Tom H. Williams $175 $25 Annie

View code:


<!-- DC Table Styles II:1 Start -->
  <table class="dc_tables2_1" summary="Employee Pay Sheet" style="width:100%;">
    <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>
        <td>John D. Wells</td>
        <td>$300</td>
        <td>$50</td>
        <td>Bob</td>
      </tr>
      <tr>
        <td>Fred Max</td>
        <td>$150</td>
        <td>-</td>
        <td>Annie</td>
      </tr>
      <tr>
        <td>Sam Cook</td>
        <td>$200</td>
        <td>$35</td>
        <td>Andy</td>
      </tr>
      <tr>
        <td>Tom H. Williams</td>
        <td>$175</td>
        <td>$25</td>
        <td>Annie</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:1 End -->

Table style 2

Employee Salary Bonus Supervisor
John D. Wells $300 $50 Bob
Fred Max $150 - Annie
Sam Cook $200 $35 Andy
Tom H. Williams $175 $25 Annie

View code:


<!-- DC Table Styles II:2 Start -->
  <table class="dc_tables2_2" summary="Employee Pay Sheet" style="width:100%;">
    <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>
        <td>John D. Wells</td>
        <td>$300</td>
        <td>$50</td>
        <td>Bob</td>
      </tr>
      <tr>
        <td>Fred Max</td>
        <td>$150</td>
        <td>-</td>
        <td>Annie</td>
      </tr>
      <tr>
        <td>Sam Cook</td>
        <td>$200</td>
        <td>$35</td>
        <td>Andy</td>
      </tr>
      <tr>
        <td>Tom H. Williams</td>
        <td>$175</td>
        <td>$25</td>
        <td>Annie</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:2 End -->

Table style 3

Comedy Adventure Action Children
Scary Movie Indiana Jones Inception Wall-E
Epic Movie Star Wars The Avengers Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle John Carter Prometheus A Bug's Life

View code:


<!-- DC Table Styles II:3 Start -->
  <table class="dc_tables2_3" summary="Most Favorite Movies" style="width:100%;">
    <thead>
      <tr>
        <th scope="col">Comedy</th>
        <th scope="col">Adventure</th>
        <th scope="col">Action</th>
        <th scope="col">Children</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Scary Movie</td>
        <td>Indiana Jones</td>
        <td>Inception</td>
        <td>Wall-E</td>
      </tr>
      <tr>
        <td>Epic Movie</td>
        <td>Star Wars</td>
        <td>The Avengers</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>John Carter</td>
        <td>Prometheus</td>
        <td>A Bug's Life</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:3 End -->

Table style 4

Employee Salary Bonus Supervisor
John D. Wells $300 $50 Bob
Fred Max $150 - Annie
Sam Cook $200 $35 Andy
Tom H. Williams $175 $25 Annie

View code:


<!-- DC Table Styles II:4 Start -->
  <table class="dc_tables2_4" summary="Employee Pay Sheet" style="width:100%;">
    <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>
        <td>John D. Wells</td>
        <td>$300</td>
        <td>$50</td>
        <td>Bob</td>
      </tr>
      <tr>
        <td>Fred Max</td>
        <td>$150</td>
        <td>-</td>
        <td>Annie</td>
      </tr>
      <tr>
        <td>Sam Cook</td>
        <td>$200</td>
        <td>$35</td>
        <td>Andy</td>
      </tr>
      <tr>
        <td>Tom H. Williams</td>
        <td>$175</td>
        <td>$25</td>
        <td>Annie</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:4 End -->

Table style 5

Comedy Adventure Action Children
Scary Movie Indiana Jones Inception Wall-E
Epic Movie Star Wars The Avengers Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle John Carter Prometheus A Bug's Life

View code:


<!-- DC Table Styles II:5 Start -->
  <table class="dc_tables2_5" summary="Top Movies" style="width:100%;">
    <thead>
      <tr>
        <th scope="col">Comedy</th>
        <th scope="col">Adventure</th>
        <th scope="col">Action</th>
        <th scope="col">Children</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Scary Movie</td>
        <td>Indiana Jones</td>
        <td>Inception</td>
        <td>Wall-E</td>
      </tr>
      <tr>
        <td>Epic Movie</td>
        <td>Star Wars</td>
        <td>The Avengers</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>John Carter</td>
        <td>Prometheus</td>
        <td>A Bug's Life</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:5 End -->

Table style 6

Employee Salary Bonus Supervisor
John D. Wells $300 $50 Bob
Fred Max $150 - Annie
Sam Cook $200 $35 Andy
Tom H. Williams $175 $25 Annie

View code:


<!-- DC Table Styles II:6 Start -->
  <table class="dc_tables2_6" summary="Employee Pay Sheet" style="width:100%;">
    <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="odd">
        <td>John D. Wells</td>
        <td>$300</td>
        <td>$50</td>
        <td>Bob</td>
      </tr>
      <tr>
        <td>Fred Max</td>
        <td>$150</td>
        <td>-</td>
        <td>Annie</td>
      </tr>
      <tr class="odd">
        <td>Sam Cook</td>
        <td>$200</td>
        <td>$35</td>
        <td>Andy</td>
      </tr>
      <tr>
        <td>Tom H. Williams</td>
        <td>$175</td>
        <td>$25</td>
        <td>Annie</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:6 End -->

Table style 7

Comedy Adventure Action Children
Scary Movie Indiana Jones Inception Wall-E
Epic Movie Star Wars The Avengers Madagascar
Spartan LOTR Die Hard Finding Nemo
Dr. Dolittle John Carter Prometheus A Bug's Life

View code:


<!-- DC Table Styles II:7 Start -->
  <table class="dc_tables2_7" summary="Most Favorite Movies" style="width:100%;">
    <colgroup>
    <col class="dc_tab2_odd" />
    <col class="dc_tab2_even" />
    <col class="dc_tab2_odd" />
    <col class="dc_tab2_even" />
    </colgroup>
    <thead>
      <tr>
        <th scope="col" class="dc_tab2_v1">Comedy</th>
        <th scope="col" class="dc_tab2_v2">Adventure</th>
        <th scope="col" class="dc_tab2_v1">Action</th>
        <th scope="col" class="dc_tab2_v2">Children</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Scary Movie</td>
        <td>Indiana Jones</td>
        <td>Inception</td>
        <td>Wall-E</td>
      </tr>
      <tr>
        <td>Epic Movie</td>
        <td>Star Wars</td>
        <td>The Avengers</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>John Carter</td>
        <td>300</td>
        <td>A Bug's Life</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:7 End -->

Table style 8

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 code:


<!-- DC Table Styles II:8 Start -->
  <table class="dc_tables2_8" summary="Major IT Company Profits" style="width:100%;">
    <colgroup>
    <col class="dc_first" />
    </colgroup>
    <thead>
      <tr>
        <th 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>Microsoft</td>
        <td>20.3</td>
        <td>30.5</td>
        <td>23.5</td>
        <td>40.3</td>
      </tr>
      <tr>
        <td>Google</td>
        <td>50.2</td>
        <td>40.63</td>
        <td>45.23</td>
        <td>39.3</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>25.4</td>
        <td>30.2</td>
        <td>33.3</td>
        <td>36.7</td>
      </tr>
      <tr>
        <td>IBM</td>
        <td>20.4</td>
        <td>15.6</td>
        <td>22.3</td>
        <td>29.3</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:8 End -->

Table style 9

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 code:


<!-- DC Table Styles II:9 Start -->
  <table class="dc_tables2_9" summary="Major IT Company Profits" style="width:100%;">
    <thead>
      <tr>
        <th 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>Microsoft</td>
        <td>20.3</td>
        <td>30.5</td>
        <td>23.5</td>
        <td>40.3</td>
      </tr>
      <tr>
        <td>Google</td>
        <td>50.2</td>
        <td>40.63</td>
        <td>45.23</td>
        <td>39.3</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>25.4</td>
        <td>30.2</td>
        <td>33.3</td>
        <td>36.7</td>
      </tr>
      <tr>
        <td>IBM</td>
        <td>20.4</td>
        <td>15.6</td>
        <td>22.3</td>
        <td>29.3</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:9 End -->

Table style 10

Company Q1 Q2 Q3 Q4
The above data is fictional.
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 code:


<!-- DC Table Styles II:10 Start -->
  <table class="dc_tables2_10" summary="Major IT Company Profits" style="width:100%;">
    <thead>
      <tr>
        <th 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>
    <tfoot>
      <tr>
        <td colspan="5"><em>The above data is fictional.</em></td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Microsoft</td>
        <td>20.3</td>
        <td>30.5</td>
        <td>23.5</td>
        <td>40.3</td>
      </tr>
      <tr>
        <td>Google</td>
        <td>50.2</td>
        <td>40.63</td>
        <td>45.23</td>
        <td>39.3</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>25.4</td>
        <td>30.2</td>
        <td>33.3</td>
        <td>36.7</td>
      </tr>
      <tr>
        <td>IBM</td>
        <td>20.4</td>
        <td>15.6</td>
        <td>22.3</td>
        <td>29.3</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:10 End -->

Table style 11

Favorite Great Nice Bad
Inception Bourne Ultimatum Transformers Ali
The Big Fish John Carter Apocalypto Monster
Shawshank Redemption The Avengers Indiana Jones Dead or Alive
Greatest Story Ever Told I Am Legend Star Wars Saw 3

View code:


<!-- DC Table Styles II:11 Start -->
  <table class="dc_tables2_11" summary="Personal Movie Rating" style="width:100%;">
    <thead>
      <tr>
        <th scope="col">Favorite</th>
        <th scope="col">Great</th>
        <th scope="col">Nice</th>
        <th scope="col">Bad</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Inception</td>
        <td>Bourne Ultimatum</td>
        <td>Transformers</td>
        <td>Ali</td>
      </tr>
      <tr>
        <td>The Big Fish</td>
        <td>John Carter</td>
        <td>Apocalypto</td>
        <td>Monster</td>
      </tr>
      <tr>
        <td>Shawshank Redemption</td>
        <td>The Avengers</td>
        <td>Indiana Jones</td>
        <td>Dead or Alive</td>
      </tr>
      <tr>
        <td>Greatest Story Ever Told</td>
        <td>I Am Legend</td>
        <td>Star Wars</td>
        <td>Saw 3</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:11 End -->

Table style 12

Company Q1 Q2 Q3 Q4
Above data is fictional  
Microsoft 20.3 30.5 23.5 40.3
Google 7.25 8.6 9.5 11.5
Apple 25.4 30.2 33.3 36.7
IBM 22.4 21.6 20.9 23.3

View code:


<!-- DC Table Styles II:12 Start -->
  <table class="dc_tables2_12" summary="Major IT Company Profits" style="width:100%;">
    <thead>
      <tr>
        <th scope="col" class="rounded-company">Company</th>
        <th scope="col" class="rounded-q1">Q1</th>
        <th scope="col" class="rounded-q2">Q2</th>
        <th scope="col" class="rounded-q3">Q3</th>
        <th scope="col" class="rounded-q4">Q4</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="4" class="rounded-foot-left"><em>Above data is fictional</em></td>
        <td class="rounded-foot-right"> </td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Microsoft</td>
        <td>20.3</td>
        <td>30.5</td>
        <td>23.5</td>
        <td>40.3</td>
      </tr>
      <tr>
        <td>Google</td>
        <td>7.25</td>
        <td>8.6</td>
        <td>9.5</td>
        <td>11.5</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>25.4</td>
        <td>30.2</td>
        <td>33.3</td>
        <td>36.7</td>
      </tr>
      <tr>
        <td>IBM</td>
        <td>22.4</td>
        <td>21.6</td>
        <td>20.9</td>
        <td>23.3</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:12 End -->

Table style 13

Employee Division Suggestions
Top division: marketing
John D. Wells Marketing Make discount offers
Fred Max Advertising Give bonuses
Sam Cook Marketing New designs
Tom H. Williams Marketing Better Packaging

View code:


<!-- DC Table Styles II:13 Start -->
  <table class="dc_tables2_13" summary="Meeting Results" style="width:100%;">
    <thead>
      <tr>
        <th scope="col">Employee</th>
        <th scope="col">Division</th>
        <th scope="col">Suggestions</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="4">Top division: marketing</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>John D. Wells</td>
        <td>Marketing</td>
        <td>Make discount offers</td>
      </tr>
      <tr>
        <td>Fred Max</td>
        <td>Advertising</td>
        <td>Give bonuses</td>
      </tr>
      <tr>
        <td>Sam Cook</td>
        <td>Marketing</td>
        <td>New designs</td>
      </tr>
      <tr>
        <td>Tom H. Williams</td>
        <td>Marketing</td>
        <td>Better Packaging</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:13 End -->

Table style 14

Employee Division Suggestions Rating
Total of all ratings 24.00
John D. Wells Marketing Make discount offers 3/10
Fred Max Advertising Give bonuses 5/10
Sam Cook Marketing New designs 8/10
Tom H. Williams Marketing Better Packaging 8/10

View code:


<!-- DC Table Styles II:14 Start -->
  <table class="dc_tables2_14" summary="Meeting Results" style="width:100%;">
    <thead>
      <tr>
        <th scope="col">Employee</th>
        <th scope="col">Division</th>
        <th scope="col">Suggestions</th>
        <th scope="col">Rating</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="4">Total of all ratings 24.00</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>John D. Wells</td>
        <td>Marketing</td>
        <td>Make discount offers</td>
        <td>3/10</td>
      </tr>
      <tr>
        <td>Fred Max</td>
        <td>Advertising</td>
        <td>Give bonuses</td>
        <td>5/10</td>
      </tr>
      <tr>
        <td>Sam Cook</td>
        <td>Marketing</td>
        <td>New designs</td>
        <td>8/10</td>
      </tr>
      <tr>
        <td>Tom H. Williams</td>
        <td>Marketing</td>
        <td>Better Packaging</td>
        <td>8/10</td>
      </tr>
    </tbody>
  </table>
<!-- DC Table Styles II:14 End -->