零基础教你学前端——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 垂直居中对齐。