`

CSS - table - 单元格之间的空隙

 
阅读更多
1、样式重置(防止margin或padding等引起的间距):
body,table,tr,td{margin:0px;padding:0px;}
img{border:0}
2、页面里table标签声明边框粗细为0、单元格边距为0、单元格间距为0:

     <table border="0" cellspacing="0" cellpadding="0">

      cellspacing=0 cellpadding=0是属性,不是CSS样式,不能写在CSS里边的。

      你要写在CSS的话,这样写
       table { border-collapse: collapse; padding: 0;}

 

3.    cellspacing是表格里单元格之间的距离;
       cellpadding是表格里单元格内的空白部分;
俗称就是外补丁和内补丁,类似应用在div和span上的margin和padding
你可一试验一下,给单元格加上边框,在改变一下cellpadding和cellspacing的值,看有什么变化.
例如:
<table>
<tr>
  <td style="cellspacing:10px;cellpadding:10px;border:1px solid #CCCCCC;">
   
  </td>

  <td style="cellspacing:10px;cellpadding:20px;border:1px solid #CCCCCC;">
   
  </td>
</tr>
</table>

着就是说:td的border与table的边缘之间有10个像素的补丁(cellspacing),td的border与td的内元素有20个像素的补丁(cellpadding).

分享到:
评论

相关推荐

    挺好看的CSS TABLE样式

    `属性可以消除单元格之间的空隙,让表格看起来更紧凑。 2. **背景色**:通过`background-color`属性可以设置单元格、行或列的背景颜色,以区分不同数据或创建视觉层次感。 3. **文字对齐**:使用`text-align`属性...

    使用css如何操作Table没有外边框只有内边框

    默认情况下,表格元素之间有空隙,而且每个单元格的边框是独立的。为了消除这些空隙并合并单元格的边框,我们需要使用`border-collapse`属性。这个属性设置为`collapse`时,会使得相邻的单元格边框合并,从而形成内...

    CSS精美表格

    在"csstable(精美的CSS表格样式)"文件中,可能包含各种样式的CSS代码示例,如简约风格、图表风格、彩色高亮等。你可以根据自己的需求,参考这些示例并进行定制,以实现符合项目风格的精美表格。 总结,通过熟练运用...

    隐藏 表格 边框 的设置

    这段代码中的关键在于`style`属性,它设置了表格和单元格的样式。`border-collapse: collapse;`使得相邻的边框合并,这样可以消除多余的空隙。`border-bottom-width: 0`则指定了表格的下边框宽度为0,从而达到隐藏的...

    CSS table 单行布局示例代码

    HTML部分同样是一个5行5列的表格,但去掉了`cellspacing`属性,使其默认值(0)保持单元格之间的空隙。这个设置让表格看起来更加紧密。 总的来说,通过CSS,我们可以灵活地调整表格的布局和样式,实现各种设计需求...

    html5+css 代码.docx

    - `cellspacing`设置单元格之间的间距,`cellspacing="0"`则消除间距。 - `border-collapse:collapse;`用于消除表格边框间的空隙,实现固定表格布局。 - `border-spacing`设置单元格边界的距离,例如`border-...

    使用HTML开发商业网站-CSS控制表格边框课件.pptx

    虽然`padding`通常用来设置元素内部的空隙,但在表格中,`padding`可以调整单元格内部内容与边框之间的距离。例如,`padding:10px;`会让内容与边框之间有10像素的间距。此外,虽然`&lt;tr&gt;`标签没有直接的`border`样式...

    网页表格经典css样式

    `border-collapse`属性用于决定是否合并表格单元格的边框,`cellspacing`和`cellpadding`属性则用来设置单元格之间的空隙和内部内容与边框的距离。 2. **背景色与文本样式**:`background-color`属性可以改变表格或...

    CSS 表格.docx

    `这个属性用于合并表格元素的边框,使得看起来只有一个边框,避免了默认情况下表格边框之间的空隙。 3. **表格宽度和高度**: `width`和`height`属性分别用于设定表格的宽度和高度。例如,`width: 100%;`会使表格...

    圆角Table下载

    总结来说,"圆角Table"的实现主要依赖于CSS3的`border-radius`属性,以及对表格边框和单元格样式的精确控制。在JAVA WEB项目中,结合JSP和CSS,我们可以创建出既美观又具有良好用户体验的圆角表格。下载提供的资源,...

    PHP168常用的CSS参数说明

    - **作用**:通常用于初始化元素的外边距和内边距,避免出现不必要的空隙或间距。 ##### 2. **Font-size** - **定义**:设置文本的大小。 - **示例**: ```css font-size: 12px; ``` - **注意**:虽然表格内...

    CSS表格边框50多种精美标签样式(边框也精彩)

    首先,我们要了解HTML表格的基本结构,它由`&lt;table&gt;`标签定义,`&lt;tr&gt;`用于创建行,`&lt;td&gt;`或`&lt;th&gt;`(表头)用于创建单元格。通过CSS,我们可以对这些元素进行样式化,包括边框。 1. **边框样式**:CSS中的`border-...

    js css面试题

    - `cellspacing`:设置相邻单元格之间的距离,即边框间的空隙。 - `colspan`:让一个单元格跨越多列,数值表示跨越的列数。 - `rowspan`:让一个单元格跨越多行,数值表示跨越的行数。 3. Form中的Input属性`...

    CSS实现表格细边框的两种方法

    在CSS中,首先设置表格的整体边框,然后对表格中的每个单元格`td`和表头单元格`th`分别设置边框。这样,所有边框会合并成一条细线,形成精细的边框效果。例如: ```css .tab1 { width: 300px; height: 200px; ...

    cellpadding=0 cellspacing=0的css替代写法

    这样不仅看起来更加整洁,也更节省空间,因为它消除了单元格之间的空隙。需要注意的是,`border-collapse: collapse;`并不能直接替代`cellpadding`和`cellspacing`的所有功能,它主要用于控制边框的外观,并不能直接...

    《CSS全程指南》随书光盘

    6.1.3 变换单元格背景色 154 6.2 CSS控制表格的颜色交替 155 6.3 CSS控制表格边框 156 6.4 制作圆角框 157 6.5 小结 159 第7章 表单样式设计 160 7.1 表单样式设计 161 7.1.1 表单透明化 161 7.1.2 增加表单中的空隙...

    CSS去除表格的默认间距并且制作1px的细线表

    但是,我们在建立table的时候,会发现它会具有一些默认的样式,比如单元格td之间会有间距,所以我们通常开头是这样写的: &lt;table border=0 cellspacing=0 cellpadding=0&gt; 在页面内,通过cellspacing=0将这个间距...

    实现table实用的图文表格UI布局样式.zip

    例如,使用`border-collapse`属性可以控制表格边框合并,`cellspacing`和`cellpadding`属性可调整单元格内部的空隙。 2. 图文结合:将图像整合进表格,可以更直观地展示数据。通过设置`&lt;td&gt;`中的`&lt;img&gt;`元素,或者...

    css (2).docx

    6. **表格属性**:`empty-cells`控制是否显示表格中的空单元格,`table-layout`设置表格的布局算法。 7. **边框属性**:`border`是简写属性,可以设置边框样式、宽度和颜色。例如,`border-color`、`border-style`...

Global site tag (gtag.js) - Google Analytics