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

零基础教你学前端——22.单元格属性

时间:2023-03-28 00:31:18 HTML

单元格是表格的重要组成部分,如何只修改一个单元格?单元格td的属性是什么?先准备一张表格。打开编辑器,新建一个table_td.html文件,准备基础代码,在body中写上Emmet语句,table>tr3>td3,创建一个3行3列的表格,在每个td中添加对应的数字。为了让表格看起来更漂亮,给表格标签添加一些属性,宽300,高300,边框线,宽1。alt+b在浏览器中打开页面,带有数据和边框线的表格已准备就绪!我们发现目前在不设置单元格宽高的情况下,每个单元格的宽高会平均分配给整个表格的宽高。和表格行tr一样,我们可以给td加上width——单元格宽度,height——单元格高度,bgcolor——单元格背景色。回到编辑器,给第一行宽度的第一个单元格加上,等于,引号,设置单元格宽度为150,保存。回到浏览器,刷新,我们看到每行第一个单元格的宽度都变成了150,可以看出调整任意一个单元格的宽度都会影响到该单元格所在列的所有单元格的宽度位于。返回编辑器,为td添加第二个属性height。在第一行第一个单元格中再添加一个属性height,等于,引号,将单元格的高度设置为150,保存。回到浏览器,刷新,我们看到单元格所在行的所有单元格的高度都变成了150,可以看出调整任意一个单元格的高度都会影响该行每个单元格的高度单元格所在的位置返回到编辑器并为td添加第三个背景颜色(bgcolor)属性。对于这个单元格td,添加bgcolor,等于,引号,设置背景色为红色,红色,保存。回到浏览器,刷新,背景色出现在第一个单元格中。可以看出,同样的bgcolor属性添加到tr时,会设置整行单元格的背景色,添加到td时,只会设置单元格的背景色。单元格td,还可以添加align属性来设置单元格中内容的水平对齐方式。它有3个值:left是水平向左对齐;right向右水平对齐;center水平居中。相应的,你也可以添加valign属性来设置单元格中内容的垂直对齐方式。它也有三个值,分别是——topverticaltopalignment;底部垂直底部对齐;中间垂直居中对齐。先回到浏览器,可以看到每个单元格中的文字默认水平左对齐,垂直居中。现在我们让数字1显示在右下角。回到编辑器,给第一个单元格添加一个align属性,值就对了;再添加一个valign属性,值为bottom,保存。回到浏览器,刷新,右下角显示数字1。介绍了细胞的基本性质。大家一定要多练多背,加油!点我看文章配套视频