符合HTML5標準化的表格TABLE

曾經有個網頁技術主管跟我說：現在網頁已經不用table了, 都用div了, 這樣講有對有錯,
他真正意思應該是用div標簽建立起基本的layout佈局, 這部份當然沒什異議, 但是table是否那麼醜陋, 感覺根本就是垃圾般標簽....丟掉吧 ..

也因此依其意思, 全用了div標簽, 類似以下寫法

＜div class="equal"＞
＜div class="row"＞
＜div class="one"＞＜/div＞
＜div class="two"＞＜/div＞
＜div class="three"＞＜/div＞
＜/div＞
＜/div＞

用到的css屬性如下
display:table; 用在class="equal"
display:table-caption; （表格標題樣式寫法）
display:table-row; 用在class="row"
display:table-cell; 用在class="one"、class="two"、class="three"
參考網址：http://www.cainiao8.com/web/csstech2007/11-divliketable.html

實做完的結果, 老實說我懷念起了<table> 的語法了（ 老朋友阿...）,
因為加了一堆無意義的div標簽 , 也加了一堆class樣式,

符合HTML5標準化的表格寫法

以下標籤需依其順序性書寫

<table>
<caption> /* table 詳細描述
<colgroup> <col> /* 欄位群組的樣式設定
<thead> 表格表頭 搭配 <th>/* （<th>為欄位標題的意思）
<tfoot> 表格結尾
<tbody> 表格內容(可重複此表籤)

實際操作的畫面如下
DEMO

語法如下

<table>

<caption>102學年度考試成績
<summary>摘要:此成績將會佔學年成績的百分之30％</summary>
</caption>

<colgroup>
<col span="2" style="background-color:white">
<col style="background-color:yellow">
</colgroup>

<thead>
<tr>
<td colspan="3" class="subject">數學</td>
</tr>
<tr>
<th>學號</th>
<th>姓名</th>
<th>分數</th>
</tr>
</thead>

<tbody>
<tr>
<td>st-001</td>
<td>王大明</td>
<td>90</td>
</tr>
<tr>
<td>st-002</td>
<td>林小芬</td>
<td>85</td>
</tr>
</tbody>

</table>

說明

• 為了使資料表格更富有意義 , 結構更清晰 , 劃分了表頭 表尾 表內容 , 對表格詳加描述 , 則針對群組化欄位的設定
• 第一個 會取 學號、st-001、st-002 , 則會取兩個組欄位
• 為資料欄位的標題欄
• html5不支援cellpadding、cellspacing、width、align、scope ,請用css作設定

參考網址 http://www.pdprogrammeur.com/tables-and-html5-table/