一个美化的表格（页面效果+实现步骤）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情
昨天学习了如何用html语言绘制一个简单表格制作一个有表格的html页面（页面效果+实现步骤） - 掘金 (juejin.cn)，今天来学习如何把昨天的表格变得更好看，比如让边框颜色、背景颜色、文字位置等，今天学习完将能实现如下效果：

昨天学习了制作表格要用到的标签有table标签、tr标签、td标签。今天学习它们各自的属性。

table标签属性

将昨天实现的表格放大，可以看到如下效果：

图中绿色部分即为一个单元格，这个表格的每个单元格分别为一个矩形框，各个矩形框之间会有一个间隔（这个间隔的大小称为cellspacing）。
同时，每个单元格为一个矩形框，构成一个表格之后，整个表格还被包裹在一个更大的矩形框之中，这个最大的矩形框与靠近表格边缘的单元格矩形框的一个边之间也有一个间隔，这个间隔也叫做cellspacing。

看图可以发现单元格重大的文字与单元格边框之间也是有一定的距离的，其中文字与单元格左边框之间的间隔叫做cellpadding。

属性	属性值	含义
width	可以写百分比也可以写数字px	属性值为百分比时，百分比是相对于table的父标签body的宽度而言的 即table宽度=body宽度*百分比 。属性为数字px时，table宽度=所设置的像素宽度
height	同width标签	类似width标签，table高度=body高度*百分比或table高度=所设置的像素高度
border	数字px，属性值可以空着不写，默认值为1px	表示表格边框的宽度，border宽度=所设置的像素宽度
bordercolor	各种颜色的英文单词	设置的是边框颜色，包括表格边框和各个单元格边框的颜色
bgcolor	各种颜色的英文单词	可以修改背景颜色（bgcolor是background color的缩写）
align	left right center	整个表格水平对齐方式,三个属性值分别对应水平居左、水平居中和水平居右
cellspacing	数字px	各个单元格间间距+单元格与表格外框的间距，属性值可以写0,表示取消单元格之间间距以及单元格与表格之间的间距
cellpadding	数字px	单元格中的内容与单元格左边边框的间距，可以设置属性值为0，能够使所有文字都在当前单元格中水平居左

以上属性都可以加在table标签的开始标签中，添加多个属性时应该注意各个属性之间有空格隔开

tr标签属性

tr是table row的缩写，这个标签的属性标签是针对表格的一整行的
tr标签没有宽度属性

属性	属性值	含义
height	数字px	高度可以大于table的高度属性，是单独设置的
bgcolor	各种颜色的英文单词	该行背景颜色
align	left right center	该行单元格中文字的水平方向的对齐方式（分别为居左、居中和居右），默认是居左
valign	top middle bottom	该行单元格中文字的垂直方向的对齐方式（分别是位于顶部、中间和底部），默认是居中

td标签属性

td标签的属性在昨天已经学习过了，rowspan 和 colspan两个属性，正确的运用能够让表格实现单元格之间的合并。
可以对单个单元格的背景颜色进行修改，在要修改颜色的单元格 td 标签的开始标签上加 bgcolor="要改变的颜色"即可。
tr标签的valign对td标签同样适用，使用这个标签可以单独改变某一个单元格中文字垂直方向上的对齐方式

到此表格标签的属性就学习结束了，可以使用上述内容制作一个好看的表格，或者根据昨天制作的结果实现本文开头的图片效果

注意

• 今天和昨天的表格都是居于页面中间的但实现方法不同
  • 昨天的方法：给整个表格标签外嵌套一个center标签。
  • 今天的方法：给table标签设置水平对齐方式为居中。
• 表格的第一行实现的效果是除了最右边单元格的文字内容为底部居中外，其他的为水平垂直都居中
  • 实现方法1：给第一行的tr标签设置水平和垂直对齐方式为居中，再单独给第一行最右边的单元格设置垂直方向位于底部。
  • 实现方法2：对各个单元格设置需要的样式。

更多的表格标签属性的效果可以参考文章：HTML：关于表格 - 掘金 (juejin.cn)

参考代码