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

陆荣涛 - 2022-10-27 21:47:57

这节课，学习表格行 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底部对齐。