「HTML 学习笔记」 Table元素学习

2017-08-24  本文已影响0人  这名字真不对

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

上一篇 下一篇

猜你喜欢

热点阅读