html表格单元格间距（html中单元格间距与单元格边距的区别）

本文目录

• html中单元格间距与单元格边距的区别
• html中两个表格间的距离如何调整
• html中嵌套表格边框为1
• html怎么去掉表格与表格之间的间距
• html中如何让单元格中的文字离左边框一定距离
• 如何通过dw设置表格，单元格属性和间距
• html,如何控制表格中单元格的大小

html中单元格间距与单元格边距的区别

间距是每个单元格之间的距离，设置了之后可以看见单元格之间有虚线的间距
边距是单元格里单元格内容与单元格外框之间的距离，如果不为0，则单元格里的内容不会触碰到单元格的边，会保持一定距离

html中两个表格间的距离如何调整

html中两个表格间的距离调整有两种适合微调的办法：

1.设置第一个tbale的margin-bottom属性。例如：

《table width="100%" style="margin-bottom:100px"》表示table表格底部保持100px间距。

2.设置第二个tbale的margin-top属性。例如：

《table width="100%" style="margin-top:100px"》表示table表格顶部保持100px间距。

扩展知识

margin 属性可以单独改变元素（元素可以是表格或者DIV）的上，下，左，右边距。也可以一次改变所有的属性。

margin 属性单独使用时：

例1：margin-bottom：100px；元素的下外边距为100px。

例2：margin-left：100px；元素的左外边距为100px。

例3：margin-right：100px；元素的右外边距为100px。

例4：margin-top：100px；元素的上外边距为100px。

margin 属性一次性设置所有属性：

例1：margin:10px 5px 15px 20px;表示：

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

例2：margin:10px 5px 15px;表示：

上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px

例3：margin:10px 5px;表示：

上外边距和下外边距是 10px

右外边距和左外边距是 5px

例4：margin:10px;表示：

所有 4 个外边距都是 10px

百度百科-margin-buttom

百度百科-margin-top

html中嵌套表格边框为1

一、基础铺垫：
① table元素的部分属性(针对于本话题)：1
2
bgcolor="#ffffff" bordercolordark="" bordercolorlight="" 》
border 表格内单元格边框的宽度
cellpadding 单元格的内边距
width 表格的宽度
bordercolor、bgcolor 但如大家熟知，给border定义为border=”1”，表现缺不符预期，是比一像素粗的边框。
综上这些在元素内用属性定义表现的方式，已被逐渐不推荐——弃用。真正的表现性的东西，应该由css来完成。
但目前可行的，相对科学的、实惠的实现方式究竟如何呢？
② table方面css部分属性(针对于本话题)：table{border-collapse:collapse;border-spacing:0;}
td{padding:0;} 相当于cellpadding
border-collapse 定义相邻单元格边框是否合并
border-spacing 定义单元格与单元格之间的 间距相当于cellspacing(除ie6/7外浏览器识别，ie6/7用expression弥补，
见下，管它性能不性能的呢，谁让他用破ie呢)
二、方案(从上到下推荐度逐渐降低)：
① css法(table元素上的一些标签属性不用写)1
2table{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing=’0’);}
td{border:1px solid
② 表格背景和单元格背景色差配合法(table元素上的一些标签属性不用写)1
2table{ background:#000;border-collapse:separate;border-spacing:1px;jerry:expression(cellSpacing=’1’);}
td{background:#fff;}
③ css边框拼补法(table元素上的一些标签属性不用写)1
2
3
4
5table{
border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing=’0’);
border-right:1px solid #000;border-bottom:1px solid #000;
}
td{border-left:1px solid #000;border-top:1px solid #000;}
④ css和标签属性结合法1
2table{border-collapse:collapse;border-spacing:0;jerry:expression(cellSpacing=’0’);}
⑤ 标签法(原理同②)1
2
3
4
5
6
7
8
9
或
三：注意点
经测试对于单元格边距，单元格间距，单元格边框这三项，如果在元素标签的属性 和 css中的属性 同时定义的情况下：(此结果在各浏览器下和各ie版本下以及各ie版本的各种兼容模式下都适合)css中的优先级比标签属性的高的是：单元格边距、单元格间距 这两项。也就是说比如以下这种情况下，1
2
3table{border-spacing:0;jerry:expression(cellSpacing=’0’);}
table td{padding:0;}
实际表现以css定义为准。
css的定义与标签属性的定义累加(如果有相邻合并，则只累加不相邻的单元格边框)的是：单元格边框宽度。也就是说比如以下这种情况下，1
2table td{border:3px solid #000;}
则实际表现结果的单元格边框宽度为8px。注意如果有相邻合并定义，则只累加不相邻的单元格边框。
附html代码，可以用不同浏览器，及IE的各个版本去测试，及其各种兼容模式，全部没问题

html怎么去掉表格与表格之间的间距

添加  cellspacing="0"  即可。

《table border="1"cellspacing="0"》
《tr》
《td》第一行第一列《/td》
《td》第一行第二列《/td》
《td》第一行第三列《/td》
《/tr》
《tr》
《td》第二行第一列《/td》
《td》第二行第二列《/td》
《td》第二行第二列《/td》
《/tr》
《/table》

效果如下：

html中如何让单元格中的文字离左边框一定距离

1、新建一个html文件，命名为test.html。

2、在test.html文件中，使用table标签创建一个三行两列的表格，用于测试。

3、在test.html文件中，给table标签添加一个class属性，用于下面样式定义。

4、在css标签内，通过class定义tbale标签的样式。

5、在css标签内，使用border-spacing属性定义表格单元格之间边框的距离即可了。

如何通过dw设置表格，单元格属性和间距

确认已经安装dw软件，启动dw软件

点击新建按钮，在弹出的窗口中选中html5，点击创建按钮，创建一html文档

选中刚才创建的html文档。选择插入菜单下的表格按钮，或者快捷键（ctrl+alt+t）

在弹出的窗口中，设置参数，插入一个10行，7列的表格，表格宽度设为100%，具体参数，设置完后点击确定按钮。

点击窗口中的设计按钮，把界面切换到设计视窗，如果您是设计视窗，则不用切换

切换后界面，所看到的一个一个虚线就是所插入的表格

在窗口中选择表格，所示，表格选中后会有绿色的线出来

此时看窗口底部属性栏，可对表格和单元格的属性进行配置和修改，调整

html,如何控制表格中单元格的大小

　　1、利用 height属性，这样是直接拉高 td 单元格的高度，缺点：文字不能对齐

　　2、做为height属性文字垂直不对齐的补充，增加 line-height属性，与height相同时则垂直居中，但换行则会导致两行间距太大。

　　3、padding-top padding-bottom 可以增加上下边距，很好用的属性，在bootstrap框架中是通过这个属性实现表格样式的。就算多行，也是一样保持间距。

　　或者结合使用，选择一款适合的。

　　.table tr td { padding:10px 0;} 这样设置省事。

　　实现代码：

　　《table cellspacing="0" style="color:#FFF; text-align:left; font-size:14px; font-weight:bold; margin-left:220px; width:980px; height:200px;text-align:center"》
     《tr 》
      《td bgcolor="e91e6f"; style=" width:196px;"》01《/td》
      《td bgcolor="224071"; style=" width:196px;"》02《/td》
      《td bgcolor="f12339"; style=" width:196px;"》03 《/td》
      《td bgcolor="1ea27e"; style=" width:196px;"》04《/td》 
         《td bgcolor="224071"; style=" width:196px;"》05《/td》        
     《/tr》
  《tr》
      《td bgcolor="1ea27e"》06《/td》
      《td bgcolor="e91e6f"》07《/td》 
         《td bgcolor="224071"》08《/td》  
      《td bgcolor="f12339"》09 《/td》
      《td bgcolor="1ea27e"》10《/td》 
      《/tr》
  《tr》
      《td bgcolor="e91e6f"》11《/td》
      《td bgcolor="224071"》12《/td》 
         《td bgcolor="f12339"》13《/td》  
      《td bgcolor="1ea27e"》14 《/td》
      《td bgcolor="224071"》15《/td》 
     《/tr》
  《tr》
      《td bgcolor="1ea27e"》16《/td》
      《td bgcolor="e91e6f"》17《/td》 
         《td bgcolor="224071"》18《/td》  
      《td bgcolor="f12339"》《/td》
      《td bgcolor="1ea27e"》《/td》 
     《/tr》    
 《/table》