template.html

<!-- From: https://www.jqueryscript.net/table/jQuery-JSON-To-Table-Plugin.html -->
<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Output</title>
      <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
      <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300|Open+Sans+Condensed:300|Open+Sans:300"
         rel="stylesheet">
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script src="./JSON-to-Table.min.1.0.0.js"></script>
      <style>
         body {
         font-family: 'Josefin Sans', sans-serif;
         background-color:#fafafa;
         }
         h1 {
         font-size: 40px;
         color: #08090d;
         text-align: center;
         }
         h1 span {
         font-size: 25px;
         color: #477dd7;
         }
         h2 {
         font-family: "Open Sans Condensed", sans-serif;
         font-size: 18px;
         }
         .margin-bottom {
         margin-bottom: 50px;
         }
         h1 { margin:150px auto 30px auto;}
      </style>
   </head>
   <body>
      <h1>Memoeb</h1>
      <h2>JSON Object variable Example</h2>
      <div id="table-2" class="margin-bottom"></div>
      <script type="text/javascript">
         $(document).ready(function () {
             $.getJSON("sample-data.json", function (data) {
                 $('.table').createTable(data, {
                     // General Style for Table
                     borderWidth: '1px',
                     borderStyle: 'solid',
                     borderColor: '#DDDDDD',
                     fontFamily: 'Verdana, Helvetica, Arial, FreeSans, sans-serif',
         
                     // Table Header Style
                     thBg: '#F3F3F3',
                     thColor: '#0E0E0E',
                     thHeight: '30px',
                     thFontFamily: '"Open Sans Condensed", sans-serif',
                     thFontSize: '14px',
                     thTextTransform: 'capitalize',
         
                     // Table Body/Row Style
                     trBg: '#fff',
                     trColor: '#0E0E0E',
                     trHeight: '25px',
                     trFontFamily: '"Open Sans", sans-serif',
                     trFontSize: '13px',
         
                     // Table Body's Column Style
                     tdPaddingLeft: '10px',
                     tdPaddingRight: '10px'
                 });
             });
             var data = [
         F4743CAD170C9488DEC39344E0CB25ED9CE357A5
         ];
             $('#table-2').createTable(data, {});
         });
      </script>
   </body>
</html>