table 布局

愿你的前半生如<code>table</code>般绚烂。没有哪个标签像<code>table</code>这样大起大落，曾经一统网页江湖，到现在被弃之如敝履。

知识点

1、跨行合并单元格(上下)：rowspan
2、跨列合并单元格（左右）：colspan
3、表格标题：caption
4、表头：thead
5、表头单元格：th
6、表格主题：tbody
7、表格框线：border-collapse: separate | collapse | inherit。分别表示：默认值，边框会被分开 | 合并为单一边框（较为常用） | 继承父元素的border-collapse 值。

难点

1、表格固定宽度，自适应内容：

/*固定td长，注意这里的高度是最小高度，如果内容较多，内容会把高度自动撑开*/
td{    
  text-align: center;    
  vertical-align: middle;    
  width:100px;    
  height: 50px;}

2、表格固定长宽，不随着内容改变

/*溢出内容以“...”替代*/
td{    text-align: center;    
        vertical-align: middle;    
        width:100px;    
        height: 50px;    
        /*溢出隐藏*/    
        overflow:hidden;    
      /*文本不换行*/    
       white-space:nowrap;    
      /*text-overflow:clip|ellipsis|string 修剪文本|省略号|给定字符串代替*/ 
       text-overflow:ellipsis;}

总结

因为现在table一用就被大家唾弃的原因，学习中，table没有理解，浑沦吞枣，直到居中那块，怎么都不理解table居中，对相关属性相当陌生。学习还是要遵循规律，一步一步的来。
仔细想想，table也只是用得少而已，在排名类似场景中还是用得到的。