html中th与thead的详细区别

html中th与thead的详细区别,第1张

HTML中的table可以大致分为三个部分:thead ----------表头tbody ----------表躯干tfoot ----------表注一般来说:数据的标题放在thead里面,数据放在tbody里面,表格的注释放在tfoot里面。thead, tbody, tfoot三个标签的使用目的是把一个表格分成三个大的部分,每个部分存放不同的东西,这样这个表格就会比较有结构。所以说:thead, tbody, tfoot相当于三间房子,每间房子都可以用来放东西,主要是把比较相同的东西放在一个房间,这样就容易区分。<tr></tr>这个标签就是放在三间房子里面的东西,每一个<tr></tr>就是表格一行,你如果打开一张Excel表格就会发现每张表格都是一行一行的。表格的每一行都分为一个一个的小格子,这个就叫------单元格。每一个单元格就是用来存放数据的,这个数据分为两种:一,数据的名称;二,数据本身。比如一张课程表: 星期一 星期二8:00语文 数学10:00 历史 政治其中的“星期一” “星期二” “8:00” “10:00” “语文” “数学” “历史” “政治”都是数据,却在于,“星期一” “星期二” “8:00” “10:00”等于数据的名称,“语文” “数学” “历史” “政治”才是真正的数据。在HTML中,为了把数据名称和真正的数据区别开来,用<th></th>表示数据的名称,也就是标题。<td></td>表示真正的数据内容。所以,以上的那张表格如果用HTML写,那么“星期一” “星期二” “8:00” “10:00”都放在<th></th>里面;“语文” “数学” “历史” “政治”则放在<td></td>里面。

这个只是在传统表格上的一个改进,但是在刚出来时因为糟糕的浏览器支持而没有被广泛应用。随着xhtml的推广和流行,这些标签渐渐的进入了主流的设计中。

这几个标记主要是用于提高table标签的加载以及显示的,说白了,就是分布加载。在传统的浏览器,在加载<table><tr><td>时,是当所有的标签中元素都被下载后才会显示,当然这样的用户体验是不好的。再加入了这几个t打头的标签后,table就会分布的加载table中的元素,顺序依据写在table中的标签顺序进行。

<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之内


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6232479.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存