怎么设置HTML表格细边框

如题所述

一般用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下:

 

可以发现表格的边框好像很宽,当然这里的“很宽”绝对不是表格border的宽,会看到的宽应该是<td>之间有间隙所致。因此只需 要修改表格的cellspacing属性即可,即:<table border="1px" cellspacing="0px">,效果如下:

 但是,这个宽度只有一个像素的宽,其实,上图看到的其实是两个像素的宽,为什么呢,这是因为<td>之间的边框没有重合所致。修改表格的border-collapse属性即可,

即<table border="1px" cellspacing="0px" style="border-collapse:collapse">

再给表格加个颜色:

<table border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">

温馨提示:内容为网友见解,仅供参考
第1个回答  2016-11-21
设置边框的BORDER=0 、cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了。本回答被网友采纳
第2个回答  2016-12-28
设置Table的细边框通常有这么几种方式:

1、设置边框的BORDER=0 、cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了。

2、设置BORDER=0 ,再通过CSS,给Table加上1px的border-top,border-left,然后再设置所有的td的border-right,border-bottom,这样也能达到所要的效果。
3、设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;}
第3个回答  2017-02-06
<html>
<head>
<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>

<body>
<p class="dotted">A dotted border</p>

<p class="dashed">A dashed border</p>

<p class="solid">A solid border</p>

<p class="double">A double border</p>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>
</body>

第4个回答  2016-12-20
table做表格样式表如下
.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

怎么设置HTML表格细边框
一般用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下:可以发现表格的边框好像很宽,当然这里的“很宽”绝对不是表格border的宽,会看到的宽应该是<td>之间有间隙所致。因此只需 要修改表格的cellspacing属性即可,即:<table border="1px" cellspacing="0px">,效果如下:但...

Dreamweaver html表格边框细线效果设置方法
1、首先打开Dreamweaver CS6创建一个表格 2、边框粗细为1像素,单元格边距和间距为零。(默认状态即可)方法三:1、我们点实时视图看预览的表格边框比较粗,实际上在浏览器观看也是一样的,我就不贴图了。2、在table标签里面添加一个style内嵌样式,复制下面的代码。复制内容到剪贴板 style="border-collaps...

HTML表格代码如何改变边框粗细
1、事先定义 <table border="2"> <table style="border:2px solid red;"> <table style="border-bottom:2px solid red;"> 2、通过javascript动态设置 <table id="tab1"> <script language="javascript" type="text\/javascript"> var obj;obj=document.getElementById("tab1");obj.style.bo...

html中细线表格怎么制作?最好有详细步骤!!!
CSS属性里面有个border-collapse:collapse;然后指定border:1px solid #000;就ok了,边框颜色和实线、虚线、点线随便你写了。

怎么用CSS设置html中的表格边框样式
一、只对表格table标签设置边框 - TOP 只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。案例详细如下:1、对应css代码 <style>.table-a table{border:1px solid #F00} \/* css注释:只对table标签设置红色边框样式 *\/ style> 2、对应html代码...

网页制作怎样把表格的边框做细一点,
当然是利用css,为表格建立一个样式,把边框设为1px了。如果利用表格制作,也是可以做1像素的边框的,不过比较麻烦,主要是嵌套表格。

DIV里怎么控制表格的边框颜色和粗细?
<!-- content{ width:400px;margin:0px auto;margin-top:200px;} content table{ border-collapse:collapse; \/*合并表格线条 *\/ width:400px;} content td{ font-size:12px;border:1px solid #000; \/*表格的边框的宽度为1px,实线,颜色为黑色*\/ background-color:#CCFF00;height:30px;t...

[急]用table做网页,设置了border为1px怎么还是觉得很粗?
1、设置边框的BORDER=0 、cellspacing=1,设置Table的背景色为所要的边框色,再设置所有的td背景色为白色,这样细边框就显露出来了。这个方法有些邪气,看似不太正宗,但是也能达到效果,条条大路通罗马嘛!再来看看第二种方法:2、设置BORDER=0 ,再通过CSS,给Table加上1px的border-top,border-left,然后再设置所有的td...

怎么把网页制作工具的原表格的边框变细一点
将表格的边框值设为0 间距设为1,整个表格背景设为黑色 将所有单元格的背景设为白色,就是细线表格

如何使表格单边框,而且细细的
选中需要设置边框的单元格区域 然后鼠标右键 选择设置单元格格式 在弹出的窗体里选择边框 选择自己需要的线条及颜色 设置边框即可

相似回答