Checkerboard with tables in HTML?

Question

Edit: please keep in mind that I know next to nothing aboutJavaScript, CSS etc. and have had to find these things on my own. I started just a couple hours ago and don't know most of the things in the replies. Sorry.

I have to make a 50 x 50 checkerboard using ONLY html and ONLY tables. I've obviously given up on this maniacal request and tried using some CSS (even though my teacher hasn't taught us yet) but I can't get it to work. How should I go about this? I've tried doing it like this, but my teacher started teaching us html only a couple months ago (we're EXTREMELY late on the program) and it's really bad.

(At the bottom is what I wrote into the CSS file)

code


     Compito scacchiera tabelle

The CSS file:

#nero {
background-color: black;
color: black;
}

user_383904 · Answer

Use CSS :nth-child(odd / even)

const size = 50;

const checkers = Array.from(Array(size)).reduce((r) => {
  r += `${"".repeat(size)}`;
  return r;
}, "");

document.querySelector("#scacchiera").innerHTML = checkers;

table {border-collapse: collapse;}
td {width: 5px; height: 5px;}

tr:nth-child(even) td:nth-child(even),
tr:nth-child(odd) td:nth-child(odd){
  background: #000;
}

user_1447509 · Answer

First, construct your HTML in a string, adding on the new bits as you go

Next, you will need to test your inner loop to see if it should begin with white or black

Finally, do not use the same var in each for loop, or it will terminate the outer for loop when the inner for loop is finished. (i === i === 8).

out = '';
var i=0, j=0;
for (j = 0; j <= 8; j++) { 
  out += '';
    if (j % 2 == 0){
      for (i = 0; i <= 8; i++) {
        if (i % 2 == 0) { 
          out += '';
        } else {
          out += '';
        }
      }
    } else {
      for (i = 0; i <= 8; i++) {
        if (i % 2 == 0) { 
          out += '';
        } else {
          out += '';
        }
      }
    }
    out += '';
}
out += '    ';
document.body.innerHTML = out;

user_2930038 · Answer

In javascript you can't just inject HTML as plain text, you must use variable to store html as string and when it's finished generating insert it into HTML page.
When have a for loop inside another for loop you must use unique variable names, otherwise outer loop will be canceled by the inner loop.
Elements IDs must be unique, so in this case you should use class instead.

user_6772535 · Answer

If this assignment should be done using only HTML you should just copy and paste rows many times it won't take you that long.

That beign said, first of all you can't just embed HTML in your Javascript like that, you should you probably be using DOM methods, also I see that you are using an id for your td elements, you shouldn't be using an id in multiple elements you should be using a class instead.

You can go to freeCodeCamp and learn about this concepts :).

Here is a working example of how I did it using the DOM:

const table = document.getElementsByTagName('table')[0];

for(let i = 0; i < 50; i++) {
  table.appendChild(document.createElement('tr'));
  const row = table.getElementsByTagName('tr')[i];

  for(let j = 0; j < 50; j++) {
    row.appendChild(document.createElement('td'));

    if((i % 2 == 0 && j % 2 == 0) || (i % 2 == 1 && j % 2 == 1)) {
      const cell = row.getElementsByTagName('td')[j];
      cell.className = 'nero';
    }
  }
}

td {
  width: 10px;
  height: 10px;
  border: 1px solid black;
}

.nero {
  background-color: black;
}

Checkerboard with tables in HTML?

4 Answers