热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css设置表格的属性有哪些

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

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

(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)两种算法:

<1>固定表格布局: fixed

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

#缺点:不太灵活。

<2>自动表格布局:automatic

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

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

(3)可能的值:

描述

automatic

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

fixed

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

inherit

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

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

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


推荐阅读
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
author-avatar
小艾辰
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有