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 交通频道 作文范文 小学五年级作文700字:奇遇 学校述职报告的范文 同事三分亲 村党支部书记竞聘演讲稿 蜕异灵眸戒颜色作文2200字 有趣的蜗牛爬行赛450字 无味的工作者 建党85周年活动的情况汇报材料 测试你将和谁结婚 人们需要我 阅读,是…… 过年的新衣服 小学六年级作文550字:糊涂警长 在全市食品药品监管系统迎春茶话会上的讲话 时光的流逝到底是有多快 神奇的龙珠作文400字 在湖北省基础教育综合类教研课题专题研讨会上的发言 云翻涌成夏 2016文员实习周记范文 2015村工作汇报 一句话心疼 激发人斗志的语句 367的秘密作文300字 百花公园作文250字 宽容和包容的婚姻,才会长久 重阳佳节来相聚,带着亲情,带着孝敬,带着温馨,走近人生的重阳… 彩图赏析:风雨去春来来作文100字 让我爱上语文的人——我的语文老师 初中初二作文900字:我拥有,我快乐 假如生活欺骗了你作文500字 教师年度工作个人总结-年度工作总结_年度工作总结 人生的遗憾作文250字 预备党员转正_入党程序 美的道具 飞翔需要倔强的翅膀 小学六年级作文550字:假如我是一滴水 大学生求职简历自我介绍范文 西溪湿地美如画作文500字 《青春雷锋》观后感550字 蔷薇发表日志:妈妈,我想对您说(儿子的作文) 再见了朋友作文300字 喜悦自在心中 初中初一作文400字:买书 懂得无常,放下执着,关爱他人,悦享人生! 点亮自己 狼图腾 看似悲苦其实幸运的林黛玉 生命的真谛作文300字 【感情驿站】母子相依 不要让我们的爱无奈的离开好吗

Copyright © 2016 phpStudy |