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对没有写的标签做了补全，这点需要注意。

参考文章：https://www.w3.org/TR/html5/tabular-data.html