table属性，利用table-cell布局

table属性

table即表格，因此应用场景常常也是用来展示表格。比如12306中的车票信息等，还可以用来展示九宫格这一类的页面元素。
优点有：1. 兼容性好；2. 不用额外考虑垂直居中的实现；3. 结构化的展示数据更合理；
缺点：1.标签类别多，复杂；2. 不利于SEO。

table的width属性

1. 设置了整体table的宽度，即table的width属性，分两种情况：
   • table-layout: auto;(默认)
     • 未设置td的width样式属性：若所有内容完全显示所需要的table宽度小于table设置的属性width，列宽按该每一列中内容最长的元素来动态分配，整体宽为width; 否则，table宽度会自动调整为内容能够完全显示的最小宽度，即table设置的属性失效。
     • 设置td的width样式属性：若所有内容完全显示所需要的table宽度小于table设置的属性width，列宽按该每一列中内容最长的元素来动态分配，整体宽为width，与上一种情况不同的是，这里动态分配会综合考虑每列对应td所设置的width ，在列宽足够显示内容的情况下，分配比例接近列宽设置值的比例；否则，table宽度会自动调整为内容能够完全显示的最小宽度，即table设置的属性失效。
   • table-layout: fixed
     • 未设置td的width样式属性：所有列宽按等比例分配，使得列表整体等于设置的table的width值；td可以设置overflow: auto;来显示超出的内容。
     • 设置td的width样式属性：列宽按照每列对应的td的width值分配，使得列表整体等于设置的table的width值。
2. 没有设置table的width属性时，table-layout设置无效，table的列宽在对应的td设置的宽度与展示对应列所需要的最小宽度中取最大值；

table的height属性

1. 未设置height，未设置td的height：行高按照能显示内容最小高度设置。
2. 未设置height，设置td的height：行高在能显示内容最小高度和设置高度中取较大值
3. 设置了height，未设置td的height：若行高按照能显示内容最小高度设置后整体高度小于设置高度，则按照每行需要行高比例分配；否则，行高按照能显示内容最小高度设置。

table的border相关属性

1. border-collapse属性值为 separate (默认)时，相邻border会独自占用区间，不折叠在一起。
2. border-collapse属性值为 collapse 时，表示相邻的border会折叠在一起。
3. border-spacing值，表示当border-collapse: seperate; 时，相邻border之间的间距。

table标题属性caption

caption-side: top; 标题在表格上方
caption-side: bottom; 标题在表格下方

table设置空元素的样式，empty-cell

empty-cells: hide; 当元素为空时，隐藏border;
empty-cells: show; 当元素为空时，显示border

table-cell实现垂直居中布局

垂直居中一直是一个令人头疼的问题，使用table元素的属性是解决垂直居中的一个可取的方案，比如实现下面dv2要在dv1中垂直居中，则可以按照下面方式来布局。

<div id="dv1">
    <div id="dv2"></div>    
<div>
<style>
    #dv1{
        width: 200px;
        height: 200px;
        background-color: darkcyan;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    #dv2{
        display: inline-block;
        width:100px;
        height: 100px;
        background-color: darkorange;
        vertical-align: middle;
    }
</style>