CSS样式表基础(十二)——表格

16、表格

CSS———表格————————属性

  • border——collapse——————设置是否把表格边框合并为单一的边框。
  • border——spacing—————— 设置分隔单元格边框的距离。
  • caption——side ——————— 设置表格标题的位置。
  • empty——cells ——————— 设置是否显示表格中的空单元格。
  • table——layout——————— 设置显示单元、行和列的算法。

1) border-collapse 规定是否合并表格边框。
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

2) border-spacing 规定相邻单元格边框之间的距离
如果定义一个数值,那么定义的是水平和垂直间距。
如果定义两个数值,那么第一个设置水平间距,而第二个设置垂直间距。

3) caption-side 规定表格标题的位置。
top 默认值。把表格标题定位在表格之上。
bottom 把表格标题定位在表格之下。

4) empty-cells 规定是否显示表格中的空单元格上的边框和背景。
hide 不在空单元格周围绘制边框。
show 在空单元格周围绘制边框。默认。

5) table-layout 设置用于表格的布局算法
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。

  • 使用 border 属性设置表格边框

  • 通过 width 和 height 属性定义表格的宽度和高度

  • text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中

  • vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐

  • 为 td 和 th 元素设置** padding 属性,控制表格中内容与边框的距离**

修改表格位置:
table{
position: absolute;
top: 100px;
left: 20%;
}
修改caption:
table caption{
font-size:30px;
}

全部评论

相关推荐

害怕一个人的小黄鸭胖乎乎:笑死了,没有技术大牛,招一堆应届生,不到半年,代码就成屎山了
点赞 评论 收藏
分享
球球别再泡了:坏,我单9要了14
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务