表格边框
指定CSS表格边框,使用border属性。
下面的例子指定了一个表格的th和td元素的黑色边框:
![](https://img-blog.csdnimg.cn/img_convert/97a4ac429b9d6c48c97fa23501d09ac3.png)
在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框,使用 border-collapse属性
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:
![](https://img-blog.csdnimg.cn/img_convert/799f595ad90c336405dc3ce63a57bef5.png)
表格宽度和高度
Width和height属性定义表格的宽度和高度。
下面的例子是设置100%的宽度,50像素的th元素的高度的表格:
![](https://img-blog.csdnimg.cn/img_convert/0c8fa0aa45addacfd8ab6f2c67c3f80f.png)
表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式,向左,右,或中心:
![](https://img-blog.csdnimg.cn/img_convert/177a84de1079bcb3115637e3ede63221.png)
垂直对齐属性设置垂直对齐,比如顶部,底部或中间:
![](https://img-blog.csdnimg.cn/img_convert/04fb274d773efa21a0e808e01b7bdc55.png)
表格填充
如需控制边框和表格内容之间的间距,应使用td和th元素的填充属性:
![](https://img-blog.csdnimg.cn/img_convert/fa332e05cd400b3ced4b966b580a0581.png)
表格颜色
下面的例子指定边框的颜色,和th元素的文本和背景颜色:
![](https://img-blog.csdnimg.cn/img_convert/6bac0478449d2df4ad855c9e93d873f4.png)
eg:
![](https://img-blog.csdnimg.cn/img_convert/c21bac12b8a8006089236b60abbdf7b3.png)
![](https://img-blog.csdnimg.cn/img_convert/dc91d5f963b3625365e5e777339200b9.png)
结果:
![](https://img-blog.csdnimg.cn/img_convert/96e89e9bf4ec3c43d45a0cea3939aea3.png)