css设置表格的属性有哪些

css设置表格的属性:1、border-collapse属性,折叠表格边框;2、padding属性;3、border-spacing属性;4、caption-side属性;5、empty-cells 属性;6、table-layout属性。

css设置表格的属性有哪些

css/editerView/ck_htmledit_views-b5506197d8.css”/>

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS表格:

属性

描述

border-collapse

立即学习“前端免费学习笔记(深入)”;

设置是否把表格边框合并为单一的边框。

border-spacing

设置分隔单元格边框的距离。

caption-side

设置表格标题的位置。

empty-cells

设置是否显示表格中的空单元格。

table-layout

设置显示单元、行和列的算法。

1. 折叠表格边框:border-collapse 属性

(1)作用:设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示;

(2)补充知识点:表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

(3)可能的值:

描述

separate

默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse

如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit

规定应该从父元素继承 border-collapse 属性的值。

(4)浏览器的支持性:所有主流浏览器都支持 border-collapse 属性。

Ps: 必须规定 !DOCTYPE,否则 border-collapse 可能产生意想不到的结果。

2. 表格内边距:padding属性

#作用:控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性;

3. 边框分离:border-spacing 属性

(1)作用:该属性指定分隔边框模型中单元格边界之间的距离。除非 border-collapse 被设置为 separate,否则将忽略这个属性。尽管这个属性只应用于表,不过它可以由表中的所有元素继承。

(2)可能的值:

描述

length length

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

如果定义一个length参数,那么定义的是水平和垂直间距。

如果定义两个length参数,那么第一个设置水平间距,而第二个设置垂直间距。

inherit

规定应该从父元素继承   border-spacing 属性的值。

(3)浏览器的兼容性:除IE外的所有主流浏览器都支持 border-spacing 属性。如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 border-spacing 属性。

4. 表格标题:caption-side属性

(1)作用:设置表格标题的位置,该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前(或之后)的一个块级元素。

(2)可能的值:

描述

top

默认值。把表格标题定位在表格之上。

bottom

把表格标题定位在表格之下。

inherit

规定应该从父元素继承 caption-side 属性的值。

(3)浏览器的兼容性:除IE外的所有主流浏览器都支持 caption-side 属性。如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 caption-side属性。

5. 空单元格的处理:empty-cells 属性

(1)作用:该属性定义了不包含任何内容的表单元格如何表示。如果显示,就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate,否则将忽略这个属性。

(2)可能的值:

描述

hide

不在空单元格周围绘制边框。

show

在空单元格周围绘制边框。默认。

inherit

规定应该从父元素继承 empty-cells 属性的值。

(3)浏览器的兼容性:除IE外的所有浏览器都支持 empty-cells 属性。如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 empty-cells 属性。

6. 表格布局算法:table-layout属性

(1)作用:来显示表格单元格、行、列的算法规则,该属性指定了完成表布局时所用的布局算法。

(2)两种算法:

      固定表格布局: fixed

        #优点:允许浏览器更快地对表格进行布局, (在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。);

       #缺点:不太灵活。

      自动表格布局:automatic

      #优点:更能反映传统的 HTML,(在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。);

      #缺点:自动算法比较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。

(3)可能的值:

描述

automatic

默认。列宽度由单元格内容设定。

fixed

列宽由表格宽度和列宽度设定。

inherit

规定应该从父元素继承 table-layout 属性的值。

(学习视频分享:css视频教程)

以上就是css设置表格的属性有哪些的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2949953.html

(0)
上一篇 2025年3月11日 23:23:22
下一篇 2025年3月2日 19:07:01

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • jsp如何引入css

    jsp引入css的方法:1、通过“外部样式”引入css;2、通过“内部样式”引入css;3、通过“内联样式”引入css。 样式 登录后复制 3、内联样式 当样式仅需要在一个元素上应用一次时, 要使用内联样式,你需要在相关的标签内使用样式(s…

    2025年3月11日
    200
  • css超链接怎么使其失效

    css超链接失效的方法:首先打开相应的css代码文件;然后在Css中添加“pointer-events:none;cursor:default”样式并应用到A标签中即可。 本文操作环境:windows7系统、CSS3版、Dell G3电脑。…

    2025年3月11日
    200
  • css怎么写圆形

    css写圆形的方法:首先准备一个空的html结构;然后在其中放置一个空的div;接着添加一个背景;最后通过添加border-radius属性实现圆形效果即可。 本文操作环境:windows7系统、HTML5&&CSS3版、D…

    2025年3月11日 编程技术
    200
  • css怎么让字体变大

    css让字体变大的方法:1、使用hml中的font标签中size属性进行字体的设置;2、使用css样式中的font-size进行字体字号的设置。 本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电…

    2025年3月11日
    200
  • css hr是什么意思

    css hr指的是标签,该定义HTML页面中的主题变化,并显示为一条水平线;元素被用来分割HTML页面中的内容或者定义一个变化。 本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。 css h…

    2025年3月11日
    200
  • css怎么去除li的点

    css去除li的点的方法:1、通过“xx”方式去除;2、通过“list-style-type:none;”方式去除;3、通过设置class来去除。 本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3…

    2025年3月11日
    200
  • css怎么设置文字超过隐藏

    css设置文字超过隐藏的方法:首先新建一个html文件;然后使用div标签创建一行文字;接着设置div标签的class属性为txtdiv;最后在css中使用“overflow:hidden”实现当div内的文字超过宽度时,隐藏不显示即可。 …

    2025年3月11日 编程技术
    200
  • css是啥

    css是层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。 本教程操作环境:…

    2025年3月11日
    200
  • css布局方法有哪些

    css布局方法有:1、一列布局,一般都是固定的宽高;2、两列布局,使用float来实现;3、三列布局,两侧定宽中间自适应;4、混合布局,在一列布局的基础上,保留top和foot部分;5、其他布局等。 本教程操作环境:windows7系统、C…

    2025年3月11日 编程技术
    200
  • css为什么无法加载

    无法加载css的原因:1、引入CSS文件的路径出错或者CSS代码不兼容;2、HTML页面编码与CSS编码不同;3、IIS空间不足、浏览者网速慢、空间速度慢等网络因素。 本教程操作环境:windows7系统、CSS3&&HTM…

    2025年3月11日
    200

发表回复

登录后才能评论