http://learn.shayhowe.com/html-css/organizing-data-tables

Lesson 9 Organizing Data with Tables

使用實際:大量的表格化資料,給予使用者簡單迅速的閱讀理解模式

Table 沒有不好,只是不建議拿來做整個網頁的排版

  1. Creating a Table
  1. Table:table
  2. Table Row:tr 列 (水平)
  3. Table Data:td 資料
  4. Table Header:th 標題
  1. 比較 (語義上):h1 p : a heading, h1, and paragraph, p
  2. 範圍:scope - row, col, rowgroup, colgroup
    http://www.w3schools.com/tags/tag_th.asp
  3. headers:多個 header cell 是有關係的
    <table border="1">

  <tr>

    <th id="name" colspan="2">Name</th>

  </tr>

  <tr>

    <th headers="name">Firsname</th>

    <th headers="name">Lastname</th>

  </tr>

</table>

  1. Combining Multiple Cells
  1. colspan
  2. rowspan
  1. Table Structure
  1. Table Caption:table 的標題
  2. Table Head, Body, & Foot:
  1. 結構:
    <table>
     <caption>...</caption>
        <thead>
        …
       </thead>
       <tbody>
       …
       </tbody>
       <tfoot>
       …
       </tfoot>
    </table>
  2. thead
  3. tbody
  4. tfoot:過去tfoot 要緊接在 thead 後面
  1. Table Borders
  1. Border Collapse Property
  1. border-collapse:如果 doctype 沒有指定,IE8之前版本會有問題
  2. separate
  3. collapse
  1. Border Spacing Property
  1. border-collapse property 是 spearate 的情況下
  1. Adding in Borders
  1. Row Borders
  1. Cell Borders
  1. 在 border-spacing 是 collapse 情況下
  1. Aligning Text
  1. text-align
  2. vertical-align:
  1. 只有在 inline 跟 table-cell 呈現使用,不能在 block level 的 element 運作。
  2. top, middle,bottom
  1. Table Striping
  1. nth-child pseudo-class 的應用
  2. 目的:易讀性