当前位置: 首页 > Web前端 > HTML5

零基础教你学前端——21.表格行标签的属性

时间:2023-04-04 23:36:29 HTML5

本课学习表格行tr标签的相关属性。继续上节课的例子,我们先调整表格行tr的高度。只需在tr—height中添加一个属性,并为高度值设置一个数字。回到编辑器,在表格的第一个tr中添加height属性,设置值为100,保存!回到浏览器,刷新,很明显第一行所有单元格的高度都增加了!表格的总高度没有变化,但是因为第一行的高度增加了,其他三行的高度都被挤压了。使用表格时,如果单元格内的文本数量相同,则所有单元格将平均共享表格的宽度和高度。如果某个单元格的内容增加或减少,就会导致单元格大小不一致。这种被挤压的情况是因为表格的整体高度固定为150,第一行的高度已经占了100,剩下的三行只能平均分配剩下的高度。按照惯例,下一步就是设置tr的width属性,但是需要注意的是W3C官方公布的tr属性中并没有width属性。我们可以给tr添加bgcolor属性来设置tr的背景色。颜色值可以用一个英文单词来表示,比如redred。回到编辑器,在第一行给tr添加一个bgcolor属性,设置值为yellow,保存。接下来,想一个问题。我们给表格添加了bgcolor属性,值为红色,我们也在表格的第一行添加了bgcolor属性,值为黄色。这时,第一行的背景色会是什么?回到浏览器,刷新,第一行的背景色变成了黄色。不难得出结论,如果在表格的不同标签上定义相同的属性,浏览器会使用就近原则来渲染。也就是说,后代标签属性的渲染优先级高于父标签。学完这个,你还会发现一个小规则——每个添加到tr标签的属性都可以应用到这一行的每个td单元格。接下来我们学习tr的align属性和valignfai属性。align属性用于设置tr中所有单元格内容的水平对齐方式。align的取值有:left为左对齐;center中心对齐;右对齐。valign属性用于设置tr中所有单元格内容的垂直对齐方式。valign的取值有:top顶部对齐;中间居中对齐;底部对齐。单元格中文本的默认对齐方式是:水平左对齐,垂直居中对齐。回到编辑器,如果第一行的所有单元格文本都右下角对齐,需要给第一行tr添加align属性,设置值为right。继续添加valign属性,设置值为bottom,保存。回到浏览器,刷新,第一行的所有文字都显示在右下角。文章配套视频链接