免费网页| 重要通知| 本站客户| 精彩问答| 建站学堂| 自助建站| 价格清单| 建站指南| 本站新闻| 特别推荐| 域名查询| 付费方式| 优惠活动|
 
 
 
制作等间距细线表格

发布时间 2007-07-13

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

 
 
 
 
 
 
 


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

表格代码:
<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”的空白距离。

 

相关内容
查无记录

备案序号:辽ICP备10004642号

公司地址:辽宁鞍山     E_mail:5729799@qq.com.com     在线客服:5729799 免费网页制作

网站管理
技术支持