HTML表格标签,及表格的三大常用的组件标签

HTML中的表格有什么作用?个人认为,表格不但可以让页面更加整洁,而且也可以让表格中的数据更加清晰。

HTML表格标签

<table></table>

HTML表格的三大常用的组件标签

个人在使用HTML表格的时候,比较常用的组件标签有三个,都包含在<table>标签之内,而且使用这些组件标签便可完成一个表格(其它的组件标签见文章末尾部分的表格),如下:

  • <tr></tr>:表格的行标签;
  • <th></th>:表头标签,一般包含在行标签tr之内;
  • <td></td>:单元格标签,一般也包含在tr行标签之内;

HTML表格标签实例代码

<table border='1'>
	<tr><th>姓名</th><th>年龄</th></tr>
  
  	<tr><td>小明</td><td>20</td></tr>
   <tr><td>小花</td><td>21</td></tr>
</table>

代码解析

如上代码,border=‘1’是将表格的边框像素设置成1像素,如果不设置的话,表格便没有横竖线,大家可以运行试一试。当然,这表格是比较基础的——还未添加样式。关于引入框架后的表格样式,可以参考下面的这个表格。


表格其它的标签

标签 描述
<caption> 表格的标题部分
<thead> 表格的表头部分,上述的存放th标签的tr标签一般放在这里;
<tbody> 表格的主体内容部分,上述存放td单元格标签的tr标签一般放在这里;
<tfoot> 表格的页脚或脚注、表注
<col> 规定表格每一列的相关属性,没有结束标签
<colgroup> 对表格中的列进行组合格式化

全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.