laman27

Для простого теста, собственно, РНР даже не нужен. Можно обработать логику в клиенте, а результат уже отправить формой серверу. Но так, конечно, можно будет через исходный код подсмотреть ответ.
Тогда ту же логику обработки можно передать серверу, а отправлять лишь сам выбор пользователя. Думаю, из этого схематичного кода станет все понятно.

Как вариант можешь стилями их раскрасить, без необходимости в js.

tr:nth-child(odd) td:nth-child(odd) {
  background: white;
}

tr:nth-child(odd) td:nth-child(even) {
  background: black;
}

tr:nth-child(even) td:nth-child(even) {
  background: white;
}

tr:nth-child(even) td:nth-child(odd) {
  background: black;
}

Стили для раскрашивания клеток:

.black { background: black; }
.white { background: white; }

Размеры доски:

const rows = 8;
const cols = 8;

Создавать доску можно через генерацию разметки:

document.querySelector('.info').innerHTML = `
  <table>${Array.from({ length: rows }, (_, i) => `
    <tr>${Array.from({ length: cols }, (_, j) => `
      <td class="${(i ^ j) & 1 ? 'black' : 'white'}"></td>`).join('')}
    </tr>`).join('')}
  </table>`;

Или, создавая её элементы напрямую:

const table = document.createElement('table');

for (let i = 0; i < rows; i++) {
  const tr = table.insertRow();
  for (let j = 0; j < cols; j++) {
    tr.insertCell().classList.add([ 'white', 'black' ][(i ^ j) & 1]);
  }
}

document.querySelector('.info').append(table);