Last active
May 4, 2017 05:24
-
-
Save danielbrinneman/5aca6001537b47cbc73eb0124d5d8d86 to your computer and use it in GitHub Desktop.
I created this to replicate the staff list on a website but only use one page and add one more column for the department that would have a non-sortable table followed by a sortable table.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
<html> | |
<head> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>Directory Table</title> | |
<script src="https://code.jquery.com/jquery.js"></script> | |
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.13.3/jquery.tablesorter.min.js"></script> | |
<style>table,td,th{font:13px/18px verdana,arial,sans-serif;border:1px solid #ddd;border-collapse:collapse}th{background-color:#00718F;color:#ffffff;font-weight:bold}</style> | |
<script type="text/javascript"> | |
$(document).ready(function () { | |
$("#sorttable").tablesorter(); | |
}); | |
</script> | |
</head> | |
<style type="text/css"> | |
tr { height: 25px; } | |
td:first-child { width: 407px; } /* Contact */ | |
td:first-child + td { width: 69px; text-align: center; } /* Extension */ | |
td:first-child + td + td { width: 133px; text-align: center; } /* Direct Line */ | |
td:first-child + td + td + td { width: 133px; text-align: center; } /* Department */ | |
</style> | |
<body> | |
<h2>Staff</h2> | |
<table cellSpacing="0" cellPadding="2" background="" border="1" x:str=""> | |
<thead> | |
<tr > | |
<th>Contact</th> | |
<th>Extension</th> | |
<th>Direct Line</th> | |
<th>Department</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr height="25"> | |
<td><a href="mailto:[email protected]">Office</a></td> | |
<td>1</td> | |
<td >803-</td> | |
<td>General</td> | |
</tr> | |
<tr height="25"> | |
<td><a href="mailto:[email protected]">Maintenance</a></td> | |
<td>10</td> | |
<td>803-</td> | |
<td>Maintenance</td> | |
</tr> | |
<tr height="25"> | |
<td>EMT</td> | |
<td>93</td> | |
<td>803-</td> | |
<td>Emergency</td> | |
</tr> | |
</tbody> | |
</table> | |
<br /><br /> | |
<table cellSpacing="0" cellPadding="2" background="" border="1" x:str="" id="sorttable"> | |
<thead> | |
<tr > | |
<th>Contact</th> | |
<th>Extension</th> | |
<th>Direct Line</th> | |
<th>Department</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr height="25"> | |
<td>Baseball</td> | |
<td>83</td> | |
<td>803-</td> | |
<td>Sports</td> | |
</tr> | |
<tr height="25"> | |
<td>Basketball<a href="mailto:[email protected]">John Doe</a></td> | |
<td>8</td> | |
<td>803-</td> | |
<td>Sports</td> | |
</tr> | |
<tr height="25"> | |
<td>Float</td> | |
<td>45</td> | |
<td>803-</td> | |
<td>Boats</td> | |
</tr> | |
</tbody> | |
</table> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment