title: adding style to a html table dynamically - using DOM, JS
body: <p>could you take a look at the following fiddle:..I am using JS for my project</p>
  
  <pre><code>http://jsfiddle.net/dgqr2nLd/7/
  </code></pre>
  
  <p>I have the layout of the table the way I want with padding, border colour etc...</p>
  
  <p>In my project however I can't seem to get this result. I am using DOM elements to dynamically create a html table in my application and the inner.html is as follows:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="#tabs-1"&gt;Info&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs-2"&gt;Images&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="tabs-1"&gt;
      &lt;center&gt;
          &lt;b&gt;&lt;font color="FF6600"&gt; Feature Properties &lt;/font&gt;&lt;/b&gt;
      &lt;/center&gt;
      &lt;br&gt;
      &lt;table&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;id&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;11079&lt;br&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;one&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;d&lt;br&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;two&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;d&lt;br&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;three&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;d&lt;br&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;div id="tabs-2"&gt;
      &lt;a id="lb1" href="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" rel="lightbox[me]"&gt;
          &lt;img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" width="200" height="200"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So iv tired to update the table appearance of the table by:</p>
  
  <pre><code>var Newtable = document.createElement('table');
  Newtable.rules = "all";
  Newtable.cellpadding = "10px 10px 10px 10px";
  NewTable.style = "border: 1px solid #CCCCCC";
  </code></pre>
  
  <h2>this didnt work</h2>
  
  <hr>
  
  <p>tried</p>
  
  <pre><code>    NewTable.class = "WorkFlowLayout"
  
   .WorkFlowLayout
      {
          rules=all;
           cellpadding=10px 10px 10px 10px;
            border: 1px solid #CCCCCC;
      }
  </code></pre>
  
  <p>this didnt work</p>
  
  <h2>-------------------------------------------------------------------------------------------------</h2>
  
  <p>I can get the border to appear by using</p>
  
  <pre><code>Newtable.border = "1";
  </code></pre>
  
  <p>but cant get the rules, or cellPadding to work...any idea as to why?</p>
  
  <h2>------------------------------------------------------------------------------------------------</h2>
  
  <p><b>
  UPDATE</b></p>
  
  <p>iv used </p>
  
  <pre><code>'var Newtable = document.createElement('table');
   Newtable.setAttribute('border', '1');
   Newtable.setAttribute("cellPadding", "20px 20px 20px 20px");`
  </code></pre>
  
  <p>and this returns <code>&lt;table border="1" cellpadding="20px 20px 20px 20px"&gt;
  &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;b&gt;id&lt;/b&gt;&lt;/td&gt;&lt;td&gt;13083&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;b&gt;one&lt;/b&gt;&lt;/td&gt;&lt;td&gt;ujuj&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;b&gt;two&lt;/b&gt;&lt;/td&gt;&lt;td&gt;uju&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;b&gt;three&lt;/b&gt;&lt;/td&gt;&lt;td&gt;ujuj&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;</code> which has the cellpadding in the correct place but it doesnt change anything in the table layout? any ideas?></p>
  
  <p>Also when I use :</p>
  
  <pre><code>     var Newtable = document.createElement('table');
          NewTable.setAttribute("className","WorkFlowLayout");
  
      .WorkFlowLayout
  {
     /* rules:all;
       cellpadding:10px 10px 10px 10px; */
        border: 1px solid #CCCCCC;
  }
  </code></pre>
  
  <p>This flags an error with NewTable.setAttribute("className","WorkFlowLayout"); saying newTable doesnt exist, because as im creating it dynamically and passing it back it doesnt exist. how do i add the style from here thanks?</p>