关于前端:零基础教你学前端21表格行标签的属性

32次阅读

共计 1005 个字符,预计需要花费 3 分钟才能阅读完成。

这节课,学习表格行 tr 标签的相干属性。持续沿用上节课的案例,咱们先来调整表格行 tr 的高度。

只须要给 tr 增加一个属性——height,高度值设置一个数字。回到编辑器,在表格的第一个 tr 中增加 height 属性,值设置成 100,保留!

回到浏览器,刷新,很显著第一行所有单元格的高度都减少了!

表格总高度没有变,但因为第一行高度减少,另外三行高度被挤压了。在应用表格的时候,如果单元格外部文本数量统一,全副单元格就会均分表格宽度和高度,如果某一个单元格的内容减少或者是缩小,就会呈现单元格大小不统一的状况。这个被挤压的状况,就是因为表格的整体高度固定为 150,第一行高度曾经占据了 100,残余三行只能平均分配残余高度了。依照常规,下一步该设置 tr 的宽度属性了,但须要留神的是——W3C 官网颁布的 tr 属性中是没有宽度属性的。咱们能够给 tr  增加 bgcolor 属性,用来设置 tr 的背景色彩,色彩值能够用一个英语单词来示意,比方  red  红色。回到编辑器,给第一行的 tr  增加一个 bgcolor 属性,值设置成 yellow   保留。

接下来思考一个问题,咱们给 table 增加 bgcolor 属性,值为 red,同时再给 table 的第一行也增加 bgcolor 属性,值为 yellow,这时,第一行的背景色彩会是什么呢?回到浏览器,刷新,第一行的背景色彩变成了黄色。不难得出结论,如果在表格的不同标签上,定义了雷同的属性,浏览器会采取就近准则来渲染。或者说,后辈标签属性渲染的优先级高于父级标签。学到这里,你还会发现了一个小法则——增加到 tr 标签下面的每一个属性,都能作用在这一行里的每个 td 单元格上。接下来咱们学习 tr 的 align 属性 和 valign fai 属性。align 属性用来设置 tr 外部所有单元格内容的程度对齐形式。align 的取值有:left 左侧对齐;center 居中对齐;right 右对齐。valign 属性用来设置 tr 外部所有单元格内容的垂直对齐形式。valign 的取值有:top 顶部对齐;middle 居中对齐;bottom 底部对齐。

单元格中文本默认的对齐形式为:程度左侧对齐,垂直居中对齐。回到编辑器,如果实现第一行中的所有单元格文本都右下角对齐,须要给第一行 tr 增加 align 属性,值设置为 right。持续增加 valign 属性,值设置成 bottom,保留。

回到浏览器,刷新,第一行中的所有的文本都在右下角显示了。

文章配套视频链接

正文完
 0