怎么用CSS设置html中的表格边框样式

表格的边框分为3个元素决定：table,th,td;

如果三种元素全部设置了border样式，那么会发现外层有2层border,里面的th与th，td与td,td与th之间的border也是有2层的，所以，在设置border之前最好先想好通过什么样的规则来展现boeder(因为方式很多，那么我们只能选择适合自己的-也就是用的习惯的)。另外，表格之间还有一个概念是表空间,可以通过给表格设置样式table{ border-collapse:collapse; border-spacing:0;}清除这些多余的空间，那么有了上面的准备工作之后，下面就开始border样式的设置--代码如下：

td,th{border-bottom: 1px solid #e3e3e3;//xia下边框border-right:1px solid #e3e3e3;//有边框}

那么你可以得到效果：

少了左边和上边，接下来就可以根据浏览器的兼容性选择分支：

直接table{border-top: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;

}

简单粗暴

2

td:first-child,th:first-child{border-left: 1px solid #e3e3e3;}

th{border-top: 1px solid #e3e3e3;}

这个方法有兼容性问题，因为涉及到伪类的:first-child，所以IE7是无效的。

于是效果就如下了：

〈Table border=0 id=tb1 style="border:3px solid red"〉

〈tr〉〈td〉用样式表(CSS)定制表格的例子〈/td〉〈/tr〉

〈/Table〉

32,Q:闪亮的表格边框：

A:

制做闪亮的表格边框！

<!-- 这段脚本放在表格的后面

function flashit()

{

if (!documentall) return

if (tb1styleborderColor=="green")

tb1styleborderColor="red"

else

tb1styleborderColor="green"

}

setInterval("flashit()", 400)

//-->

　　对table设置css样式边框，分为几种情况：

1、只对table设置边框

2、对td设置边框

3、对table和td技巧性设置表格边框

4、对table和td设置背景，实现完美表格边框

　　以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示。为了便于观察，divcss5均设置所有案例表格为1px实线红色边框为例；table宽度为400px;表格为三列三行，对以上四种情况表格外层加个div盒子，分别CSS命名为“table-a”、“table-b”、“table-c”、“table-d”。

　　一、只对表格table标签设置边框 - TOP

　　只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。

　　案例详细如下：

　　1、对应css代码

　　<style> table-a table{border:1px solid #F00} / css注释：只对table标签设置红色边框样式 / </style>

　　2、对应html代码片段

　　<div class="table-a"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="105">站名</td> <td width="181">网址</td> <td width="112">说明</td> </tr> <tr> <td>DIVCSS5</td> <td>wwwdivcss5com</td> <td>CSS学习</td> </tr> <tr> <td>CSS5</td> <td>wwwcss5comcn</td> <td>CSS切图</td> </tr> </table> </div>

　　二、对td设置边框 - TOP

　　对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。

　　详细案例教程如下：

　　1、对应css代码

　　<style> table-b table td{border:1px solid #F00} / css注释：只对table td标签设置红色边框样式 / </style>

　　2、对应html源代码片段

　　<div class="table-b"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="105">站名</td> <td width="181">网址</td> <td width="112">说明</td> </tr> <tr> <td>DIVCSS5</td> <td>wwwdivcss5com</td> <td>CSS学习</td> </tr> <tr> <td>CSS5</td> <td>wwwcss5comcn</td> <td>CSS切图</td> </tr> </table>

　　三、对table和td技巧性设置表格边框 - TOP

　　如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。

　　解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。

　　解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。

　　1、对应css代码：

　　<style> table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} / css 注释： 只对table td设置左与上边框； 对table设置右与下边框； 为了便于截图，我们将css 注释说明换行排版 / </style>

　　2、对应html源代码片段：

　　<div class="table-c"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="105">站名</td> <td width="181">网址</td> <td width="112">说明</td> </tr> <tr> <td>DIVCSS5</td> <td>wwwdivcss5com</td> <td>CSS学习</td> </tr> <tr> <td>CSS5</td> <td>wwwcss5comcn</td> <td>CSS切图</td> </tr> </table>

两种效果 一种是把做成大的背景

但是这样有局限性 因为这样它不会根据页面的变化而变化了

另一种方法是我推荐的方法

把底部圆角那儿切出来叫topjpg

底部叫footjpg

中间的叫bgjpg

<div style=" background:url(这里是bgjpg) repeat-y left top">

<div>这里放headjpg</div>

<div>这里就是你想要写的内容随便放什么都可以的</div>

<div>这里放footjpg</div>

</div>

这样的效果你看下吧 肯定是最简单最方便实现你现在这种效果的

而且会根据内容的大小而变化。

另一种

文本框用input，<input type="text" class="txtnput" value=""/>

txtnput{float: left;width:126px; height:27px;background:url(路劲);border:none;}

高度和宽度是你效果图中你需要的那种文本框的大小，背景也是你需要的那种框。

按钮也是一样的实现。