乐趣区

关于前端:零基础教你学前端20表格属性

这节课   咱们来学习 table 标签的一些润饰属性。剖析这个案例,不难发现,表格第一行中的文本有加粗成果,这个成果该如何实现呢?兴许你会想到利用标签 b,在 td 外部加粗文本,其实    html 表格还有一个标签 th,同样能够实现这个成果,而且语义性更强。

th  是 table header cell 的缩写,意为表头单元格,语法和 td 相似。须要被包裹在 tr 里,在浏览器中,th 标签外部的文本加粗并居中。

回到编辑器,咱们把第一行中的 td 换成 th,保留。

回到浏览器,刷新,表格头部成果实现了。

接下来咱们实现表格线成果。绘制表格线其实很简略,只需给 table 增加一个 border 属性,值是一个数值,用来定义线条的粗细。

回到编辑器,在 table 标签上,输出一个空格,接着书写属性 border  等于  引号   引号外面定义数值 1,保留。

回到浏览器,刷新,表格的边框实现了。仔细观察案例中的表格    它还领有本人的宽度和高度,这让表格看起来更加的好看。给表格的增加宽度和高度,须要在 table 标签 上持续增加一个 width   (读作 [wɪdθ])   属性,值是一个数字,定义表格的总宽度,再增加一个 height  属性,值也是一个数字,定义表格的总高度。

回到编辑器,在 table 的 border 属性前面敲一个空格,定义一个 width 属性,宽度设置为 500,再敲一个空格,定义一个 height 属性,高度设置为 150,保留。回到浏览器,刷新,表格领有了本人的宽高,看起来好看多了。持续察看案例的成果,每一个单元格之间是没有间隙的,在浏览器中按下 ctrl+A  选中表格   不难发现,文本和单元格左侧边框之间,也存在一个小间隙,这些间隙该如何勾销呢?

这就须要应用 table 标签专属的,cellspacing  和  cellpadding   两个示意间距的属性了,cellspacing 定义是单元格之间的间隔,cellpadding 定义单元格边框和文本之间的间隔。回到编辑器,给 table 标签 持续增加一个属性 cellspacing,值设置成 0,保留

回到浏览器,刷新,单元格之间的间距隐没了。

返回编辑器,在 cellspacing 的属性前面,再为 table 标签 增加一个 cellpadding 属性,值也设置成 0 再次回到浏览器,刷新,ctrl+A,文本贴边显示了,不再有间距了。

当然    想让单元格之间的间距   或者单元格与文本之间的间距变大    调整间距属性值就能够了。再来察看案例成果,表格位于浏览器的程度居中地位,这个成果通过给表格增加 align 属性来实现,它的作用是定义表格在页面中,程度方向的对齐形式,取值共有三个:别离是 left 左侧对齐,center 居中对齐,right 右侧对齐,回到编辑器,在 table 里增加 align 属性,值设置成 center,保留回到浏览器,刷新,表格居中对齐了。

如果想持续丑化表格,还能够为 table 增加 bgcolor 属性,用来润饰表格的背景色彩,增加 bordercolor 属性用来润饰表格边框的色彩。

回到编辑器,在 table 里增加 bgcolor    等于   引号   red   红色,再增加 bordercolor   等于   引号   green   绿色,保留。回到浏览器,刷新,这样就给表格增加了一个红色背景,绿色的边框,

如果想要把表格润饰的更加的好看,就期待后边的 CSS 的学习吧。

文章配套视频链接

退出移动版