HTML表格table标签hspace和vspace属性废弃后怎么用CSS margin替代

浅敏小哥_5217

浅敏小哥_5217

2026-08-12

597人浏览

原创

Html2md
Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载
table标签没有hspace和vspace属性,它们仅属于img标签且已废弃;表格整体外边距应使用margin,单元格间隙用border-spacing(需配合border-collapse:separate),内边距用padding。

html表格table标签hspace和vspace属性废弃后怎么用css margin替代

table 标签根本没有 hspace 和 vspace 属性

这是最常被误解的一点:hspace 和 vspace 从来就不是 table 的合法属性。它们只属于 img 标签(且早已废弃)。如果你在 <table hspace="10"> 里写了,浏览器会直接忽略——连解析都不做,更谈不上“失效”。W3C 验证器会报错,DOM 中也查不到该属性。 <p>真正需要替代的,是那些误以为能用在表格上的旧写法。比如:</p> <ul><li><code><table align="center"> → 不是 hspace,但常被混为一谈;应改用 <code>margin: 0 auto

  • <img src="x.png" hspace="15"> → 这才是 hspace 的原始使用场景,需用 margin 替代
  • <table cellspacing="5"> → 常被当成“表格左右留白”,实际控制的是单元格之间间隙,应换 <code>border-spacing

    给表格整体加左右边距:用 margin,但必须配 width

    想让整个表格在页面中左右留空,等效于旧式“视觉居中+边距”效果,唯一可靠方式是 CSS margin:

    • margin: 0 20px 表示上下 0、左右各 20px,适用于固定宽度或 max-width 受限的表格
    • margin: 0 auto 实现水平居中,但 必须同时设置 width(如 width: 90% 或 width: 800px),否则 auto 不生效
    • 避免只写 margin-left 或 margin-right 单侧值——图文混排时易导致浮动错位或父容器溢出
    • 如果表格嵌套在 <p></p> 或 <div> 内,注意外边距塌陷:<code><p></p> 的 margin-bottom 和表格的 margin-top 会合并,实际间距取较大值

      表格内部“看起来像左右留白”的真实来源

      很多人想调“表格左右留白”,实际要解决的却是内部渲染问题:

      • 单元格默认有 padding(通常 8–10px),它造成内容离边框的距离,不是 margin 能控制的,得写 td, th { padding: 0 12px; }
      • 表格外层容器(比如 <div class="wrapper">)可能自带 <code>margin 或 padding,被误认为是表格本身的边距
      • 若表格设了 background-color 但没设 border-collapse: collapse,相邻单元格边框间缝隙会透出背景色,像“额外留白”
      • font-size: 0 缺失或换行符残留,会在 <table> 后产生 1–2px 微小间隙,需配合 <code>font-size: 0 和 vertical-align: top 清除

        别碰 cellspacing / cellpadding,改用 border-spacing + padding

        如果目标其实是“让表格列与列之间变窄/变宽”,那根本不是 hspace 的事,而是 cellspacing 的遗留需求:

        • cellspacing 已废弃,唯一标准替代是 border-spacing,但它只在 border-collapse: separate 下生效
        • 写法必须是 border-spacing: 4px 0(水平 4px,垂直 0),不能用逗号,单位必须是 px/em/rem(避免 IE 兼容问题)
        • 若用了 border-collapse: collapse,border-spacing 完全无效——此时“无间隙”是默认行为,无需额外设置
        • cellpadding 对应的是 td, th { padding: Xpx Ypx },必须显式重置,否则浏览器默认值不一致(Chrome 8px,Firefox 10px)

        真正容易被跳过的,是确认 border-spacing 是否被父级样式覆盖,以及是否漏掉了 td, th 的 padding 重置——这两处不处理,光调 margin 永远看不到想要的“左右留白”效果。

  • 前端入门到VUE实战笔记:立即使用
    在学习笔记中,你将探索 前端 的入门与实战技巧!

    相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    html标签 css html html表格

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    css
    css

    css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

    2023.06.15

    4956

    6

    css居中
    css居中

    css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

    2023.07.27

    1077

    5

    css如何插入图片
    css如何插入图片

    cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

    2023.07.28

    1938

    6

    css超出显示...
    css超出显示...

    在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

    2023.08.01

    3806

    7

    css字体颜色
    css字体颜色

    CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

    2023.08.10

    7785

    11

    什么是css
    什么是css

    CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

    2023.08.10

    6611

    7

    css三角形怎么写
    css三角形怎么写

    CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

    2023.08.21

    2197

    9

    css设置文字颜色
    css设置文字颜色

    CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

    2023.08.22

    3151

    5

    css禁止点击事件
    css禁止点击事件

    实现css禁止点击事件的方法有使用CSS的pointer-events属性和使用JavaScript禁用点击事件。本专题为大家提供点击事件相关的文章、下载、课程内容,供大家免费下载体验。

    2023.08.23

    2773

    5

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    HTML 开发手册
    HTML 开发手册

    共150课时 | 300.4万人学习

    Web前端入门基础教程
    Web前端入门基础教程

    共251课时 | 97.4万人学习

    Sass 教程
    Sass 教程

    共14课时 | 1.5万人学习