Table 元素学习
虽然今天用几乎用不到table元素，现在也不推荐（禁止）使用table元素进行布局，不过还是需要了解以下Table元素。
Child Element & defination
<caption> | 表示为表格的标题，通常用作table元素的第一个子元素。
<colgroup> | 定义表格中的一组列表
- <col> | 定义表格中的列，并用于定义所有公共单元格上的公共语义，通常位于<colgroup>内
<thead> | 当父元素为table时，表示为列标签（headers）组成的行块（整个表的表头部分）
<tbody> | 当父元素为table时，表示为表格主体部分
<tr> | 定义表格中的行
<td> | 表格中的格子（表示为数据）
<th> | 表格中的格子（表示为标题）
<tfoot> | 表格总结列
以上父元素为table指display:table，即元素渲染的样式为table或table类，其子元素能够按表格样式生效
Abbreviation
td | Table data (cell)
tr | Table rowIndex | position of the row in table's row list
th | Table header (cell)
Example
<table border>
<caption>Table</caption>
<colgroup>
<col span="2" style="background-color: #0f0">
<col style="background-color: red">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
<td>Footer content 3</td>
</tr>
</tfoot>
</table>
table特性实现垂直居中
// html
<div class="parent">
<div class="child"></div>
</div>
// css
.parent{
display:table;
}
.child{
display: table-cell;vertical-align: middle;
}
<table style="border: 2px solid blue;height: 400px">
<tbody>
<tr>
<td style="border: 2px solid red">
这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！
</td>
</tr>
</tbody>
</table>
<div style="display:table;border: 2px solid blue;height:400px">
<div style="display: table-cell;vertical-align: middle;border: 2px solid red">
这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！这是一行字！
</div>
</div>
其他
在实验垂直居中的过程中，发现如果不写<tbody><tr>元素的情况下，样式依然可以显示，通过开发者工具发现，chrome对没有写的标签做了补全，这点需要注意。
