CSS —表格基本知识

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（默认）
    
    

    效果