在很久以前, 曾經人們大量的使用table
來排版, 但table
帶來的巨大的限制, 我們沒辦法隨心所欲地使用它來完成多變繁瑣的佈局, 必須層層嵌套table
來達到目的。
後來div
佈局模式為大家帶來一道曙光, 我們能夠用更合理的方式來達到目的而使用大量不必要的table
標籤來hack
佈局。
且在之後可能常會不經意地聽到人們提到那以前table
佈局模式是多麽的罪惡多麽的多麽的不再該被使用。
但真的是這樣嗎?
如果真的是這樣那為何在現今網站上還是常見到table
到使用呢?
table
的確還是有它的存在價值的, 或許它真的不適合與來做頁面佈局, 但在呈現大量報表式資料時table
還是相當好用的。
HTML5問世後其實為table
增添了許多能力。
搭配CSS3的@media
更是為table
打開了一道新窗。
本文將介紹如何使用table
搭配HTML5特性
其內容包含 table
、 tr
、th
、td
、caption
、thead
、tbody
、tfoot
、colgroup
、col
元素。
接著將會在下一單元介紹如何使用table
搭配CSS3特性
表格元素
預設 CSS
屬性
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
大家一定見過帶有attribute的table
例如:width
、border
、align
...
但幾乎全部的table
attribute都已經被標示為Not supported in HTML5.
樣式的設定較合理的做法是定義CSS
屬性,而不是直接定義在元素attrubute當中。
table
元素在javascript
中屬HTMLTableElement
實例
且帶有rows、tBodies兩個元素集合屬性
table
中所有的 tr
元素的HTMLCollection
table
中所有的 tbody
元素的HTMLCollection
表示table
中的 row 元素
預設 CSS
屬性
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
tr
元素的屬性align
、bgcolor
、char
、charoff
、valign
都已被標示為Not supported in HTML5.
tr
元素在javascript
中屬於HTMLTableRowElement
實例
且帶有cells元素集合屬性
tr
中所有的 td
元素的HTMLCollection
作為table
的一般 cell 元素
預設 CSS
屬性
td {
display: table-cell;
vertical-align: inherit;
}
td
元素的大多的屬性都已被標示為Not supported in HTML5.
現有的合理屬性限於colspan
、headers
th
的id
屬性質, 主要用途是為了告知視障朋友們當前td
屬於什麼資料內容, 且該值可以同時存在多個id
值,使用空白做為分隔。td
元素在javascript
中屬於HTMLTableCellElement
實例
實例屬性cellIndex
性返回當前td
的index
於父tr
, 引所由0開始。
作為table
的標題 cell 元素
預設 CSS
屬性
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}
th
元素的大多的屬性都已被標示為Not supported in HTML5.
現有的合理屬性限於abbr
、colspan
、rowspan
、headers
、scope
、sorted
th
的id
屬性質, 主要用途是為了告知視障朋友們當前th
屬於什麼資料內容, 且該值可以同時存在多個id
值,使用空白做為分隔。number
、reversed
th
元素在javascript
中屬於HTMLTableCellElement
實例
實例屬性cellIndex
性返回當前th
的index
於父tr
, 引所由0開始。
caption
應該被設定於table
的第一個子元素, 用於表示該table
的title
預設 CSS
屬性
caption {
display: table-caption;
text-align: center;
}
caption
元素的所有屬性都已被標示為Not supported in HTML5.
caption
元素在javascript
中屬於HTMLTableCaptionElement
實例
colgroup
與col
都是很特別的新元素, 我們可以用它來設定table
的columns樣式
以下是一個簡單的使用範例:
<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;
}
colgroup
與col
元素多數屬性都已被標示為Not supported in HTML5., 僅開放span
屬性
colgroup
與col
元素在javascript
中屬於HTMLTableColElement
實例
colgroup
與col
元素使用上注意事項
col
沒有閉合標籤col
必須被裝在colgroup
元素中col
元素時父元素必須是colgroup
且不能帶有span
屬性, 此時的span
屬性應設定於col
元素colgroup
而不使用col
時, 可以設定多個colgroup
並設定其span
屬性值用於將table
中的表頭內容群組化
預設 CSS
屬性
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
thead
元素的所有屬性都已被標示為Not supported in HTML5.
thead
元素中必須至少包含一個tr
元素thead
元素在javascript
中屬於HTMLTableSectionElement
實例
用於總結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
實例
用於table
中的主要內容群組化
預設 CSS
屬性
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tbody
元素的所有屬性都已被標示為Not supported in HTML5.
tbody
元素中必須至少包含一個tr
元素table
元素可以包含多個tbody
元素tbody
元素必須用於table
中, 且定義於thead
、colgroup
、caption
元素之後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