JSON到HTML表

So before I start off, I'd like to say that I only know basic HTML and CSS. Now that that's out of the way, I have a JSON output at http://eu.bitswit.ch/api/server_leaderboard.php?server=71 and I would like to put that into HTML tables. I have looked around on Google/Youtube but none of them were in-depth enough to help me.

[{"nickname":"|Gates|Domon","steam_id":"STEAM_0:1:8647245","kills":379,"deaths":175,"suicides":0,"tks":5,"score":4590},{"nickname":"Ambassador Pineapple","steam_id":"STEAM_0:1:5287117","kills":372,"deaths":127,"suicides":0,"tks":2,"score":4500},{"nickname":"Clayton","steam_id":"STEAM_0:1:57875311","kills":307,"deaths":118,"suicides":0,"tks":6,"score":3595},{"nickname":"Fluffy Penguin","steam_id":"STEAM_0:1:40834109","kills":205,"deaths":136,"suicides":0,"tks":5,"score":1620},

I would use something like this (you need jQuery of some version to use this code though):

if (data.length > 0) {
    var $table = $("<table/>", { "class": "myTable" }).appendTo(document);

    var $headRow = $("<tr/>", { "class": "myHeadRow" }).appendTo($table);
    for (var val in data[0]) {
        var $headCell = $("<td/>", {
            "class": "myHeadCell",
            "text": val
        }).appendTo($headRow);
    }

    for (var i = 0; i < data.length; i++) {
        var $row = $("<tr/>", { "class": "myRow" }).appendTo($table);
        for (var val in data[i]) {
            var $cell = $("<td/>", {
                "class": "myCell",
                "text": data[i][val]
            }).appendTo($row);
        }
    }
}

But notice, it's not very fast way to do. I'd recommend you to get JSON on your server and manupulate with it from your PHP or C# code or whatever and then just show rendered table. It is bad tone in web, when page load speed depends on client's computing powers.

json example from the url in the question: http://eu.bitswit.ch/api/server_leaderboard.php?server=71

{"query":"71","response":0,"query_time":"402.04ms","data":[{"nickname":"Gates Domon","steam_id":"STEAM_0:1:8647245","kills":380,"deaths":175,"suicides":0,"tks":5,"score":4595}]}  

$json = file_get_contents(' http://eu.bitswit.ch/api/server_leaderboard.php?server=71'); // this WILL do an http request for you
    $data = json_decode($json, true);
    $array = $data['data'];
    $table = "<table cellpadding='5'>
<thead>
    <th>nickname</th>
    <th>steam_id</th>
    <th>kills</th>
    <th>deaths</th>
    <th>suicides</th>
    <th>tks</th>
    <th>score</th>
 </thead>
 <tbody>";
    foreach ($array as $value) {
        $table .="<tr>
<td>{$value['nickname']}</td>
<td>{$value['steam_id']}</td>
<td>{$value['kills']}</td>
<td>{$value['deaths']}</td>
<td>{$value['suicides']}</td>
<td>{$value['tks']}</td>
<td>{$value['score']}</td>
</tr>";
    }
    $table .="</tbody></table>";

    echo $table;