表格为一条细线的html代码,html制作细线表格的简单实例

原标题：html制作细线表格的简单实例

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

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

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

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

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

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

制作细线表格的步骤：

设置table的背景色(也就是视觉上表格边框的颜色)；

设置td(单元格)的背景色(视觉上整个表格的整体颜色)

设置table的边框值为0(border=“0”)，间距的值为1 ( cellspacing=“1”，使table的背景色透过这个间距显示出来，成为视觉上的边框 )。

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

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

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

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

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

建站免费素材平台：sucaiq.com素材圈

如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对素材圈的支持！若你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！返回搜狐，查看更多

责任编辑：

表格为一条细线的html代码,html制作细线表格的简单实例相关推荐

前端传表格多条数据给后台接收（HTML前端表格多条数据JSON封装后；异步提交到后台处理)
前端传表格多条数据给后台接收 (HTML前端表格多条数据JSON封装后:异步提交到后台处理) 1.多条数据采用checkBox 携带 //封装数据的对象var PayObj = { O_NBR:& ...
表格学生表html,js编程练习：制作一个表格，显示班级的学生信息。
要求: 鼠标移到不同行上时背景色改为蓝色,移开鼠标时则恢复为原背景色白色点击添加按钮,能动态在最后添加一行点击删除按钮,则删除当前行 new document window.onload = f ...
python实例豆瓣代码_Python制作豆瓣图片的爬虫实例代码
Python制作豆瓣图片的爬虫前段时间自学了一段时间的Python,想着浓一点项目来练练手.看着大佬们一说就是爬了100W+的数据就非常的羡慕,不过对于我这种初学者来说,也就爬一爬图片. 我相信很多 ...
html表格边框为一条虚的实线,表格边框变成虚线怎么回事线条样式中点击”实线“...
excel表格全部怎么变成虚线了在弹出的界面中,选择"边框",选择虚线命令,分别为表格中横向和竖向添加.添加完毕后点击确定. 如何将EXCEL表格的实线变为虚线? EXCEL表格 ...
html表格如何成为一条线,html如何制作细线表格
这次给大家带来html如何制作细线表格,用html制作细线表格的注意事项有哪些,下面就是实战案例,一起来看一下. 关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置 ...
Java实现多条相同数据合并为一条数据
标题前言方法一: List 不建议使用方法二: Map 不建议使用方法三: sql实现 ==最简单不用动脑.推荐使用== 方法四,推荐使用一条数据拆分多条数据前言首先说明一下场景啊,今 ...
技术脱钩后软硬件磨合优化不失为一条出路
从宏观上看,这一论的制裁只是一连串组合拳的一次攻击,将来,东亚大国和西方技术脱钩是大趋势.在这种背景下,宜建立红色产业链.指导方针是不过度追求局部指标的先进性,而是追求技术自主性,并把握整体性能达到堪 ...
实现通过数据库里一个字段值相等则把他合为一条数据
需求: 把红色合为一条数据,绿色合为一条数据结果: 不多说直接上代码......................................................... // 先查所 ...
mysql 合并两个update_如何将多条update语句合并为一条
需求: 如何将多条update语句合并为一条update语句: 如,update table1 set col='2012' where id='2014001' update table1 set ...

表格为一条细线的html代码,html制作细线表格的简单实例

表格为一条细线的html代码,html制作细线表格的简单实例相关推荐

最新文章

热门文章