TimohaP,
вариант ...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table {border-collapse:collapse; display:inline-block; }
table td {width:15px; height:15px; padding:0; box-shadow:0 0 1px 0 #7395BE;border: 1px solid #000000;}
/*Стиль для заполненных ячеек (f - filled)*/
.f {background:#7395BE}
/*Стиль для пустых ячеек (f - empty)*/
.e {background:#E8F2F7}
</style>
</head>
<body>
<script>
map = [
[1,0,1,0,1], //карта значений (смотри, что получилось в результате (вкладка output) и сравни с этим массивом)
[1,0,1,0,0],
[1,0,1,1,0],
[1,0,0,0,1],
[1,0,0,0,1],
[1,0,1,1,1],
[1,0,1,1,1],
[1,0,0,0,1],
[1,0,0,0,1],
[1,1,0,0,1],
[1,1,0,1,1],
[1,0,0,1,1],
[1,0,0,1,1],
[1,1,0,1,1],
[1,1,1,1,1],
[1,0,1,1,1],
[1,1,1,0,1],
[1,0,1,0,1],
[1,0,1,1,1],
[1,1,0,1,1],
[1,1,0,0,1]
];
function fn(d, f) {
var c = [],
b = d.length;
d.forEach(function(a) {
for (var b = 0; b < f; b++) c.push(a)
});
for (var e = [], a = 0; a < c.length; a += b) e.push(c.slice(a, a + b));
return e.map(function(a) {
return +(a.join("").split("1").length - 1 >= b / 2)
})
};
function createTable( map , num) {
var table, row, data;
table = document.createElement('table');
for (var k = 0; k < map.length; k++) {
row = table.insertRow(k);
var len = fn(map[k], num);
for (var m = 0; m < len.length; m++) {
data = row.insertCell(m);
data.classList.add(len[m] ? 'f' : 'e')
}
table.appendChild(row);
}
return table;
}
for (var i=5; i<30; i+=3) {
document.body.appendChild(createTable( map , i));
document.body.appendChild(document.createTextNode(i));
document.body.appendChild(document.createElement('br'))
}
</script>
</body>
</html>