零基础教你学前端——20、表格属性

陆荣涛 - 2022-10-26 06:38:25

这节课我们来学习 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 ，保存回到浏览器，刷新，表格居中对齐了。