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="#"></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 -->