网站首页 -  最新通知 -  建站入门 -  建站步骤 -  视频教程 -  建站技巧 -  常见问答 -  常用软件 -  优化网页 -  网络知识 -  客户满意度调查 -   关于模板 -   关于域名 -  FTP管理 -  ICP备案 -  邮箱管理 -  网络推广 -  销售心得 -  成功案例 -  dreamweaver知识 -  photoshop知识 -  域名绑定 -  深圳网监局备案 -
制作等间距细线表格

发布时间 2007-06-07

我们可能经常在大网站中看到这种效果的表格:

 
 
 
 
 
 
 


  这又是怎么做出来的呢,似乎让人有点摸不着头脑。我们来先来看看他的代码(注意红色部分的代码)

表格代码:
<table width="420" border="0" cellspacing="2" cellpadding="1" height="10">
<tr>
<td bgcolor="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td bgcolor="#000000"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td bgcolor="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td bgcolor="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td bgcolor="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
<td bgcolor="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</td>
</tr>
</table>

  代码好象很多,但理清它的结构后会发现其实并不复杂,它主要利用了表格的嵌套以及表格的“cellpadding”(即单元边距)属性。在一个一行六列表格的每个单元格里又插入了一个这样一个表格:

<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td> </td>
</tr>
</table>

 详细的操作步骤如下:

第一步:首先单击“插入表格”按钮,制作一个一行六列的表格(边框粗细设为0、单元格间距设为2、单元格边距设为1,宽度设为420像素),如下图:



  第二步:单击“显示隐藏指导方针”按钮,将该表格每个单元格的背景色设置为黑色(注意:是单元格而不是整个表格,方法是把光标分别放在各个单元格里,单击“单元格属性”按钮,将背景色设为黑色),设置完后表格显示如下:

   

  第三步:分别在每个单元格中再插入一个1行1列的表格(边框粗细、单元格间距和单元格边距都设为0,表格背景色设为白色)即可。
  

  需要注意的就是上面代码中加了红色的属性一个也不能少!

  说明:cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。明白了这个属性后,上面的例子就不难理解。红色代码中width="100%"的意思是插入的表格的宽是被插入表格宽度的100%,也就是在宽度上把底下表格占满 ,但被插入的表格有这样一个属性cellpadding="1",所以就算是100%,被插入的表格也要在4边留下1px的空白距离.同理,height="100%"也就是在高度上也要顶满下面的表格,但由于被插入的表格的cellpadding="1"的原因,在上与下方都留了1px的空白距离。这样,在浏览器中显示的“表格边框”并不是真实的边框,而是被背景色填充的这“1px”的空白距离。

 

相关内容
查无记录
 
 
公司地址:深圳市福田区福民路12号知本大厦706   邮编:518000        
客服热线:0755-61192828 传真:0755-82915763 
客服的服务质量投诉::service@51rich.net(如果您觉得哪位客服的服务不好或者服务得超级好,都可以发EM通知我们,并写上原因,谢谢您的监督)
网站管理