Just playing with HMTL, CSS and JavaScript

• The first problem was the width of the table. I wanted it equaled spaced between the cells but also that had a good resizing. The solution that I got was... not good practice I think. I changed the width of every td element in css to be 23%, without messing with the width of the table itself (default: 100%). Somehow everything is working well until now but odd thing happens when I change the percentage value. e.g.: When I put 20% the table gets bigger and when I put above 25% some columns gets bigger, others gets smaller (I think it's because the total sum gets above 100%). The reason why I still using this messing 23% value because if I put a percentage value in the width of the table the smaller version of the page breaks the table, if I put, for example, 290px as the width of the table, it gets a little too big in smaller screens. In the current way the table shrinks in irregular forms, but it still readable in smaller screens. (Question and answers in Stackoverflow)

• The second problem was how to add 15 methods to each cell of the table to make them change the background color of the page when the mouse hovers over them. As I am a beginner in JavaScript I tried this code:

    for(var i = 1; i < 16; i++){
          celula[i].onmouseover= function(){
            document.body.style.backgroundColor = celula[i].getAttribute("bgcolor");
          }
          celula[i].onmouseout = function(){
            document.body.style.backgroundColor = inicial;
          }
        }

The problem (that right now I don't understand completely) was that I used the keyword "var" in the declaration of the i variable. The correct way is to use the "let" keyword for reasons of different scope (something like this).

• I committed a type error in the 14º cell's attribute. I didn't put the '#' symbol before the hex code of the bgcolor attribute (I discovered on Stackoverflow that bgcolor is a deprecated attribute. I will put the colors with CSS in the future).

• I tried to set the color of the table cells with classes and CSS instead of using HTML attributes. I couldn't return their colors anymore with cells = getElementsByTagName("td"); cells[i].style.backgroundColor;. After suffering for many hours I discovered the function called "getComputedStyle" that allows you to get the properties inside a class of a element.