乐趣区

关于html5:零基础教你学前端22单元格属性

单元格是表格的重要组成部分,如何只润饰一个单元格?单元格 td 又有哪些属性?先筹备一个表格。关上编辑器,新建一个 table_td.html 文件,筹备好根底代码,在 body 外面编写 Emmet 语句,table>tr3>td3,创立一个 3 行 3 列的表格,在每一个 td 里增加对应的数字。

为了让表格看起来更加的好看,给 table 标签增加一些属性,宽度为 300,高度为 300,边框线, 宽度为 1。alt + b 在浏览器中关上页面,带有数据和边框线的表格曾经做好了!

咱们发现——目前在没有给单元格设置宽度和高度的状况下,每个单元格的宽高会平均分配整个表格的宽高。和表格行 tr 一样,咱们能够给 td 增加 width——单元格宽度,height——单元格高度,bgcolor——单元格背景色. 回到编辑器,在第一行的第一个单元格上增加 width,等于,引号,把单元格的宽度设置成 150,保留。回到浏览器,刷新,咱们看到:每一行第一个单元格的宽度都变成了 150。

可见,调整任何单元格的宽度,都会影响该单元格所在列的所有单元格的宽度。

返回编辑器,为 td 增加第二个属性,高度 (height)。在第一行的第一个单元格上再增加一个属性 height,等于,引号,把单元格的高度也设置成 150,保留。回到浏览器,刷新,咱们看到:单元格所在行的   所有单元格的高度    都变成了 150。

可见    调整任何单元格的高度    都会影响该单元格所在行的每个单元格的高度返回编辑器,为 td 增加第三个背景色彩 (bgcolor) 属性。给这个单元格 td,再增加 bgcolor,等于,引号,背景色彩设置为 red,红色,保留。

回到浏览器,刷新,第一个单元格呈现了背景色彩。

可见,同样的 bgcolor 属性,增加在 tr 下面的时候,会设置一整行单元格的背景色彩,增加在 td 下面的时候,只会设置该单元格的背景色彩。单元格 td,还能够增加 align 属性,用来设置单元格外面内容的程度对齐形式,它的值有三个    别离是——left 程度左侧对齐;right 程度右侧对齐;center 程度居中对齐。绝对应,也能够增加 valign 属性,用来设置单元格外面内容的垂直对齐形式,它的值也有三个,别离是——top 垂直顶部对齐;bottom 垂直底部对齐;middle 垂直居中对齐。

先回到浏览器,能够看出每个单元格中的文本,默认是程度左侧对齐,垂直居中对齐显示的,当初咱们让数字 1 在右下角对齐显示。回到编辑器,给第一个单元格再增加一个 align 属性,值为 right;再增加一个 valign 属性,值为 bottom,保留。

回到浏览器,刷新,数字 1 就在右下角显示了。

单元格的根本属性就介绍完了。大家肯定要多练多记,加油!

文章配套视频点我

退出移动版