CSS —表格基本知识

---

• table的基本格式
  这篇里面，写了表格基本用到的标签。但是出于兼容性，不考虑thead tbody tfoot
  
  

  未修饰的效果
• 依据属性设置表格
• border

  • **border-spacing **

    
    
    

    效果
    
    

    border-spacing设置边框之间的距离，一个值代表水平边框之间的距离，两个值分别代表水平与垂直之间的距离。

  • border-collapse
    
    

    效果
    
    border-collapse代表设置是否把表格边框合并为单一的边框。他有两个值，collapse代表边框合并为单一的边框。separate默认值，边框会被分开。
    当设置成border-collapse:collapse时，border-spacing会不起作用。
• padding
  
  

  效果
  
  关于padding的设置同盒子模型。
• 利用之前学的进行修饰
  
  

  效果
• 文本内容
  
  

  效果
  
  文本水平对齐：text-align:center、left、right
  文本垂直对齐：vertical-align:bottom、middle、top
• 标题的位置
  caption{caption-side: bottom;}//IE7以前及IE7不支持
  标题对齐方式：caption-side: bottom、top(默认)
• 空单元格
  table,tr,th,td{
  border: 2px solid #FFAFA0;
  border-collapse: separate;//隐藏空单元格的前提
  empty-cells: hide; }
  空单元格的显示与否：empty-cells:hide、show（默认）
  
  

  效果