Tables II - DreamCodes

Table Styles II

Stylish table styles - grey tones

CSS/JS files (add code to <HEAD> section):


<!-- DC Table Styles II CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/tables2/css/tsc_tables2.css" />

Gradient Table

Features	(dt)	Others
Number of Designs	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 type="text/javascript" src="dreamcodes/jquery.min.js"></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="tsc_tables2_0" cellspacing="0" summary="DT features" style="width:60%;">
  <tr>
    <th>Features</th>
    <th>(dt)</th>
    <th>Others</th>
  </tr>
  <tr>
    <td>Number of Designs</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="tsc_tables2_1" summary="Employee Pay Sheet" style="width:60%;">
    <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="tsc_tables2_2" summary="Employee Pay Sheet" style="width:60%;">
    <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="tsc_tables2_3" summary="Most Favorite Movies" style="width:60%;">
    <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="tsc_tables2_4" summary="Employee Pay Sheet" style="width:60%;">
    <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="tsc_tables2_5" summary="Top Movies" style="width:60%;">
    <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="tsc_tables2_6" summary="Employee Pay Sheet" style="width:60%;">
    <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="tsc_tables2_7" summary="Most Favorite Movies" style="width:60%;">
    <colgroup>
    <col class="tsc_tab2_odd" />
    <col class="tsc_tab2_even" />
    <col class="tsc_tab2_odd" />
    <col class="tsc_tab2_even" />
    </colgroup>
    <thead>
      <tr>
        <th scope="col" class="tsc_tab2_v1">Comedy</th>
        <th scope="col" class="tsc_tab2_v2">Adventure</th>
        <th scope="col" class="tsc_tab2_v1">Action</th>
        <th scope="col" class="tsc_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="tsc_tables2_8" summary="Major IT Company Profits" style="width:60%;">
    <colgroup>
    <col class="tsc_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="tsc_tables2_9" summary="Major IT Company Profits" style="width:60%;">
    <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="tsc_tables2_10" summary="Major IT Company Profits" style="width:60%;">
    <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="tsc_tables2_11" summary="Personal Movie Rating" style="width:60%;">
    <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="tsc_tables2_12" summary="Major IT Company Profits" style="width:60%;">
    <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="tsc_tables2_13" summary="Meeting Results" style="width:60%;">
    <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="tsc_tables2_14" summary="Meeting Results" style="width:60%;">
    <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 -->