This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Table Styles II

Stylish table styles - grey tones

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

1
2
<!-- DC Table Styles II CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/tables2/css/dc_tables2.css" />

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

1
2
<!-- DC Table Styles II CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/tables2/css/dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/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="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- DC Table Styles II:1 Start -->
  <table class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- DC Table Styles II:2 Start -->
  <table class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- DC Table Styles II:3 Start -->
  <table class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- DC Table Styles II:4 Start -->
  <table class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- DC Table Styles II:5 Start -->
  <table class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- DC Table Styles II:6 Start -->
  <table class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!-- DC Table Styles II:7 Start -->
  <table class="dc_tables2_7" summary="Most Favorite Movies" style="width:60%;">
    <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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!-- DC Table Styles II:8 Start -->
  <table class="dc_tables2_8" summary="Major IT Company Profits" style="width:60%;">
    <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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!-- DC Table Styles II:9 Start -->
  <table class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!-- DC Table Styles II:10 Start -->
  <table class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- DC Table Styles II:11 Start -->
  <table class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!-- DC Table Styles II:12 Start -->
  <table class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- DC Table Styles II:13 Start -->
  <table class="dc_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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!-- DC Table Styles II:14 Start -->
  <table class="dc_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 -->


© TemplateAccess