table sort function not working outside of fiddle

The fiddle below works perfectly but when I try to re-create this in a blank test document, nothing happens. What am I doing wrong?

Here is my fiddle. https://jsfiddle.net/1djad595/2/

This is updated code that I cant get to replicate the success of the fiddle above. .

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />

</head>


<body>
<script>

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 

    </script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js">
</script> 
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 


</body>
</html>

Solution

I think you need to include the script libraries in the code in the correct order first the jQuery libarary and then the tablesorter

If you copy the following code it must work for you:

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

table.tablesorter {
	font-size: 12px;
	background-color: #4D4D4D;
	width: 100%;
	border: 1px solid #000;
}
table.tablesorter th {
	text-align: left;
	padding: 5px;
	background-color: #6E6E6E;
	color: #fff;
}
table.tablesorter td {
	color: #FFF;
	padding: 5px;
}
table.tablesorter .even {
	background-color: #3D3D3D;
}
table.tablesorter .odd {
	background-color: #6E6E6E;
}
table.tablesorter .header {
	background-image: url(bg.png);
	background-repeat: no-repeat;
	border-left: 1px solid #FFF;
	border-right: 1px solid #000;
	border-top: 1px solid #FFF;
	padding-left: 30px;
	padding-top: 8px;
	height: auto;
}
table.tablesorter .headerSortUp {
	background-image: url(asc.png);
	background-repeat: no-repeat;
}
table.tablesorter .headerSortDown {
	background-image: url(desc.png);
	background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js"></script>

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>