Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> INSERT TITLE </title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

        <style>
        #topbar p {
            display: inline-block;
            float: left;
            margin-right: 50px;
            margin-left: 50px;
        }


        </style>
    </head>

    <body>

        <div id = "topbar">
            <p id = "home"> Home </p>
            <p id = "table"> Table </p>
            <p id = "quiz"> Quiz </p>
            <p id = "flags"> Flags </p>
        </div>
    <br><br><br><hr>

    <!--JSON-->
    <script>

        $(function() {


       var countries = [];

       $.getJSON('countries.json', function(data) {
           $.each(data.countries, function(i, f) {
              var tblRow = "<tr>" + "<td>" + f.name + "</td>" + "<td>" + f.capital + "</td>" + "<td>" + f.currency + "</td>" + "</tr>"
               $(tblRow).appendTo("#countries tbody");
         });

       });

    });
    </script>

        <table id="countries">
            <thead>
                <th>Name</th>
                <th>Capital</th>
                <th>Currency</th>
            </thead>

            <tbody>

            </tbody>
        </table>

    </body>
</html>