在html中如何设置表格格子之间空格的颜色？

表格的单元格之间的间隙相当于margin（实际上是cellspacing），是不能直接设置颜色的。有两个办法：一：设置table的背景色为你想用来做空格颜色的色彩，然后单元格td设置为正常背景色（比如白色），这样通过增大cellspacing的值可以得到。

二：设置cellspacing=0，通过css样式 td {border:5px solid #f00;}的方式来得到单元格之间的颜色。由于单元格两两相邻，边框宽度会相加，所以你可以给再用 table {border:5px solid #f00}来让四周的边框宽度与中间的相等。border后面的三个值，5px是宽度，solid是实线样式，#f00是颜色。

方法/步骤

1

一个普通的表格如下：

2

相关设置

单元格边距(表格填充)(cellpadding) -- 代表单元格外面距离,用于隔开单元格与单元格之间的空间 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离。

具体代码如下：

<table border='1'cellspacing="0" cellpadding="0" > <tr> <td width="200">1</td> <td width="200">2</td> <td width="200">3</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>中国</td> <td>我</td> <td>爱你</td> </tr> </table>

效果如图

3

文字不居中？

设置一下就好了。

代码如下：

<style type="text/css">onecenter{text-align:center;width:200px;}</style><table border='1'cellspacing="0" cellpadding="0" > <tr> <td class='onecenter'>1</td> <td class='onecenter'>2</td> <td class='onecenter'>3</td> </tr> <tr> <td class='onecenter'>a</td> <td class='onecenter'> b</td> <td class='onecenter' > c</td> </tr > <tr> <td class='onecenter' >中国</td> <td class='onecenter' >我</td> <td class='onecenter' >爱你</td> </tr> </table>

为了方便一点我直接把样式写在上面了。

4

效果如图：

5

每一个表格都是一个完整的方框，如果想要线条更细。

看如下代码：

<style type="text/css">onecentertext-align:center;width:200px;height:50px;}#sebackground-color:#006699 ;padding:20px;color:#FFF;}</style><table border='1'cellspacing="0" cellpadding="20" > <tr> <td class='onecenter'>1</td> <td class='onecenter' style='border-left:0px;border-right:0px;' >2</td> <td class='onecenter'>3</td> </tr> <tr> <td class='onecenter'>a</td> <td class='onecenter' style='border:0px'> b</td> <td class='onecenter' > c</td> </tr > <tr id='se'> <td class='onecenter' >中国</td> <td class='onecenter' >我</td> <td class='onecenter' >爱你</td> </tr> </table>

这段代码主要是针对某些表格做了些设置，让某些表格不显示出来。

<style type="text/css">

<!--

tableborder {

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

/以上分别设置的是表格边框中上右下左的边框宽度/

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

/设置边框的表现样式，solid为实线/

border-top-color: #0000FF;

border-right-color: #0000FF;

border-bottom-color: #0000FF;

border-left-color: #0000FF;

/设置边框的颜色/

}

-->

</style>

<table width="300" height="100" border="0" align="center" cellpadding="0" cellspacing="0" class="tableborder">

<tr>

<td>class="tableborder"是对样式的调用，写在table标签内</td>

<td> </td>

</tr>

</table>

html中如果设置table的border为1px，实际会产生双线，十分不美观，那么在HTML中如何正确设置表格table边框border呢？

第一种方法：

1、将table的属性设置为：BORDER=0 、cellspacing=1 ；

2、设置table的背景色为即你要设置的table的边框颜色；

3、设置所有td背景色为#ffffff白色；

第二种方法：

1、设置BORDER=0 ；

2、再通过CSS，给Table加上1px的border-top,border-left；

3、然后再设置所有的td的border-right,border-bottom；

第三种方法（推荐）：

1、设置table的CSS为{border-collapse:collapse;border-style: solid;border-width: 1px;}

注：border-collapse:collapse;

separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit 规定应该从父元素继承 border-collapse 属性的值。

2、再设置td的CSS为{border-style: solid;border-width: 1px;}

转自： https://wwwcnblogscom/qq2806933146xiaobai/p/12407749html

1、在代码工具中，先建好几个，如图这里的img被div盒子包含；将盒子设置宽度，浮动填充整个盒子大小。

2、效果就是这样的，此时并没有添加上那边框。

3、添加的描边效果有两种方法，对添加描边或者是给外面的盒子套个描边，先看给添加描边，根据如图代码就是直接在img标签里添加上描边border。

4、如图添加了描边后的效果。

5、想要改变的描边大小以及颜色，根据图示代码在这里修改。

6、然后如果是在div盒子添加描边效果时，和跟在img上添加方法一样，也是border属性。

7、两种方法都能够成功，如图为border属性添加边框效果。