<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Titulek</title>
 
    <style>
        td {width:1em; height: 1em}
 
        tr:nth-child(2n) td:nth-child(2n),
         tr:nth-child(2n+1) td:nth-child(2n+1) {
            background-color: gray;
        }
        tr:nth-child(2n+1) td:nth-child(2n),
         tr:nth-child(2n) td:nth-child(2n+1) {
            background-color: black;
        }
 
 
    </style>
 
</head>
 
<body>
 <table id="chessboard"></table>
 
 <script>
    const height = 8
    const width = 8
 
    for (let y = 0; y < height; y++) {
            let row = document.createElement('tr')
            for (let x = 0; x < width; x++) {
                let cell = document.createElement('td')
                cell.id = `cell-${x}-${y}`
                cell.class = 'cell'
                row.appendChild(cell)
            }
            document.getElementById('chessboard').appendChild(row)
        }
    </script>
</body>
 
</html>