HTML语言中TR,TH和TD有啥区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML语言中TR,TH和TD有啥区别相关的知识,希望对你有一定的参考价值。

区别如下:

1、定义不同。

tr是一种HTML语言标签,代表HTML表格中的一行。th是定义表格内的表头单元格。td是代表HTML表格中的一个单元格。

2、用法不同。

tr标签是成对出现的,以<tr>开始,</tr>结束,表头单元格 - 包含表头信息(由 th 元素创建),标准单元格 - 包含数据(由 td 元素创建)。

3、关系不同。

一组<td>标签将建立一个单元格,<td>标签必须放在<tr>标签内,<td>标示行中的一个列,需要嵌套在<tr></tr>中间。

4、文字字体不同。

th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。

参考资料来源:百度百科-tr

参考资料来源:百度百科-td

参考资料来源:百度百科-th

参考技术A

都是表格的元素:

<th>    定义表格的表头。   

<tr>    定义表格的行。      

<td>    定义表格单元。    


例如:

<table border="1">
  <tr>
    <th>Company</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>Apple, Inc.</td>
    <td>1 Infinite Loop Cupertino, CA 95014</td>
  </tr>
</table>

显示效果:

参考技术B tr就是一行。th是一个标的表字段,td是一列
例如:
<table>
<tr><th>姓名</th><th>年龄</th><th>性别</th><th>学号</th></tr>

<tr><td>张三</td><td>18</td><td>男</td><td>123</td></tr>

<tr><td>张三</td><td>18</td><td>男</td><td>123</td></tr>
</table>

你可以看一下效果。
已有还有更多关于php html+css+js html5+css3+jquery linux C# 的问题可以联系我
1084914120@qq.com本回答被提问者和网友采纳

用javascript如何从tr中分别获得每个td的元素

谢谢

js获取表格中每行的td元素方法:

<script>

    var tb = document.getElementById("tb");  //根据id找到这个表格

    var rows = tb.rows;               //取得这个table下的所有行
    for(var i=0;i<rows.length;i++)//循环遍历所有的tr行
    
      for(var j=0;j<rows[i].cells.length;j++)//取得第几行下面的td个数,再次循环遍历该行下面的td元素
     
         var cell = rows[i].cells[j];//获取某行下面的某个td元素

         alert("第"+(i+1)+"行第"+(j+1)+"格的数字是"+cell.innerHTML);//cell.innerHTML获取元素里头的值      

        

    

</script>


拓展使用jq几行命令就能实现获取td的值


$("#tb tr td").each(function(i, v)    //针对tb表格下的所有td进行遍历
        alert("第"+(i + 1)+"格的数字是"+$(this).text());//返回当前td下的值
)

参考技术A <html>
<body>
<table border="1" id="table1">
<tr id="row1">
<td>01</td>
<td>02</td>
</tr>
<tr id="row2">
<td>11</td>
<td>12</td>
</tr>
</table>
<script type="text/javascript">

//-----------第一种方法----------------

var row = document.getElementById("row1"); //只针对 row1这个元素的子节点查找
var cells = row.getElementsByTagName("td"); // 找到这个tr下的所有td,不能用childNodes 属性,部分浏览器不兼容
for(var i=0;i<cells.length;i++)
alert("第"+(i+1)+"格的数字是"+cells[i].innerHTML);


alert("开始方法2");

//-----------第二种方法,操作表格比较标准的代码----------------

var tab = document.getElementById("table1"); //找到这个表格
var rows = tab.rows; //取得这个table下的所有行
for(var i=0;i<rows.length;i++)

for(var j=0;j<rows[i].cells.length;j++)

var cell = rows[i].cells[j];
alert("第"+(i+1)+"行第"+(j+1)+"格的数字是"+cell.innerHTML);



</script>
</body>
</html>

<!-----------
把以上代码保存为一个.html文件打开看一下你就明白了
,包含了相关的JS代码
-------->本回答被提问者和网友采纳
参考技术B 给tr标识一个id
如<tr id="test"><td></td><td></td></tr>

var tds = document.getElementById("test").getElementByTagsName("td");

这样可以获取到test里面的所有td对象

以上是关于HTML语言中TR,TH和TD有啥区别的主要内容,如果未能解决你的问题,请参考以下文章

HTML语言中表格的书写中TD TR TH的英文全称是啥?

html中th标签有啥用?

html表格中的tr、 td、 td分别是啥意思

JavaScript引用类型和值类型

用HTML语言做一个表格

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