秀文网 > 杂谈 > 正文

​css 经典表格(css基础篇11--表格样式)

时间:2023-09-04 12:06

来源:秀文网

点击:

css 经典表格(css基础篇11--表格样式)

目标

表格边框合并表格边框的间距设置表格标题位置的设置

表格可以说是网页必备的元素之一,但是原生的表格样式都是很丑,列如表格加入边框的默认情况下,单元格与单元格之间有一定的空隙;设置单元格边框间距等等,都是可以通过css来设置自己的默认样式

表格边框合并

默认情况下,表格有边框的情况下,内部看似有一层填充物,其实是表格的外边框和内部单元格的间距。

这层间距是可以通过表格的标签属性进行设置,让它看起来像是合并了一样,但是这样的合并并不完美,会得到一个很粗的边框。

理想中的边框合并,应该达到exelce表格那样,是一个细线表格。Css专门有个属性是为了表格边框合并服务的。

语法:border-collapse:属性值

css 经典表格(css基础篇11--表格样式)(1)

属性值

会发现,通过css控制合并和通过标签属性合并的效果都不一样,通过css控制的效果跟exelce表格一模一样,属于细线表格。

css 经典表格(css基础篇11--表格样式)(2)

对比图

表格边框间距

如果想自己设置表格边框的间距,一样是可以通过css来控制。

语法:border-spacing:像素值;

这个属性可以设置两个值。指定了1个像素值时,这个值将作用于横向和纵向上的间距;当指定了2个length值时,第1个作用于横向间距,第2个作用于纵向间距。

css 经典表格(css基础篇11--表格样式)(3)

两个值

css 经典表格(css基础篇11--表格样式)(4)

边框被拉大

单元格之间的距离也是一样的。

表格标题位置

表格的标题不一定都是设置在表格的上方,也有可能是设置在下方。

可以使用css来定义表格标题的位置

语法:caption-side:属性值;

css 经典表格(css基础篇11--表格样式)(5)

属性值

这样就可以得到一个倒置标题的表格

css 经典表格(css基础篇11--表格样式)(6)

标题倒置

总结

这些表格样式属性可能会有不少人会觉得很陌生,是因为这些样式属性都是用来做重置样式,只需要写一次,以后再也不用动它了!

css 经典表格(css基础篇11--表格样式)(7)

总结

,

相关标签:

相关推荐

​360度反馈名词解释(如何成功地收集和使用360度的反馈意见)

​360度反馈名词解释(如何成功地收集和使用360度的反馈意见)

360度反馈名词解释(如何成功地收集和使用360度的反馈意见) 为员工提供360度反馈对组织和个人都非常有益。360度反馈通过考虑整个组织的多种观点,准确地评估个人的表现,有助于最...

2023-09-04 12:04:31

​最正宗叫花鸡做法(叫花鸡的秘制配方)

​最正宗叫花鸡做法(叫花鸡的秘制配方)

最正宗叫花鸡做法(叫花鸡的秘制配方) 叫花鸡”原出于江苏常熟,是一些穷苦难民(或叫要饭的)偷来的鸡,用泥巴把鸡包起来,架火烧泥巴,泥烧熟了鸡也就熟了,这是一道登不了...

2023-09-04 12:02:15

​节奏大师的玩法技巧(教你节奏大师如何爆高分的技巧)

​节奏大师的玩法技巧(教你节奏大师如何爆高分的技巧)

节奏大师的玩法技巧(教你节奏大师如何爆高分的技巧) 有没有节奏大师的高手在呢?接下来你将会听到我的呼唤哦。 节奏大师这款游戏呢,是非常可以锻炼自己的反应能力和眼睛的...

2023-09-04 12:00:00

​复古耐看的真人小众头像(一键查询Q龄)

​复古耐看的真人小众头像(一键查询Q龄)

复古耐看的真人小众头像(一键查询Q龄) 你还记得之前刷屏的 QQ 轨迹吗?一键查询 QQ 黑历史:什么开始注册 QQ ?自己换过什么辣眼睛的非主流头像?在 QQ 空间里存了多少张自拍?...

2023-09-04 11:57:45

​创意手工环保袋制作(为环保尽一份力)

​创意手工环保袋制作(为环保尽一份力)

创意手工环保袋制作(为环保尽一份力) 现在提倡环保,所以我们要多用布袋子,尽量不用塑料袋,大家可以用旧床单缝一个袋子,平时买菜、逛超市用都很方便。 购物袋的做法也比...

2023-09-04 11:55:30

​博人传193集雏田(博人传作画被吐槽)

​博人传193集雏田(博人传作画被吐槽)

博人传193集雏田(博人传作画被吐槽) 相较于《火影忍者》在全世界的高人气,《博人传》虽然是紧接着《火影忍者》的后续故事,口碑和评价却差了很多,记得上一次这部动画受到大...

2023-09-04 11:53:15

​verawang婚纱华丽款(婚纱女王Vera Wang被选为最新)

​verawang婚纱华丽款(婚纱女王Vera Wang被选为最新)

verawang婚纱华丽款(婚纱女王VeraWang被选为最新) 芭比娃娃制造商美国美泰玩具公司Mattel近日宣布,72岁华裔女设计师Vera Wang王薇薇被选为最新“芭比女性榜样”,这款芭比娃娃将以Ve...

2023-09-04 11:51:00

​王皓现在婚姻(37岁王皓妻子酷似陈乔恩)

​王皓现在婚姻(37岁王皓妻子酷似陈乔恩)

王皓现在婚姻(37岁王皓妻子酷似陈乔恩) 曾经听到过这样一句话,中国对乒乓球的统治就如美国统治篮球界一样,外人根本不能威胁到霸主地位,也确实如此,中国乒乓球界涌现了太...

2023-09-04 11:48:45

​费尔巴哈的主要哲学观点

​费尔巴哈的主要哲学观点

费尔巴哈的主要哲学观点 费尔巴哈的三部哲学史著作虽然没有摆脱黑格尔唯心主义观点的影响,但对近代唯物主义热情地给予了肯定的评价,明确地把哲学同宗教对立起来,把哲学发展...

2023-09-04 00:04:32

​斗破苍穹第42大结局

​斗破苍穹第42大结局

斗破苍穹第42大结局 斗破苍穹大结局是萧炎牺牲自己的肉身消灭了魂灭生,后复活帮助古族族长,龙族老龙王以及熏儿,美杜莎突破到斗帝,最后五帝破空到另外一个位面探索斗帝消失...

2023-09-04 00:02:17

​电脑键盘总是连发怎么办

​电脑键盘总是连发怎么办

电脑键盘总是连发怎么办 FN+F1同时点击关闭。 1,ducky的键盘有功能区,就是FN+F1~F8。默认是Fn+F1,Fn+F5组合。 2, Fn+F1~F4是调整键盘响应速度的,就是你按下键后多少时间电脑给出反应,...

2023-09-04 00:00:02

​当我踏上这条道路原唱

​当我踏上这条道路原唱

当我踏上这条道路原唱 歌曲:这条道路nbsp 原唱:叶翠 词:叶翠 曲:叶翠 歌词:这条道路 追寻阳光,当我踏上这条道路 追寻阳光,冲破黑暗 穿越沧桑,一寸河山 一腔热血,前赴后继 挺起脊...

2023-09-03 23:57:47

​城的组词有哪些

​城的组词有哪些

城的组词有哪些 组词:城楼、京城、城乡、县城 例句1、天安门城楼修饰一新,更显得雄伟壮丽。 2、节日的天安门城楼显得更加雄伟壮丽。 3、广场北端耸立着雄伟的天安门城楼。 4、...

2023-09-03 23:55:32

​不忘初衷,方得始终什么意思

​不忘初衷,方得始终什么意思

不忘初衷,方得始终什么意思 一直坚持去做最初的选择,才能得到圆满的结果。 生活总是在我们,规划的目标中去设置,很难跨越的沟沟坎坎,如果退却了,就永远实现不了当初制定...

2023-09-03 23:53:17

​奔跑吧兄弟追列车的是那一期

​奔跑吧兄弟追列车的是那一期

奔跑吧兄弟追列车的是那一期 奔跑吧兄弟第三季第十期有轨电车接力赛 陈赫最后一棒成功登上电车。 第一项挑战,“有轨电车接力赛”,跑男团的兄弟们都惊呆了!千辛万苦追上列车但...

2023-09-03 23:51:02

​备案车辆什么意思

备案车辆什么意思 就是给机动车办理注册登记,机动车备案需要携带机动车所有人的身份证明,购车发票或车辆来历证明,机动车出厂合格证明或进口凭证,机动车购置税和交强险以及...

2023-09-03 23:48:47

​巴西队历年的教练

​巴西队历年的教练

巴西队历年的教练 历届世界杯巴西队的主教练分别是: 2018年主教练:蒂特、2014 主教练:斯科拉里、2010 主教练:邓加、2006 主教练:卡洛斯·帕雷拉、2002 主教练:路易斯·斯科拉里、...

2023-09-03 23:46:32

​water是什么牌子的表

​water是什么牌子的表

water是什么牌子的表 waterresistant不是手表的品牌,是防水的意思,手表上有这个词代表手表有防水的功能。 防水手表可以分为普通防水和专业防水,使用非防水手表的时候,要避免直接...

2023-09-03 23:44:17

​请问秦国统一六国的先后顺序

​请问秦国统一六国的先后顺序

请问秦国统一六国的先后顺序 nbsp秦灭六国的顺序韩、赵、魏、楚、燕、齐六国 。 公元前230年,韩国灭亡。公元前229年,赵国灭亡。公元前225年,魏国灭亡。公元前225年,楚国灭亡。公...

2023-09-03 22:57:05

​橘子石适合什么人戴

​橘子石适合什么人戴

橘子石适合什么人戴 1、学生 橘子石适合学生佩戴,橘子石可以帮助青少年集中注意力,平复浮躁的心态,提升学习的效率,缓解学习带来的疲劳与压力,使得成绩能够有所提高,对学...

2023-09-03 19:38:14