Practice JS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Practice 1</title>
</head>
<body>

<style type="text/css">
    table,td, th {
        border: 1px solid black;
    }
    td, th {
        width: 100px;
    }
</style>

<p></p>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
    </thead>
    <tbody id="table">
        <tr>
            <td>Filip</td>
            <td>19</td>
            <td>Male</td>
        </tr>
    </tbody>
</table>

<script src="jquery.js"></script>

<script type="text/javascript">
    var json =  [{
        "name": "Mila",
        "age": "17",
        "gender": "Female"
    },
    {
        "name": "Jana",
        "age": "22",
        "gender": "Female"
    },
    {
        "name": "Martin",
        "age": "20",
        "gender": "Male"
    }
    ]

    var people = JSON.parse(JSON.stringify(json));

    console.log(people);
    var table = document.getElementById("table");
    console.log(table.innerHTML);

    for (var i = 0; i < people.length; i++) {
        console.log(table.rows.length);
        var row = table.insertRow(table.rows.length);

        var name = row.insertCell(0);
        var age = row.insertCell(1);
        var gender = row.insertCell(2);

        console.log(people[i]["name"]);

        name.innerHTML = people[i]["name"];
        age.innerHTML = people[i]["age"];
        gender.innerHTML = people[i]["gender"];

        console.log(table.innerHTML);
    }

    document.getElementById("table").innerHTML = table.innerHTML;


</script>

</body>
</html>