Блондинка,
тоже самое, но направление от наличия в теге таблицы класса
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table {
margin: 10px auto;
}
td {
border: solid 1px #000080;
}
td.week_day {
background-color: #7575FF;
}
</style>
<script>
const render = function(range, horiz) {
let html = '';
if (horiz) {
for (let i = 0, j = 0; i < range.length; i++) {
let cls = 'day';
if (i < 7) cls = 'week_day';
if (i % 7 == 0) {
html += '<tr>';
}
html += `<td class="${cls}">${range[i]}`;
}
} else {
html = [];
for (let i = 0; i < range.length; i++) {
let cls = 'day';
if (i < 7) {
cls = 'week_day'
html.push('<tr>')
}
html[i % 7] += `<td class="${cls}">${range[i]}`;
}
html = html.join('')
}
return html
}
</script>
</head>
<body>
<table class="test"></table>
<table class="test horiz"></table>
<script>
let range = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let tables = document.querySelectorAll('.test');
tables.forEach(table => {
let direction = table.classList.contains('horiz');
table.innerHTML = render(range, direction);
});
</script>
</body>
</html>