html制做细线报表的简易案例

有关这个细线报表的制做方式,百度搜索1下将会就会有回答告知你设定这几个值:给table设定border="0" cellspacing="1" bgcolor="#990033"这几个值,还要给模块格独立设定情况色,比如:bgcolor="#fff"。可是有关为何要设定这几个值,估算就沒有详尽的解读了!

那末今日忽然想起纪录1下有关这个细线报表的基本原理,也是由于这几日在给学员上基本课,学员有关这个细线报表基本原理并不是很搞清楚,因此想初学者的话,估算都会遇到相近的难题,因此这里就说1下为何设定这几个值。

最先大家先看看将报表的border的值设定为1的情况下的实际效果,哪怕border="1",模块格之间的间距cellspacing="0",报表的粗细看起来還是较为不光滑:

大家再看看根据制做细线报表方式制做出来的是甚么实际效果:

相比之下,后边的报表更加精美1些。

那末如今我先把制做细线报表的流程梳理1下:

制做细线报表的流程:

  1. 设定table的情况色(也便是视觉效果上报表边框的色调);
  2. 设定td(模块格)的情况色(视觉效果上全部报表的总体色调)
  3. 设定table的边框值为0(border=“0”), 间隔的值为1 ( cellspacing=“1”,使table的情况色透过这个间隔显示信息出来,变成视觉效果上的边框 )。

剖析:table的情况色实际上便是细线报表视觉效果上看起来的细线,由于大家将border设定为0,而且模块格之间的间隔cellspacing设定为1了,那末table的情况色便是透过这1像素的间隙显出来的色调,给模块格设定情况色,便是以便和table的情况色区别起来。以便更好了解,我这里用照片剖析1下:

1、假定下面的报表border="1",显示信息以下:

2、当设定模块格间隔cellspacing="0"时,两个1像素的边线挨在1起,就会显得边框很粗:

因此不可以根据border="1"来设定细线实际效果

那我大家用细线方式来制做基本原理以下:

假如本文对您有协助,记得强烈推荐哦

原文详细地址:http://www.cnblogs.com/xcaocao/p/5643351.html