Javascript 如何将CSS合并到表中

我想把CSS代码放到我的表格中，但不想在表格的每一行都添加样式。我有以下代码：

CSS: JavaScript:

函数showState（）
{       
myTable=“
类型”；
myTable+=“值”；
createRow（“---------------------”，“-----------”）；
createRow（“布局”，document.getElementById（“startradio”）.form.format==“默认”）；
myTable+=“”；
document.getElementById（“tableHolder”）.innerHTML=myTable；
}
函数createRow（类型、值）
{
myTable+=“”+类型+“”；
myTable+=“”+值+“”；
}

HTML:

但是这种风格不起作用。我已经把我的th和tr以及css放在了一起，但我不确定我做错了什么

更换这些：

myTable = "<table class='statetable'><br><th><td>Type</td>";
myTable += "<td>Value</td></th>";

与：

myTable+=“”+类型+“”+值+“”；

您将得到更多的开始标签，然后是结束标签。

createRow（）

方法不应返回起始的

标记

---

另外，

。在表格上设置宽度，而不是

您无法在

th

内部创建

td

。。。或者在

标签中使用

标签。您是否需要一张表格来完成此操作

div

s在许多方面可能比一种更容易。@Novocaine:人们仍然可以使用表格来获取表格数据。@Cerburs，更正：人们仍然应该使用表格获取表格数据。此外，他每次调用

createRow

…wat时都会打开一个新的

。编辑答案，@Blazemonger。

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>";
}

 <input type="button" id="button" value="Click to show states" onclick="showState()"/>
 <div id="tableHolder"></div>

myTable = "<table class='statetable'><br><th><td>Type</td>";
myTable += "<td>Value</td></th>";

myTable = "<table class='statetable'><tr><th>Type</th>";
myTable += "<th>Value</th></tr>";

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

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