单元格是表格的重要组成部分，如何只修饰一个单元格?单元格 td又有哪些属性?

　　先来准备一个表格。

　　打开编辑器，新建一个 table_td.html 文件，准备好基础代码，在body里面编写 Emmet 语句， table>tr*3>td*3，创建一个 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 就在右下角显示了。

　　单元格的基本属性就介绍完了。大家一定要多练多记，加油!

上一篇

表格行标签的属性

下一篇

关于JavaScript里的Async那些事儿