html制作细线表格的简单实例


关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置border="0" cellspacing="1" bgcolor="#990033"这几个值,还要给单元格单独设置背景色,例如:bgcolor="#fff"。但是关于为什么要设置这几个值,估计就没有详细的讲解了!

那么今天突然想到记录一下关于这个细线表格的原理,也是因为这几天在给学生上基础课,学生关于这个细线表格原理不是很明白,所以想初学者的话,估计都会遇到类似的问题,所以这里就说一下为什么设置这几个值。

首先我们先看看将表格的border的值设置为1的时候的效果,哪怕border="1",单元格之间的距离cellspacing="0",表格的粗细看起来还是比较粗糙:

我们再看看通过制作细线表格方法制作出来的是什么效果:

相比之下,后面的表格更为精致一些。

那么现在我先把制作细线表格的步骤归纳一下:

制作细线表格的步骤:

  1. 设置table的背景色(也就是视觉上表格边框的颜色);
  2. 设置td(单元格)的背景色(视觉上整个表格的整体颜色)
  3. 设置table的边框值为0(border=“0”), 间距的值为1 ( cellspacing=“1”,使table的背景色透过这个间距显示出来,成为视觉上的边框 )。

分析:table的背景色其实就是细线表格视觉上看起来的细线,因为我们将border设置为0,并且单元格之间的间距cellspacing设置为1了,那么table的背景色就是透过这一像素的空隙透出来的颜色,给单元格设置背景色,就是为了和table的背景色区分开来。为了更好理解,我这里用图片分析一下:

1、假设下面的表格border="1",显示如下:

2、当设置单元格间距cellspacing="0"时,两个1像素的边线挨在一起,就会显得边框很粗:

所以不能通过border="1"来设置细线效果

那我我们用细线方法来制作原理如下:

如果本文对您有帮助,记得推荐哦

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



相关阅读:
Jquery实现自定义tooltip示例代码
CSS3制作酷炫的三维相册效果
javascript中indexOf技术详解
js实现ArrayList功能附实例代码
C标准库<assert.h>的实现详解
jQuery中ajax - get() 方法实例详解
Win8.1系统在安全模式下杀毒教程
Android 取得状态栏、任务栏高度的小例子
js检测网络是否具体连接功能的代码
用Autoconf检测MySQL软件包的教程
Android获取屏幕或View宽度和高度的方法
php文件服务实现虚拟挂载其他目录示例
C++设计模式之观察者模式
html5配合css3实现带提示文字的输入框(摆脱js)
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 每次回忆都是浪漫 打造特色文化、以文化力提升发展力 水利水电暑假实习报告5000字 【夜沉】-需思量 善行河北,德存石市 “庆国庆颂祖国”演讲比赛稿 这个温馨的小家 守望岁月里那一抹旖旎 秋的颜色作文 财务管理与成本控制目标的探讨(会员资料) 2017居委会主任述职报告 读《窗边的小豆豆》有感600字—与众不同的成长故事 我因自信而美丽作文 撒娇也是一种学问 《阿飞正传》经典台词,回忆张国荣的经典之作 送给好孩子 励志故事《抉择与坚持》 最新幼儿园庆“六一”文艺节目主持词 为什么你要离开我 阿拉上海人作文400字 过去式的遗忘 闻杜鹃 关于比赛的作文 武术协会2013年工作计划 小学四年级作文550字:特殊的朋友——小鸟 不懂花开 朋友分别的话 当个小孩不容易!作文300字 校园安全工作汇报 汇源果汁收购案被禁后的希望 爱我校园演讲稿 雨成泉发表日志:读《angel heart》有感--faith,hope,love 小学六年级作文900字:一堂有趣的英语课 慧如公园之旅作文400字 大学生单身文化节活动策划书 一家三口在一起才好哩! 梨花作文400字 成功,从自信开始作文650字 怎么样面对 2014给领导元旦明信片祝福语 白菜绿 棒子黄(边铁曙) 第一次到妈妈上班的地方过儿童节 秋天深处 请允许我坐在传说中的榆树上 三八妇女节历史资料 老师,您真像作文100字 陈生铠群诗词选之【爱情就是如此】 周末的英语课作文500字 除夕作文:关于快乐除夕夜的作文范文推荐 落叶 萧秋作文600字

Copyright © 2016 phpStudy |