欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

课时39.细线表格(理解)

程序员文章站 2022-03-22 14:48:33
请你设计出以下图片里的这个样式的表格 步骤: 2.将table里的cellspacing设置成0 外边距是不见了,但是和我们想要完成的图片有一定的差距,我们发现这样做出来的图片好像是两条线合并到了一起一样,实际上确实是两条线合并到了一起的,它是将每个单元格的边距和表格的边距重叠到了一起才有的这个图形 ......
  • 请你设计出以下图片里的这个样式的表格

课时39.细线表格(理解)

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

课时39.细线表格(理解)                     课时39.细线表格(理解)     

2.将table里的cellspacing设置成0

课时39.细线表格(理解)     课时39.细线表格(理解)

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

课时39.细线表格(理解)

  • 那我们应该怎么做呢?

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

课时39.细线表格(理解)         课时39.细线表格(理解)

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

课时39.细线表格(理解)      课时39.细线表格(理解)

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

课时39.细线表格(理解)     课时39.细线表格(理解)

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

课时39.细线表格(理解)     课时39.细线表格(理解)

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

注意点:

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

课时39.细线表格(理解)        课时39.细线表格(理解)

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