在html中,可以使用border-spacing属性来设置表格间距,该属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式),语法格式“border-spacing:水平间距 垂直间距;”。

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

在html中,可以使用border-spacing属性来设置表格间距。

border-spacing属性用于表格的边框在“分离”的状态下,设置相邻单元格的边框间的距离。

该属性会在表格边框“分离”时,设置行和单元格的边框在横向和纵向上的间距。

注:只有当表格边框各自独立(即border-collapse属性设置separate时)此属性才起作用。

属性值:

描述

length length

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

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

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

示例:

table,

td,

th {

border: 1px solid black;

}

td,th{

padding: 5px 20px;

}

#table2 {

border-collapse: separate;

border-spacing: 15px;

}

#table3 {

border-collapse: separate;

border-spacing: 15px 30px;

}

border-spacing: 15px:

使用“border collapse:separate”时,border spacing属性可用于设置单元格之间的间距:

姓名 年龄
Peter 20
Lois 20

效果图:

说明:

该border-spacing属性的作用等同于HTML标签属性cellspacing。

该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非 border-collapse 被设置为 separate,否则将忽略这个属性。尽管这个属性只应用于表,不过它可以由表中的所有元素继承。

推荐教程:html视频教程、css视频教程

html表格 内容间距,html怎么设置表格间距相关推荐

  1. html表格内框线怎么设置颜色,word表格样式 Word中如何设置表格的边框线样式和颜色...

    word表格样式 Word中如何设置表格的边框线样式和颜色,平凡的世界平凡的你,努力学习使我们变得不平凡,今天要介绍的知识是word表格样式的相关知识,你准备好学习word表格样式 Word中如何设置 ...

  2. java表格怎样设置内间距_如何设置表格的间距和背景等属性

    步骤一:在打开的网页文档中选择表格后,在"属性"面板中即可对表格的属性进行设置.首先设置表格的id和行列值. 步骤二:接下来设置表格的宽度和高度."宽"和&qu ...

  3. css表格中怎么设置表格间距,css如何设置表格间距

    css设置表格间距的方法:1.使用padding属性对table的td元素进行样式设置,语法"td{padding:数值}":2.直接在table标签内使用cellpadding属 ...

  4. 怎么修改html表格间距,html怎么设置表格间距

    在html中,可以使用border-spacing属性来设置表格间距,该属性设置相邻单元格的边框间的距离(仅用于"边框分离"模式),语法格式"border-spacing ...

  5. layui 数据表格内容过长遮挡_word表格技巧:遇到这三种情况,你会处理么?

    编按:工作中,除了文字排版,表格应该是排版中比较麻烦的一类.因为各种文档的格式不同,表格也需要随机应变.因此,在排版的过程中,难免会遇到一些表格问题,今天小编总结了3个表格排版常见问题,快来看看吧,希 ...

  6. phpexcel_cell 获取表格样式_Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行...

    精品推荐 国内稀缺优秀Java全栈课程-Vue+SpringBoot通讯录系统全新发布! Docker快速手上视频教程(无废话版)[免费] 作者:E-iceblue https://www.cnblo ...

  7. html设置表格宽度最小,css如何设置表格宽度?

    css设置表格宽度的方法:直接使用css设置表格table标签的width属性即可设置表格宽度,浏览器会自动按照td宽度的比例来调整td宽度. css设置表格宽度: 例1:Table的宽度为600px ...

  8. java操作跨页的word cell_Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行...

    本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括 如何在Word中创建嵌套表格. 对已有表格添加行或者列 复制已有表格中的指定行或者列 对跨页的表格可设置是否禁止跨页断行 创建表 ...

  9. java操作跨页的word cell_Java 创建Word表格/嵌套表格、添加/复制表格行或列、设置表格跨页断行...

    概述 表格作为一种可视化交流模式及组织整理数据的手段,在各种场合及文档中应用广泛.常见的表格可包含文字.图片等元素,我们操作表格时可以插入图片.写入文字及格式化表格样式等.下面,将通过Java编程在W ...

最新文章

  1. Matplotlib可视化散点图、配置X轴为对数坐标、并使用线条(line)连接散点图中的数据点、基于分组变量配置数据点的颜色(connecting two coordinates with line
  2. Android7.0多窗口实现原理(一)
  3. boost::contract模块实现name list名单的测试程序
  4. debug LUW3 - callback workflow - ABAP工作流的调试(第三部分)
  5. 使用JUnit 5在Mockito中方便地进行模拟–官方方式
  6. java数字排序代码,进阶加薪全靠它!
  7. 6002.mavlink通过xml生成自定义消息
  8. java中的getnumber怎么用_java安全编码指南之:Number操作详解
  9. 基于python的音频播放器_基于python实现音乐播放器代码实例
  10. ubuntu jdk tomcat mysql_linux-ubuntu tomcat jdk 及 mysql 安装配置
  11. 2021-08-21Verilog三段式状态机的写法,标准示例和仿真。
  12. Linux查看网卡是千兆还是万兆网卡
  13. DPDK 19.08 正式发布
  14. 机器人运动学轨迹跟踪控制(Matlab实现)
  15. php经典实例读后感,读卡耐基《人性的弱点》章节之读后感
  16. html5 页面整体居中,html5标题居中 DIV布局怎么在页面水平居中
  17. 任务管理器被停用解决方法
  18. 力扣42.接雨水C++解法
  19. 双机互联(交叉线方法)
  20. 服务器刷新率和显示器刷新率,什么是屏幕刷新率

热门文章

  1. 【降价提醒】,您关注的商品已降价!
  2. 模糊PID控制的规则表一点理解
  3. 数字化时代,如何推动实体经济和数字经济的融合
  4. 数学教程之蜜蜂如何利用数学过上完美的生活?
  5. Problem M: 薪酬计算 之二
  6. Linux 安装VMware Tools(open-vm-tools)实现桌面全屏、跨平台复制等功能
  7. 电线电缆使用时的安全要求和存放方法
  8. 易天光模块交期漫画故事
  9. 2020-04-19-E-prime2.0.10安装过程
  10. Zookeeper 原理与优化