• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

table、tbody、tr、th、td详细说明_前端技术

当前位置：网站建设 > 技术支持

网页中的表格常用table、tbody、tr、th、td这些标签，开发者也都常用，但还是经常有不懂之处，特别是对于没有系统学习过HTML的更是，个人对于table、tbody、tr、th、td运用的也不是很娴熟。

tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。

td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。

有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：

想在网页上展示上述表格效果可以使用以下代码：

创建表格的四个元素：

table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

上述代码在浏览器中显示的默认的样式为：

总结：

1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

2、表头，也就是th标签中的文本默认为粗体并且居中显示

附加说明：

1、当我们要理解这个<table>元素的时候，其实际只需要认真记住三个标签就行了，就像很多的事情我们都要去做，但是有先后顺序，重要的和次要的，你只要将<table>（构建表格）、<tr>（行）、<td>（单元格）记牢，其他两个<th>（表头，加粗的td）、<tbody>标签作为附加的就好，等你需要构建表格的时候，遇到不懂的上搜索引擎一搜就是；其实有很的事情我们都不需要去记，因为记忆也只是解决问题的一种方法，你需要知道的就是：方法总比问题多，但你遇到解决不了问题的时候，多想有什么方法去解决，而不是通过所谓“唯一的方法”去死磕这个问题。

2、<tr>表示为一个表格的一行，而<td>或者是<th>表示为行（<tr>）中的单元格，不能叫做列哦，那样你在头脑中的概念上会出错；需要理解上的一句话，你需要知道浏览器的渲染过程，整个网页的加载顺序按照从上到下的顺序进行，所以在加载表格的时候，也是一样的，先是生成一行然后是行中的单元格，最终拼成一个表格，而不是我们平常看到的一张表格的形象；记住表格是由一行一行的拼凑而成的！

3、<table>表格
<tbody>表格 内容全部下载完以后才显示出来，如果不加，默认的是一边下载一边显示出来
<th>表头，默认文本加粗，居中
<tr>表格中的一行，有多少对<tr>就有多少行
<td>表格中的一个单元格，一对<tr>中包含几对<td>,说明一行中就有几列

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。