-
Notifications
You must be signed in to change notification settings - Fork 4
/
tablesorter.html
executable file
·136 lines (130 loc) · 2.67 KB
/
tablesorter.html
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<html>
<head>
<title>Table Sorter Test Page</title>
<script type="text/javascript" src="tablesorter.js"></script>
<style>
tfoot td, thead td{
background-color: #dddddd;
}
td, th{
border: 1px solid;
padding: 3px;
}
table{
border: 1px solid;
}
</style>
</head>
<body>
<h1>Table Sorter Test Page</h1>
<p>
This is the test page for the Table Sorter script. Click the 'Make Sortable' button below to try it out.
</p>
<button onclick="processAllTables()">Make Sortable</button>
<h2>Table with TR/TH and TR/TD structure</h2>
<table>
<tr>
<th>Country</th>
<th>Capital City</th>
<th>Population</th>
<th>Penetration</th>
</tr>
<tr>
<td>United Kingdom</td>
<td>London</td>
<td>59000000</td>
<td>12.4%</td>
</tr>
<tr>
<td>Czech Republic</td>
<td>Prague</td>
<td>10000000</td>
<td>23.9%</td>
</tr>
<tr>
<td colspan="2">Vatican City</td>
<td>12</td>
<td>8%</td>
</tr>
<tr>
<td>Antarctica</td>
<td>None</td>
<td colspan="2">0</td>
</tr>
</table>
<h2>Table with THEAD/TR/TD and TBODY/TR/TD and TFOOT/TR/TD structure</h2>
<table>
<thead>
<tr>
<td>Country</td>
<td>Capital City</td>
<td>Population</td>
<td>Penetration</td>
</tr>
</thead>
<tbody>
<tr>
<td>United Kingdom</td>
<td>London</td>
<td>59000000</td>
<td>12.4%</td>
</tr>
<tr>
<td>Czech Republic</td>
<td>Prague</td>
<td>10000000</td>
<td>23.9%</td>
</tr>
<tr>
<td colspan="2">Vatican City</td>
<td>12</td>
<td>8%</td>
</tr>
<tr>
<td>Antarctica</td>
<td>None</td>
<td colspan="2">0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Country</td>
<td>Capital City</td>
<td>Population</td>
<td>Penetration</td>
</tr>
</tfoot>
</table>
<h2>Table with cells that contain markup</h2>
<table>
<tr>
<th>Country</th>
<th>Capital City</th>
<th>Population</th>
<th>Penetration</th>
</tr>
<tr>
<td><b>United</b> <i>Kingdom</i></td>
<td>London</td>
<td>59000000</td>
<td>12.4%</td>
</tr>
<tr>
<td>Czech Republic</td>
<td><blink>Prague</blink></td>
<td><a href="#">10000000</a></td>
<td><strong><em>23.9%</em></strong></td>
</tr>
<tr>
<td colspan="2"><marquee>Vatican City</marquee></td>
<td>12</td>
<td>8%</td>
</tr>
<tr>
<td><span style="color: blue">Antarctica</span></td>
<td>None</td>
<td colspan="2">0</td>
</tr>
</table>
</body>
</html>