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

Table Styles I

Stylish table styles - various colors

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

?
1
2
<!-- DC Table Styles I CSS -->
<link type="text/css" rel="stylesheet" href="dcodes/tables1/css/dc_tables1.css" />

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

?
1
2
<!-- DC Table Styles I CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/tables1/css/dc_tables1.css" />

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:

?
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
<!-- DC Table Styles I:1 Start -->
  <table class="dc_table_s1" cellspacing="0" summary="CPU Comparison" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
<!-- DC Table Styles I:2 Start -->
  <table class="dc_table_s2" summary="Overview of hosting plans" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- DC Table Styles I:3 Start -->
  <table class="dc_table_s3" summary="Sample Table" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- DC Table Styles I:4 Start -->
  <table class="dc_table_s4" summary="Sample Table" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- DC Table Styles I:5 Start -->
  <table class="dc_table_s5" summary="Sample Table" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- DC Table Styles I:6 Start -->
  <table class="dc_table_s6" summary="Sample Table" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- DC Table Styles I:7 Start -->
  <table class="dc_table_s7" summary="Sample Table" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- DC Table Styles I:8 Start -->
  <table class="dc_table_s8" summary="Sample Table" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- DC Table Styles I:9 Start -->
  <table class="dc_table_s9" summary="Sample Table" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- DC Table Styles I:10 Start -->
  <table class="dc_table_s10" summary="Sample Table" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- DC Table Styles I:11 Start -->
  <table class="dc_table_s11" summary="Sample Table" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- DC Table Styles I:12 Start -->
  <table class="dc_table_s12" summary="Sample Table" style="width:80%;">
    <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:

?
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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- DC Table Styles I:13 Start -->
  <table class="dc_table_s13" summary="Sample Table" style="width:80%;">
    <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 -->


© TemplateAccess