_marisha,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.board {
margin: 0;
padding: 0;
}
.row {
display: flex;
margin: 0;
padding: 0;
}
.row>div {
height: 15px;
width: 15px;
box-sizing: border-box;
text-align: center;
}
.row .cell {
border: 1px solid#FF0000;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
function сhessBoard() {
let board = document.querySelector('.board');
let row;
let cell;
let number = [8, 7, 6, 5, 4, 3, 2, 1];
let alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
let div = document.createElement('div');
number.forEach(num => {
row = div.cloneNode();
row.className = 'row';
cell = div.cloneNode();
cell.textContent = num;
cell.className = 'cell__number';
row.append(cell)
cell = alphabet.map(_ => (cell = div.cloneNode(), cell.className = 'cell', cell));
row.append(...cell);
board.append(row)
})
row = div.cloneNode();
row.className = 'row';
cell = div.cloneNode();
row.append(cell)
cell = alphabet.map(letter => (cell = div.cloneNode(), cell.className = 'cell__letter', cell.textContent = letter, cell));
row.append(...cell);
board.append(row)
}
сhessBoard()
});
</script>
</head>
<body>
<div class="board"></div>
</body>
</html>