关于制作表格

话不多说，直入主题

目标效果

• 无序列表法

首先一种比较歪的方法，利用 ul 和 li 构建。
其中最大的问题就是如果每个 li 标签设置 border，
两个 border 黏在一起就会出现加粗的效果。

                                     // CSS重点

      
XXXX项目报价
      
            // 父元素设置font-size: 0;
            
                     // 取消内部inline-block子元素间距
                  
公司
      // ul 设置左、上的边框，
            
                    // li 设置右、底的边框，
            .........                // 并且 li 变成inline-block，变成行内元素。
            
                     // 这样凑起来就是一个表格。
                  
fsd
            
      

• 正经使用 （表格）标签

  首先应该知道这些东西:

  标签	解释
  表格标题标签，类似于
  table row，表格的行
  		table head，表格头，表格最上一行（自带加粗）
  		table detail?，正常表格格子
  属性（attr）
  border	表格特有的边框
  cellspacing	格子之间的间隙，默认为1px

  结构如此，和无序列表的方法优点相似。

  
      
         ............
          
  
          
  xxxx成绩单
          
  
              
  姓名
          
  
              
  xxx
          
      
  
  

  以下是给 table 添加了不同 attr 之后的效果
  

  

  属性效果

  以上右下角就比较接近我们想要的效果，但是！

  • 这个边框感觉非常奇怪吖
  • 写内联属性似乎不太好啊

  那么，下面将这些属性转化成 CSS 的形式

  首先是 border ，这个简单，
  将表格的格子标签添加上想要的边框效果。如:
  border: 1px solid #000
  就会得到黑色一像素的边框，
  但是，这时看到的格子是分开的！像这样
  

  

  大家都很生疏嘛
  
  那接下来就是 去掉间距，也就是从 cellspacing 下手，
  这时就要用到 border-collapse: collapse;属性
  就是将边框折叠，

  注意！这个属性只能设置在 table 标签上， 就像那些 attr 一样，

  所以无序列表法不能用这个属性解决相同事情。
  这样事情就办妥拉。

  为了节省篇幅，以上只提到一些关键属性，

  想要得到效果，还是需要设置其它的一些属性的。

  
  
  Wait me back