A Demo of loading and presenting JSON data from external file

jQuery, CSS and 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">
    <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="js/json-to-table/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>
<h2>A Demo of JSON to table with External JSON data file</h2>
<div class="json-table"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $.getJSON("js/json-to-table/sample-data.json", function (data) {
            $('.json-table').createTable(data, {
                // Specify the style of the table by plug-in options
                borderWidth: '2px',
                borderColor: '#356A6A',
                borderStyle: 'dotted',
                fontFamily: 'Arial, Verdana, sans-serif',

                // The options for specifying the table header
                thBg: '#C5E2E2',
                thColor: '#1F3D3D',
                thHeight: '29px',
                thFontFamily: 'Verdana, sans-serif',
                thFontSize: '13px',
                thTextTransform: 'capitalize',

                // Seting the style of table body and data
                trBg: '#F7FBFB',
                trColor: '#091111',
                trHeight: '23px',
                trFontFamily: '"Open Sans", sans-serif',
                trFontSize: '12px',

                // Table Body's Column Style
                tdPaddingLeft: '8px',
                tdPaddingRight: '8px'
            });
        });

    });
</script>

</body>
</html>