Adding numbers and letters to chessboard

Question

I have a simple chessboard created with JavaScript and I want to add letters and numbers to the sides of my board so it will look like real chessboard. I've tried using for loop to add elements with letters and numbers but conditions seem to be false, because it didn't work. Here is my HTML code:

        let table = document.createElement("table");
    for (let i = 8; i > 0; i--) {
      let tr = document.createElement('tr');
      let number = document.createElement('td');
      number.className = 'number';
      number.innerHTML = i;
      tr.appendChild(number);
      for (let j = 0; j < 8; j++) {
        let td = document.createElement('td');
        if (i % 2 == j % 2) {
          td.className = "white";
        } else {
          td.className = "black";
        }
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
    document.body.appendChild(table);

* {
      margin: 0;
      padding: 0;
    }
    table {
      border-spacing: 0;
      margin: 20px 20px;
    }
    .black {
      width: 38px;
      height: 38px;
      background: black;
      border: 1px solid transparent;
    }
    .white {
      width: 38px;
      height: 38px;
      background: white;
      border: 1px solid black;
    }
    .number {
      padding-right: 10px;
      font-size: 18px;
      font-weight: bold;
    }

Answer 1

Using CSS :before pseudo-element and String.fromCharCode()

let table = document.createElement("table");
for (let i = 0; i < 8; i++) {
  let tr = document.createElement('tr');
  tr.setAttribute('data-row', 8 - i);
  for (let j = 0; j < 8; j++) {
    let td = document.createElement('td');
    if (i == 7) {
      td.setAttribute('data-col', String.fromCharCode(65 + j));
    }
    if (i % 2 == j % 2) {
      td.className = "white";
    } else {
      td.className = "black";
    }
    tr.appendChild(td);
  }
  table.appendChild(tr);
}

document.body.appendChild(table);

* {
  margin: 0;
  padding: 0;
}

table {
  border-spacing: 0;
  border: 1px solid black;
  margin: 20px 20px;
}

.black {
  width: 40px;
  height: 40px;
  background: black;
}

.white {
  width: 40px;
  height: 40px;
  background: white;
}

[data-row]:before {
  content: attr(data-row);
  position: absolute;
  margin: 12px -15px;
}

[data-col]:before {
  content: attr(data-col);
  position: absolute;
  margin: 25px 14px;
}

Answer 2

Here's what I would do (still needs some tweaking with the styles):

let table = document.createElement("table");
let letters = "ABCDEFGH";
for (let i = 0; i < 9; i++) {
  let tr = document.createElement('tr');
  for (let j = 0; j < 9; j++) {
    let td = document.createElement('td');
    if (j === 0) {
      td.textContent = 8-i || '';
      tr.appendChild(td);
      continue;
    }
    if (i === 8) {
      td.textContent = letters.charAt(j-1);
      td.classList.add('letter');
      tr.appendChild(td);
      continue;
    }
    if (i % 2 == j % 2) {
      td.className = "white";
    } else {
      td.className = "black";
    }
    tr.appendChild(td);
  }
  table.appendChild(tr);
}
document.body.appendChild(table);

* {
  margin: 0;
  padding: 0;
}

table {
  border-spacing: 0;
  border: 0;
  margin: 20px 20px;
}

tr:not(:last-child) td:not(:first-child) {
  border: 1px solid black;
}

.black {
  width: 40px;
  height: 40px;
  background: black;
}

.white {
  width: 40px;
  height: 40px;
  background: white;
}

.letter {
  text-align: center;
}