CSS表格 - border 属性

border 简写属性在一个声明设置所有的边框属性。

font 简写属性 在一个声明中设置所有字体属性。
可以按顺序设置如下属性:
border-width border-style border-color

如下代码:

p{border:5px solid red;}

具体参数值在下面 一 一介绍

CSS表格 - border-collapse 属性

border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
语法如下:

p{border-collapse:collapse; }

页面上显示为

Firstname Lastname
Bill Gates

CSS表格 - border-spacing 属性

border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。
注释:某些版本的IE浏览器不支持此属性。
该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非 border-collapse 被设置为 separate,否则将忽略这个属性。尽管这个属性只应用于表,不过它可以由表中的所有元素继承。
语法如下:

p{border-spacing:10px 50px; }

页面上显示为

border-spacing 10px
border-spacing 50px 10px

CSS表格 - caption-side 属性

caption-side 属性设置表格标题的位置。
注释:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 caption-side 属性。
该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前(或之后)的一个块级元素。
语法如下:

p{caption-side:bottom; }

有三个值: top bottom inherit

页面上显示为

标题在上
Bill Gates
标题在下
Bill Gates

CSS表格 - empty-cells 属性

empty-cells 属性设置是否显示表格中的空单元格(仅用于“分离边框”模式)。
注释:某些版本的IE浏览器不支持此属性。
该属性定义了不包含任何内容的表单元格如何表示。如果显示,就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate,否则将忽略这个属性。

根据实践经验,如果仅仅是上面这些处理,往往是无法应对实际需求的,存在一些“致命问题”。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
有三个值: hide show inherit 语法如下:

p{empty-cells:hide; }

页面上显示为

empty-cells hide
Bill  
empty-cells show
Bill  

html+css基础教程入门学习之CSS表格相关推荐

  1. css基础教程【学习笔记】

    [前端总路线学习笔记] 文章目录 css基础 一. css初识 二. css语法规范 三. 字体属性 四. CSS注释 五.开发工具 六. 选择器 七.文本属性 八.css样式表: 1.内部样式表(嵌 ...

  2. python3基础教程入门学习

    本博文将会对python的基础教程进行全面的讲解, 本部分的博文根据菜鸟教程等网站作为参考完成. 一.python常见的四种数据结构 1.1.定义    列表是一个有序的序列.列表用一对 [] 生成, ...

  3. linux基础教程入门学习是系统汇总全集(附详细的图文目录学习)

    好的开始是成功的一半.学习 Linux 的第一个问题是搞明白 Linux 是什么,了解其来龙去脉.前世今生,知道其发展趋势.应用前景,弄清楚为什么学习它,以及如何掌握它和使用它,知其然更要知其所以然. ...

  4. css做名单,css基础教程:2021年适合新手的7个CSS入门教程推荐

    上一篇我们向同学们推荐了5个html入门教程,本篇我们继续向同学们精选推荐一些适合新手学习的CSS基础入门教程,欢迎学习! 首先我们来介绍什么是CSS?以及CSS的作用 CSS 是一种标准样式表语言, ...

  5. DIV+CSS基础教程

    DIV+CSS基础教程 第一节  了解DIV+CSS 一.什么是DIV+CSS DIV元素是html(超文本语言)中的一个元素,是标签,用来为HTML文档内大块(block-level)的内容提供结构 ...

  6. 【python教程入门学习】学python要多久,0基础学python有多难

    学python要多久,0基础学python有多难,这是很多想学习python语言同学绕不开的问题,都害怕花完钱最终没有应有的回报!对于毫无经验0基础的同学来说学习python什么最重要,方向选对坚持下 ...

  7. 《CSS菜鸟教程》学习

    学习资料:<CSS菜鸟教程> 学习目标:熟悉CSS语法即可 CSS简介 什么是CSS? CSS(Cascading Style Sheets)层叠样式表 CSS定义了如何显示HTML元素 ...

  8. CSS基础教程(下)

    今天把看<CSS基础教程>的下半部分笔记贴出来,嘿嘿,希望也对大家有点好处. 一.             文本 1.       基本字体属性 下面看看字体的几个属性: 1)font-f ...

  9. ui设计培训需要什么基础?如何入门学习?

    ​ UI设计是一种直观面向用户的一个技术岗位,在互联网公司,UI设计岗位是不可或缺的,那么对于零基础想要学习UI设计的同学来说,ui设计培训需要什么基础?如何入门学习呢?我们来看看下面的详细介绍. ​ ...

  10. 零基础学前端之HTML全套基础教程【学习笔记】

    [前端总路线学习笔记] 文章目录 HTML全套基础教程[学习笔记] 1.系统结构 2.软件环境准备 3.HTML概述 4. 我的第一个HTML 5. HTML的基本标签 6.HTML的实体符号 7. ...

最新文章

  1. 使用gin和gorm框架完成的bubble小清单项目
  2. yenv - 一个使用 JAML 文件管理环境的 Node.js 工具
  3. AKS使用Azure File实现动态持久化存储
  4. 中移4G模块-ML302-OpenCpu开发-2-MQTT连接阿里云
  5. mobaxterm怎么解除sessions个数限制_详解Oracle实例囚笼--限制数据库实例使用的CPU资源...
  6. git 提示error setting certificate verify locations 解决方案
  7. Mysql数据库分库和分表方式(常用)
  8. [可道云文件管理kodbox 1.15] 企业网盘+云端文档管理+批量上传下载文件夹+移动端H5优化
  9. 微信小程序input标签详解
  10. 伯朗特机器人编程语言_机器人十大流行编程语言
  11. MSSQL·手动安装机器学习相关CAB文件
  12. 保护用户隐私 VS 反对不正当竞争
  13. 文献阅读(10)BNN
  14. javaScript实现a页面触发b页面事件-小小笔记
  15. LineRenderer画虚线
  16. 白底图片转换为蓝底图片
  17. 软件开发为什么失败?
  18. 未来10年计算机专业会不会淘汰,未来10年不会“被淘汰”的4个专业,发展潜力较大,就业前景可观...
  19. linux远程端口查看
  20. 从0到1的CTF之旅————Web(1)

热门文章

  1. 《从0到1:CTFer成长之路》2.1 SSRF漏洞
  2. chromecast 协议_如何使用Chromecast在电视上玩Android游戏
  3. 计算机网络基础知识之应用层篇
  4. 跨境第三方支付有什么,怎么进行跨境支付?
  5. java_232_GOF23设计模式_建造者模式详解_练习
  6. empty怎么发音_empty是什么意思_empty的翻译_音标_读音_用法_例句_爱词霸在线词典...
  7. 50多首经典的广播电台背景音乐推荐下载
  8. 美国卡内基梅隆大学计算机科学生源质量,卡内基梅隆大学2020新生数据,计算机学院录取率堪比藤校!...
  9. 2.5万字讲解DDD领域驱动设计,从理论到实践掌握DDD分层架构设计,赶紧收藏起来吧
  10. 【独家】一文读懂文字识别(OCR)