| 订阅 | 在线投稿
分享
 
 
 

细边框表格的实现方法

来源:互联网网民  宽屏版  评论
2008-08-15 05:13:31

在HTML中,我们设置border=”1″ 时,表格边框实际大小是2px,那如果我们要做成1px的细线表格要怎么办?以前在做1px的表格的时候,我会用表格背景颜色,然后再用另一种颜色设计单元格的背景,再把表格间距设置成1px,这样就能达到我们的1px表格了,如下例:

<table align="center" bgcolor="#f90" border="0" cellpadding="0" cellspacing="1" width="80%">

<tr>

<td bgcolor="#ffc"></td>

<td bgcolor="#ffc"></td>

<td bgcolor="#ffc"></td>

</tr>

<tr>

<td bgcolor="#ffc"></td>

<td bgcolor="#ffc"></td>

<td bgcolor="#ffc"></td>

</tr>

<tr>

<td bgcolor="#ffc"></td>

<td bgcolor="#ffc"></td>

<td bgcolor="#ffc"></td>

</tr>

</table>

这种方法虽然可以实现,但是页面里的代码多了很多,而且要控制局部也相对麻烦些。

下面的这种方法及其简单,html代码也减少了很多,结构更加的清晰。

CSS部分:

<style type="text/css">

<!--

table{

border-collapse:collapse;

}

td{

background:#ffc;

border:solid 1px #f90;

height:22px;

}

-->

</style>

HTML部分:

<table width="80%" align="center">

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

 
特别声明:以上内容(如有图片或视频亦包括在内)为网络用户发布,本站仅提供信息存储服务。
 
在HTML中,我们设置border=”1″ 时,表格边框实际大小是2px,那如果我们要做成1px的细线表格要怎么办?以前在做1px的表格的时候,我会用表格背景颜色,然后再用另一种颜色设计单元格的背景,再把表格间距设置成1px,这样就能达到我们的1px表格了,如下例: <table align="center" bgcolor="#f90" border="0" cellpadding="0" cellspacing="1" width="80%"> <tr> <td bgcolor="#ffc"></td> <td bgcolor="#ffc"></td> <td bgcolor="#ffc"></td> </tr> <tr> <td bgcolor="#ffc"></td> <td bgcolor="#ffc"></td> <td bgcolor="#ffc"></td> </tr> <tr> <td bgcolor="#ffc"></td> <td bgcolor="#ffc"></td> <td bgcolor="#ffc"></td> </tr> </table> 这种方法虽然可以实现,但是页面里的代码多了很多,而且要控制局部也相对麻烦些。 下面的这种方法及其简单,html代码也减少了很多,结构更加的清晰。 CSS部分: <style type="text/css"> <!-- table{ border-collapse:collapse; } td{ background:#ffc; border:solid 1px #f90; height:22px; } --> </style> HTML部分: <table width="80%" align="center"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
󰈣󰈤
 
 
 
>>返回首页<<
 
 热帖排行
 
 
 
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
©2005- 王朝网络 版权所有