javascript - How to incorporate CSS into a table -

i put css code table don't want styles @ every row of table. have following code:

css:

.statetable th {     width: 250px;     color: red;     text-align: left; } .statetable tr {     width: 250px; } 

javascript:

function showstate() {            mytable = "<table class='statetable'><br><th><td>type</td>";     mytable += "<td>value</td></th>";      createrow("------------------", "------------");     createrow("layout", (document.getelementbyid("startradio").form.format == "default"));     mytable +="</table>";     document.getelementbyid("tableholder").innerhtml = mytable; }  function createrow(type, value) {     mytable += "<table class='statetable'><tr><td>" + type + "</td>";     mytable += "<td>" + value + "</td></tr>"; } 

html:

 <input type="button" id="button" value="click show states" onclick="showstate()"/>  <div id="tableholder"></div> 

the style not working though. have placed th , tr's , placed css them not sure doing wrong.

replace these:

mytable = "<table class='statetable'><br><th><td>type</td>"; mytable += "<td>value</td></th>"; 

with these:

mytable = "<table class='statetable'><tr><th>type</th>"; mytable += "<th>value</th></tr>"; 

also, in createrow, replace:

mytable += "<table class='statetable'><tr><td>" + type + "</td>"; mytable += "<td>" + value + "</td></tr>"; 

with:

mytable += "<tr><td>" + type + "</td><td>" + value + "</td></tr>";