<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.row, .row_letter {
display: flex;
}
.row>div, .row_letter>div {
box-sizing: border-box;
height : 30px;
width: 30px;
text-align: center;
}
.cell {
border: 1px solid black;
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
function сhessBoard() {
let board = document.querySelector('.board')
let number = [8, 7, 6, 5, 4, 3, 2, 1]
let alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
// Создаем строку с буквами
let rowLet = document.createElement('div')
rowLet.className = 'row_letter'
let d = document.createElement('div');
rowLet.append (d)
alphabet.forEach(l => {
let dc = d.cloneNode();
dc.textContent = l;
rowLet.append(dc)
})
//добавление первой строки с буквами
rowLet.append(d.cloneNode())
board.append(rowLet)
// Создание строки ячеек
let rowCell = document.createElement('div')
rowCell.className = 'row';
// Заполням строку ячеек
let cell = document.createElement('div');
cell.className = 'cell';
for (let i = 0; i < 10; i++) rowCell.append(cell.cloneNode());
rowCell.firstChild.className = rowCell.lastChild.className = 'cell_number';
// Заполняем доску строками ячеек
number.forEach((n, i) => {
let rw = rowCell.cloneNode(true);
rw.firstChild.textContent = rw.lastChild.textContent = n;
rw.id = 'x' + i;
board.append(rw)
})
// Последняя строка с буквами
board.append(rowLet.cloneNode(true))
}
сhessBoard()
})
</script>
</head>
<body>
<div class='board'>
</div>
</body>
<html>