当前位置： 移动技术网 > IT编程>网页制作>Html5 > 课时39.细线表格（理解）

课时39.细线表格（理解）

2018年06月07日  | 移动技术网IT编程  | 我要评论
  • 请你设计出以下图片里的这个样式的表格

  • 步骤：
  1. 我先来制作一个两行两列的表格

                          

2.将table里的cellspacing设置成0

　　　　　

外边距是不见了，但是和我们想要完成的图片有一定的差距，我们发现这样做出来的图片好像是两条线合并到了一起一样，实际上确实是两条线合并到了一起的，它是将每个单元格的边距和表格的边距重叠到了一起才有的这个图形。所以应该在这里添加一段注释，如下图

  • 那我们应该怎么做呢？

现在我们要学一个全新的属性，将table标签里的属性全部删除

         

然后我们给表格添加背景颜色

      

然后我们将第一行tr设置成白色的背景

     

然后将第二行也设置成白色，并且将cellspacing设置成1px

     

  • 细线表格的制作方式：
  1. 给table标签设置bgcolor
  2. 给tr标签设置bgcolor
  3. 给table标签设置cellspacing=“1px”

注意点：

  1. table标签和tr标签以及td标签都支持bgcolor属性

        

2.但是以上内容仅仅作为了解，因为样式以后都是通过css来控制

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网