<TBODY>和<BODY>有何区别，<TBODY>是什么元素？

最新推荐文章于 2020-10-03 10:09:39 发布

majiwei_wh

最新推荐文章于 2020-10-03 10:09:39 发布

阅读量893

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/majiwei_wh/article/details/83300411

版权

<tbody>是用在<table>内的比如：

<table>  
    <tbody>  
          <tr>  
                <td></td>  
          </tr>  
    </tbody>  
</table>

使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。
BODY是HTML的文本体，一个HTML文件，只有一个BODY，而在TABLE中可以有多个TBODY

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

majiwei_wh

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

「HTML和CSS入门指南」tbody 标签详解

a451319296的博客

06-05

1827

tbody 标签是一个重要的标签，在 HTML 中用于标识表格的主体部分。使用 tbody 标签可以帮助您提高表格的可读性和理解性。在使用 tbody 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能，并避免兼容性问题。

HTML ＜tbody＞标签

最新发布

玄链教育

08-23

882

tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。tbody 元素应该与thead和tfoot元素结合起来使用。thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

参与评论您还未登录，请先登录后发表或查看评论

HTML中body与tbody的区别

从_零_开始的专栏

05-28

4537

有的地方说tbody是可以加强对表格的控制能力的，但是在实际运用中效果不是很明显用BODY也一样只有IE5+里面可以正确识别TBODY 而IE6以上认为 BODY和TBODY没区别在现在的很多网页代码里基本上找不到 TBODY的身影了如果你的表格非常大，内容非常多，那么这个表格就要等表格内容全部下载完才会显示。如果你要下载一部分显示一部分的话，你就得把它拆分成

TBODY的使用方法和意义

weixin_43831584的博客

10-03

5566

TBODY 元素内包含的有效标签有： TD TH TR TBODY 元素会为全部表格自动定义，就算表格没有显式定义 TBODY 元素。 table 对象及其相关的元素有独立的表格对象模型，这与常规对象模型所采用的方法有很大不同。此元素在 Microsoft? Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。此元素不会被渲染。此元素需要关闭标签。 tbody定义表格的主体在table中thead,tfoot以及tbody可

<?php // 连接数据库 $conn = new mysqli("localhost", "root", "123456", "wyya"); // 检查连接是否成功 if ($conn->connect_error) { die("连接失败: " . $conn->connect_error); } // 查询五个歌单的表 $tables = array(); $result = mysqli_query($conn, "SHOW TABLES LIKE '%_list'"); if ($result->num_rows > 0) { while ($row = mysqli_fetch_array($result)) { $tables[] = $row[0]; } } // 获取选中的歌单表 $tableName = isset($_GET["table"]) ? $_GET["table"] : ""; $data = array(); if (!empty($tableName)) { $result = mysqli_query($conn, "SELECT * FROM $tableName"); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $data[] = $row; } } } ?> <!DOCTYPE html> <html> <head> <title>网易云音乐歌单</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2; } th { background-color: #4CAF50; color: white; } </style> </head> <body> <h2>网易云音乐歌单</h2> <div style="display: flex; flex-direction: row;"> <a href="?table=one_list">华语</a> <a href="?table=two_list">欧美</a> <a href="?table=three_list">日语</a> <a href="?table=four_list">韩语</a> <a href="?table=five_list">粤语</a> </div> <?php if (!empty($tableName)) { ?> <table> <tbody> <tr> <?php $columns = mysqli_query($conn, "SHOW COLUMNS FROM $tableName"); if ($columns->num_rows > 0) { while ($column = mysqli_fetch_array($columns)) { ?> <th><?php echo $column["Field"]; ?></th> <?php } } ?> </tr> <?php foreach ($data as $row) { ?> <tr> <?php foreach ($row as $value) { ?> <td><?php echo $value; ?></td> <?php } ?> </tr> <?php } ?> </tbody> </table> <?php } ?> </body> </html> <?php // 关闭连接 $conn->close(); ?>修改代码，将华语，欧美，日语，韩语，粤语放入一个命名为分类的菜单中，实现点击菜单后点击华语，欧美，日语，韩语，粤语再跳转

06-06

</tbody> </table> <?php } ?> </body> </html> <?php // 关闭连接 $conn->close(); ?> ``` 修改后的代码中，将五个歌单的链接放入了一个名为“分类”的菜单中，并且通过 CSS 实现了下拉菜单的效果。同时，修改...

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>酒店管理系统</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>酒店管理系统</h1> </header> <main> <h2>酒店客房管理</h2> <table> <thead> <tr> <th>ID</th> <th>类型</th> <th>价格</th> <th>编辑</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>单人房</td> <td>¥200</td> <td><button class="edit-btn">编辑</button></td> </tr> <tr> <td>2</td> <td>双人房</td> <td>¥300</td> <td><button class="edit-btn">编辑</button></td> </tr> <tr> <td>3</td> <td>豪华房</td> <td>¥500</td> <td><button class="edit-btn">编辑</button></td> </tr> </tbody> </table> <div class="add-form"> <h3>添加客房</h3> <form> <div> <label for="room-id">ID：</label> <input type="number" id="room-id" required> </div> <div> <label for="room-type">类型：</label> <input type="text" id="room-type" required> </div> <div> <label for="room-price">价格：</label> <input type="number" id="room-price" required> </div> <button type="submit">添加</button> </form> </div> </main> <script src="script.js"></script> </body> </html>给代码逐行加上注释

05-24

<td><button class="edit-btn">编辑</button></td>  </tr> <tr> <td>2</td> <td>双人房</td> <td>¥300</td> <td><button class="edit-btn">编辑</button></td> </tr>...

<table> <thead> <tr> <th>机票编号</th> <th>起飞时间</th> <th>到达时间</th> <th>起飞地点</th> <th>到达地点</th> <th>价格</th> <th>选择</th> </tr> </thead> <tbody> <c:forEach var="ticket" items="${ticketList}"> <tr> <td>${ticket.ticketId}</td> <td>${ticket.departureTime}</td> <td>${ticket.arrivalTime}</td> <td>${ticket.departurePlace}</td> <td>${ticket.arrivalPlace}</td> <td>${ticket.price}</td> <td><input type="checkbox" name="selectedTickets" value="${ticket.ticketId}"></td> </tr> </c:forEach> </tbody> </table>将此代码补充为完整的jsp页面代码

05-29

<body> <h1>机票选择</h1> <form action="buyTicket" method="post"> <table> <thead> <tr> <th>机票编号</th> <th>起飞时间</th> <th>到达时间</th> <th>起飞地点</th> <th>...

我的代码哪里错了:<!DOCTYPE html> <html> <head> <title>学生列表</title> <style> table { border-collapse: collapse; border: 2px solid black; } th, td { border: 2px solid black; padding: 5px; } <×yle> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>学生列表</h2> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>电话</th> <th>操作</th> </tr> </thead> <tbody>  <tr v-for="(student,index) in students"> <td>{{student.name}}</td> <td>{{student.gender}}</td> <td>{{student.age}}</td> <td>{{student.phone}}</td> <td> <button @click:v-for="updateStudent">修改<^tton> </td> </tr> </tbody> </table> </div> <script> new Vue({ el: "#app", data: { students: [ { name: "张三", gender: "男", age: 18, phone: "13888888888" }, { name: "李四", gender: "女", age: 20, phone: "13999999999" }, { name: "王五", gender: "男", age: 22, phone: "13666666666" }, ], }, methods: { updateStudent(student) { Vue.set(student, "age", student.age + 1); // TODO使用 Vue.set 方法更新学生信息 }, }, }); </script> </body> <html>

03-28

在代码中，<style> 和 <script> 标签的结束符号没有写全，应该是 </style> 和 </script>。另外，修改按钮的 @click 绑定的方法应该是 updateStudent() 而不是 v-for="updateStudent"。修改后的代码如下： <!DOCTYPE...

【JS】如何获取<tbody>中某一行元素的value？

aaaayl的博客

08-25

2170

点击修改，在修改界面的文本框中，出现的就是这行记录的值。初始界面：修改界面： JS代码： /*获取表格中某行的学生信息*/ $("#body").on('click','.update',function () { // const no=$(this).closest("tr").find("td").eq(0).text(); $("#alter...

bootstrap表格固定表头并且tbody部分添加滚动条

10-24

bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。

爬取网页时遇到tbody标签怎么办？

whitedrogen的博客

04-29

1916

如果你在爬取网页时，确信自己的xpath没错时，看看有没有tbody，解决办法：删了它! 下面举个例子测试网站是http://www.dsjyj.com.cn/CN/volumn/current.shtml 爬取目标为下图红色圈出部分右键选择复制XPath /html/body/table/tbody/tr[2]/td/table/tbody/tr/td[2]/table/tbody/tr...

TBODY标签的作用

阿旺之家

03-29

2381

每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。THEAD、TFOOT包含关于表格列的信息。TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，

Html标签中thead、tbody、tfoot的作用