在HTML中，<TR>,<TH>,<TD>是啥标记？

Posted 2023-05-09

有什么含义吗

<table是<tr的上层标签
<tr必须在一个<table</table里面,它不能单独使用,相当于<table的属性标签.
<table标示一个表格,<tr标示这个表格中间的一个行
<td标示行中的一个列,需要嵌套在<tr</tr中间
具体格式是:(两行两列)<table<tr<td</td
<td</td</tr</teble<th和<td一样,也是需要嵌套在<tr当中的,<tr嵌套在<table当中
<table...</table 用于定义一个表格开始和结束
<th...</th 定义表头单元格。表格中的文字将以粗体显示（<TH与<TD同样是标示一个储存格,唯一不同的是<TH所标示的储存格中的文字是以粗体出现,即可以这样看：
<th文字</th=<td<b文字</b</td），
在表格中也可以不用此标签，<th标签必须放在<tr标签内
<tr...</tr 定义一行标签，一组行标签内可以建立多组由<td或<th标签所定义的单元格
<td...</td 定义单元格标签，一组<td标签将将建立一个单元格，<td标签必须放在<tr标签内
。<th为表格标题，属性summar为摘要，<caption标签为首部说明，<thead标签为表格头部，<tbody标签为表格主体内容，<tfoot标签为表格尾部。
其中还可以使用scope 可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下：
　row 指示当前单元格，为包含当前单元格的行提供相关的表头信息。
　col 指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。
　rowgroup 指示当前单元格，为包含当前单元格的其余行组提供相关的表头信息。
　colgroup 指示当前单元格，为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。
标准表格模型<table<caption</caption<thead<tr<th</th</tr</thead<tbody<tr<td</td</tr</tbody<tfoot<tr<td</td</tr</tfoot</table相关：<th不光是粗体，还是居中的
<caption也是居中的，而且如果table有border的话则caption不在border之内 参考技术A <table>是表格的意思与下面的</table>是一对
<tr>表示一行
<td>表示一列
</td>
</tr>
</table>
在这里可以看到，他们都是成对出现的，而<th>是标题行，也就是说这一行内的文字要加粗，也要有结束符</th>，网页的结构都是用表格来实现的 参考技术B http://www.bjpeu.edu.cn/~yanglb/html/

这里有详细的解释，你应该会明白哦~

将表格 HTML 转换为 JSON

【中文标题】将表格 HTML 转换为 JSON

【英文标题】：Convert table HTML to JSON

【发布时间】：2015-09-02 01:57:33

【问题描述】：

我有这个：

<table>
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>

我需要一个 JSON 格式。

"Name":"Carlos","Age": 22

我试过https://github.com/lightswitch05/table-to-json，但它不适用于每一行的标题:(

编辑：http://jsfiddle.net/Crw2C/773/

【问题讨论】：

github脚本目前给你什么结果？

可能最容易将其转换为 Object 并使用 JSON.stringify。这些数据似乎不是表格，还有更多吗？

您愿意将数据放入列而不是行吗？

jsfiddle.net/Crw2C/773@Markasoftware

@Markasoftware 问题是我收到了 HTML 表格格式

【参考方案1】：

假设您只需要获取每行的第一个/第二个单元格作为键/值对，您可以使用.reduce() 来迭代行并获取.cells[0] 和.cells[1] 的文本内容到用作每个键/值对：

var t = document.querySelector("table");

var j = [].reduce.call(t.rows, function(res, row) 
    res[row.cells[0].textContent.slice(0,-1)] = row.cells[1].textContent;
    return res
, );

document.querySelector("pre").textContent = JSON.stringify(j, null, 2);

<table>
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>
<pre></pre>

Array.prototype.reduce 方法接受一个集合并使用一个累加器将其减少到您想要的任何状态。这里我们只是将它归约为一个对象，所以我们在回调之后传入一个。

对于每一行，我们使用第一个单元格的内容作为对象键，第二个单元格的内容作为值。然后我们从回调中返回对象，以便在下一次迭代中将其返回给我们。

最后，.reduce() 返回我们返回的最后一个东西（当然是我们开始使用的对象），这就是你的结果。

【讨论】：

我总是对将宿主对象作为 this 传递给内置方法感到不安。 应该没问题，但是 IE8 会抛出一个错误（与此处无关，因为 reduce 无论如何都需要 polyfill）。可能还有其他浏览器会做同样的事情。

@RobG：这是值得考虑的一点。正如你所说，IE8 不支持 .reduce() 并且 polyfill 不会有任何问题。至于其他浏览器，（如果它们存在的话）它们将属于没有太多人真正关心的支持范围。但是你的答案也是一个好方法（而且更快）所以+1。也用于使用似乎很少有人使用的.rows 和.cells。

【参考方案2】：

您可以将OP中的表格转换为所需的格式，首先将其转换为Object，然后使用JSON.stringify获取所需的字符串：

<table id="t0">
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>

<script>

function tableToJSON(table) 
  var obj = ;
  var row, rows = table.rows;
  for (var i=0, iLen=rows.length; i<iLen; i++) 
    row = rows[i];
    obj[row.cells[0].textContent] = row.cells[1].textContent
  
  return JSON.stringify(obj);


console.log(tableToJSON(document.getElementById('t0'))); // "Name:":"Carlos","Age:":"22""

</script>

但是，这是一个 ad hoc 解决方案，因此需要一些工作来适应更一般的情况。但是它显示了这个概念。

请注意，不能保证对象属性将按照它们在表中出现的顺序返回，您可能会得到"Age:":"22","Name:":"Carlos"。

【参考方案3】：

var t = document.querySelector("table");

var j = [].reduce.call(t.rows, function(res, row) 
    res[row.cells[0].textContent.slice(0,-1)] = row.cells[1].textContent;
    return res
, );

document.querySelector("pre").textContent = JSON.stringify(j);

<table>
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>
<pre></pre>

【讨论】：

完美解决方案

【参考方案4】：

您正在使用的Table-to-JSON library 在您的表格中需要不同的格式。

它需要一个表格，第一行包含所有标题，然后是后续行中的数据。

换句话说，它希望您的表格具有这样的结构

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>        
    <tr>
        <td>Carlos</td>
        <td>22</td>
    </tr>
</table>

这是a forked version of your JSFiddle，它正在其中工作。

【讨论】：

他在 cmets 中说他不能这样做，他正在从另一个来源获取桌子