html如何制作细线表格

这次给大家带来html如何制作细线,用html制作细线表格的有哪些,下面就是实战案例,一起来看一下。

关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置ber=”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的背景色区分开来。

相信看了这些案例你已经掌握了方法,更多精彩请关注【创想鸟】相关文章!

相关阅读:

以上就是html如何制作细线表格的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3194380.html

(0)
上一篇 2025年4月1日 01:53:58
下一篇 2025年4月1日 01:54:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • html、css容易被忽略的小知识点_html/css_WEB-ITnose

    都说前端容易,谁说的。前端上手快,越往后学习越困难。学习前端快一年了,依然发现一些小的知识点不会。这些经验性的东西不碰到永远学不会。 (1)title前面的logo。 就像这个编辑文章前面的logo。不知道大家知不知道这个图标是如何加载过来…

    编程技术 2025年4月4日
    100
  • html节点属性操作

    nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> …

    编程技术 2025年4月4日
    200
  • html教程:用tabIndex轻松实现网页导航

    最近,当我在一个网站上输入表格数据时,我填写了一栏,并点击[tab]键移到下一栏;当我抬头时,我惊奇的发现光标跳到页面下方的另一栏中。我用鼠标将光标移到正确的文本栏中,但不久[tab]键又再次出现问题。这一情形使我想了解一下页面设计,以及t…

    编程技术 2025年4月4日
    200
  • html教程:WEB标准从头开始_DOCTYPE声明

    在较早之前的网页上,我们经常可以看到如下的网页结构代码: 这是一个网页 …… 立即学习“前端免费学习笔记(深入)”; …… 立即学习“前端免费学习笔记(深入)”; 很显然的,这种结构的网页代码是不符合Web标准规范的,但是浏览器仍然可以很好…

    编程技术 2025年4月4日
    200
  • 一步步学习html—-第一课

    在讲授第一课的时候,首先要给大家表明的一个概念是:我们学习的是一门语言,而不是一个编译工具,所以我们要习惯在编写程序的时候忽略编译工具的概念,因为只有忽略了编译工具,才能真正意义上的明白一门语言的精髓在哪里,也才能真正掌握一门语言到底是怎么…

    编程技术 2025年4月4日
    200
  • 一步步学习html—-第三课

    经过前面两课的学习,不知道你们对于什么是html有没有了一定程度上的了解,今天的第三课算是第一阶段的一个总结,会加入一点新的内容,但是更多的是会做总结,好了,废话不说了,进入今天的课程吧!在前两课的基础上,这一课主要是加入了一个插入图片的问…

    编程技术 2025年4月4日
    200
  • 一步步学习html—-第四课

    这一课我们主要讲解一下链接的问题:这个也可以定义为超文本链接,标签则是这个标签的全称是anchor,中文意思是锚;例子:http://www.baidu.com”>click!在网页上就会出现一个链接,其文本表现形式就是正…

    编程技术 2025年4月4日
    200
  • HTML的分段与换行代码说明

    在网页的排版中,经常会对文本进行分段和换行的操作,这两种操作由 标签 和标签来实现。 1、 -段落标签 p是英文单词“paragraph”的首字母,用来定义网页中的一段文本, 一般是成对出现。 2、-换行标签 br是英文单词“break”的…

    编程技术 2025年4月4日
    200
  • HTML的标题设置代码

    在word文档中,标题往往都需要格外醒目,例如加粗字体较大等。同样地在html文档中也可以设置标题以同样的格式显示。 我们可以用html标题标签来设置标题,一共有6个标题标签,从 到 ,数字越小,级别越高,文字也相应越大。 下面通过实例介绍…

    编程技术 2025年4月4日
    200
  • HTML的列表代码说明

    在编辑文档时,有时希望某些内容以列表形式显示出来,是其结构化和条理化。在html文档中,html列表标签主要分为序号列表和项目列表,前者是每个列表项都有个数字编号,后者则在每个列表项前有个圆点符号。 1、序号列表(也称为有序列表) 序号列表…

    编程技术 2025年4月4日
    200

发表回复

登录后才能评论