Artur_Hopf,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</script>
</head>
<body>
<table>
<thead>
<tr>
<td bgcolor="#b7b7b7">№</td>
<td bgcolor="#c6c6c6">Обитание</td>
<td bgcolor="#c6c6c6">Вид</td>
<td bgcolor="#b7b7b7">Цвет</td>
<td bgcolor="#c6c6c6">Количество</td>
</tr>
</thead>
<tbody id="table_1"></tbody>
</table>
<script>
var tr_1 = "";
var arr = [{
arr1: "Зайка",
arr2: "беляк",
arr3: "3 штуки"
}, {
arr1: "Волчёк",
arr2: "серый",
arr3: "1 штука"
}, {
arr1: "Медвежек",
arr2: "бурый",
arr3: "1 штука"
}];
tr_1 += '<tr>' +
'<td bgcolor="#b7b7b7" rowspan="' + (arr.length + 1) + '">' + '1' + '</td>' +
'<td bgcolor="#c6c6c6" rowspan="' + (arr.length + 1) + '">' + 'Лесок' + '</td>' +
'<td bgcolor="#b7b7b7">' + 'Зверьки ' + '</td>' +
'<td bgcolor="#c6c6c6" colspan="2">' + ' ' + '</td>' +
'</tr>';
for (i = 0; i < arr.length; i++) {
tr_1 += '<tr>' +
'<td bgcolor="#b7b7b7">' + arr[i].arr1 + '</td>' +
'<td bgcolor="#c6c6c6">' + arr[i].arr2 + '</td>' +
'<td bgcolor="#b7b7b7">' + arr[i].arr3 + '</td>' +
'</tr>';
};
document.getElementById("table_1").innerHTML = tr_1;
</script>
</body>
</html>