好主机建站-建站不再是梦想

立即注册开通网站

 

售前咨询QQ:599166136
登录官方论坛:http://bbs.letgo.com.cn/
加入建站技术交流群: 广州维派建站交流①

制作等间距细线表格

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

 
 
 
 
 
 
 


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

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

 
[ 点击数:] [打印本网页] [关闭本窗口]  

关注广州维派 你建网站,我来埋单!

网络营销之路 我们与您相伴

 

相关内容
  • 图文网页和门户网页有什么不一样? 2012-09-12
  • 佛山一网站编辑转帖称检察官嫖娼 被拘留10天 2012-03-03
  • 网页设计时必须注意的四件事 2010-10-25
  • 新浪mini音乐网页播放器小插件 2010-10-22
  • 网页设计进度指示器帮助用户预测步骤 2010-10-23
  • 打开网页是空白无内容的 2010-08-18
  • 无法进行网页编辑? 2010-03-19
  • 部分客户反映网页无法编辑 2010-03-15
  • 用iframe只显示网页特定位置 2009-12-17
  •  

     

     

    注册用户须知

    免 责 申 明

    粤ICP备12022451号

     关于我们

     联系我们

     如何支付

    广州维派网络科技有限公司

    (即好主机建站)

    LetGo.com.cn 版权所有

     维派互联 (域名)

     数据中心 (空间)

     维信通 (微营销)

     

    2016最新微营销,维信通正式上线,老用户尊享优惠。

    自助建站  智能建站  企业网站建设  永久免费做网站  易邻网

      网络114企业名录  申请友情链接  

    企业网站建设

    安全狗-arp防火墙/ddosf防火墙

    好主机自助建站

    维信通

    维品生活

    克隆网站

    做网站

    智能建站

    智能网站

    企业建站

      

    网站管理