title: The class of a table (created with createElement) doesn't work correctly in this code
body: <p>I have created a table with document.createElement('table') and a class with table.className, but when I run the code some properties (like border-color and border-collapse) don't work. I don't know why this happens.</p>
  
  <p>I'm trying to figure out wether this comes from the properties, the atributte className, o something else. I really don't have a clue.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Ejemplo aprenderaprogramar.com&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style type="text/css"&gt;
          h1 {
              margin-top: 100px;
              text-align: center;
              color: mediumturquoise;
          }
  
          #div1 {
              width: 400px;
              height: 400px;
              border: solid 1px gray;
              border-radius: 7px;
              margin: 100px auto;
          }
  
          .tabla{
              width: 300px;
              height: 200px;
              margin: 50px auto;
              border-style: solid  ;
              border-width: 1px;
              border-color:black ;
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
              border-collapse: collapse;
  
          }
  
  
      &lt;/style&gt;
        &lt;script type="text/javascript"&gt;
          window.onload = function () {
  
  
              var body = document.getElementsByTagName("body")[0];
              var table = document.createElement("table");
              body.appendChild(table);
              table.className="tabla";
  
           }
  
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;Calendar&lt;/h1&gt;
  
      &lt;div id="div1"&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>