iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
2
Modern Web

重新學習網頁設計系列 第 1

DAY 1. HTML5 表格 Table

在很久以前, 曾經人們大量的使用table來排版, 但table 帶來的巨大的限制, 我們沒辦法隨心所欲地使用它來完成多變繁瑣的佈局, 必須層層嵌套table來達到目的。

後來div佈局模式為大家帶來一道曙光, 我們能夠用更合理的方式來達到目的而使用大量不必要的table標籤來hack佈局。

且在之後可能常會不經意地聽到人們提到那以前table佈局模式是多麽的罪惡多麽的多麽的不再該被使用。

但真的是這樣嗎?

如果真的是這樣那為何在現今網站上還是常見到table到使用呢?

table的確還是有它的存在價值的, 或許它真的不適合與來做頁面佈局, 但在呈現大量報表式資料時table還是相當好用的。

HTML5問世後其實為table增添了許多能力。
搭配CSS3@media更是為table打開了一道新窗。

本文將介紹如何使用table搭配HTML5特性
其內容包含 tabletrthtdcaptiontheadtbodytfootcolgroupcol 元素。
接著將會在下一單元介紹如何使用table搭配CSS3特性

table

表格元素

預設 CSS 屬性

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

大家一定見過帶有attribute的table例如:widthborderalign ...

但幾乎全部的tableattribute都已經被標示為Not supported in HTML5.

樣式的設定較合理的做法是定義CSS屬性,而不是直接定義在元素attrubute當中。

table元素在javascript中屬HTMLTableElement實例
且帶有rowstBodies兩個元素集合屬性

  • rows 返回 table 中所有的 tr 元素的HTMLCollection
  • tBodies 返回 table 中所有的 tbody 元素的HTMLCollection

tr

表示table中的 row 元素

預設 CSS 屬性

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

tr元素的屬性alignbgcolorcharcharoffvalign都已被標示為Not supported in HTML5.

tr元素在javascript中屬於HTMLTableRowElement實例
且帶有cells元素集合屬性

  • cells 返回 tr 中所有的 td 元素的HTMLCollection

td

作為table的一般 cell 元素

預設 CSS 屬性

td {
    display: table-cell;
    vertical-align: inherit;
}

td元素的大多的屬性都已被標示為Not supported in HTML5.
現有的合理屬性限於colspanheaders

  • colspan 用於合併儲存格
  • headers 該屬性應填寫表中thid屬性質, 主要用途是為了告知視障朋友們當前td屬於什麼資料內容, 且該值可以同時存在多個id值,使用空白做為分隔。

td元素在javascript中屬於HTMLTableCellElement實例
實例屬性cellIndex性返回當前tdindex於父tr, 引所由0開始。

th

作為table的標題 cell 元素

預設 CSS 屬性

th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
    text-align: center;
}

th元素的大多的屬性都已被標示為Not supported in HTML5.
現有的合理屬性限於abbrcolspanrowspanheadersscopesorted

  • abbr 設定或取得該欄位的值, 通常用於縮寫
  • colspan 用於合併橫向儲存格
  • rowspan 用於合併縱向儲存格
  • headers 該屬性應填寫表中thid屬性質, 主要用途是為了告知視障朋友們當前th屬於什麼資料內容, 且該值可以同時存在多個id值,使用空白做為分隔。
  • scope 主要用於告訴視障朋友該欄位屬於col、colgroup、 row、rowgroup當中哪一個元素。
  • sorted 定義排列方向其合理屬性值包含numberreversed

th元素在javascript中屬於HTMLTableCellElement實例
實例屬性cellIndex性返回當前thindex於父tr, 引所由0開始。

caption

caption應該被設定於table的第一個子元素, 用於表示該tabletitle

預設 CSS 屬性

caption { 
    display: table-caption;
    text-align: center;
}

caption元素的所有屬性都已被標示為Not supported in HTML5.

caption元素在javascript中屬於HTMLTableCaptionElement實例

colgroup & col

colgroupcol都是很特別的新元素, 我們可以用它來設定tablecolumns樣式
以下是一個簡單的使用範例:

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

預設 CSS 屬性

colgroup { 
    display: table-column-group;
}
col { 
    display: table-column;
}

colgroupcol元素多數屬性都已被標示為Not supported in HTML5., 僅開放span屬性

  • span 定義要改變的column數目

colgroupcol元素在javascript中屬於HTMLTableColElement實例

colgroupcol元素使用上注意事項

  • col沒有閉合標籤
  • col必須被裝在colgroup元素中
  • 當使用col元素時父元素必須是colgroup且不能帶有span屬性, 此時的span屬性應設定於col元素
  • 當使用colgroup而不使用col時, 可以設定多個colgroup並設定其span屬性值

thead

用於將table中的表頭內容群組化

預設 CSS 屬性

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

thead元素的所有屬性都已被標示為Not supported in HTML5.

  • thead元素中必須至少包含一個tr元素

thead元素在javascript中屬於HTMLTableSectionElement實例

tfoot

用於總結table中的內容, 此元素不管定義於table元素的第幾子元素, 最終都將被html渲染製該table中最後子元素。

預設 CSS 屬性

tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit;
}

tfoot元素的所有屬性都已被標示為Not supported in HTML5.

  • tfoot元素中必須至少包含一個tr元素

tfoot元素在javascript中屬於HTMLTableSectionElement實例

tbody

用於table中的主要內容群組化

預設 CSS 屬性

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

tbody元素的所有屬性都已被標示為Not supported in HTML5.

  • tbody元素中必須至少包含一個tr元素
  • table元素可以包含多個tbody元素
  • tbody元素必須用於table中, 且定義於theadcolgroupcaption元素之後

tbody元素在javascript中屬於HTMLTableSectionElement實例


總結

本文介紹至此介紹了table元素中的各個子元素的基本特性, 以及使用上的注意事項, 接著將會在下個單元介紹table搭配css3使用。

最後附上一個現代版本的table範例以及其DEMO

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>HTML5 table</title>
</head>
<body>
<table id="fruit_table">
  <caption>水果價目表</caption>
  
  <colgroup>
    <col style="background:lightgray">
    <col span="2" style="background:yellow">
  </colgroup>
  
  <thead>
    <tr>
      <th id="fruit_name">名稱</th>
      <th id="fruit_price">價格</th>
      <th id="fruit_inventory">剩餘數目</th>
    </tr>
  </thead>
  
  <tfoot style="color:blue;">
    <tr>
      <td colspan="3">芭樂已售完</td>
    </tr>
  </tfoot>
  
  <tbody>
    <tr>
      <td headers="fruit_name">蘋果</td>
      <td headers="fruit_price">30</td>
      <td headers="fruit_inventory">10</td>
    </tr>
    <tr>
      <td headers="fruit_name">香蕉</td>
      <td headers="fruit_price">25</td>
      <td headers="fruit_inventory">7</td>
    </tr>
    <tr>
      <td headers="fruit_name">芭樂</td>
      <td headers="fruit_price">20</td>
      <td headers="fruit_inventory"></td>
    </tr>
  </tbody>
</table>
</body>
</html>

本文資料來源 w3cschoold.com


下一篇
DAY 2. CSS 特定度 Specificity
系列文
重新學習網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言