從HTML表格到CSS 靜宜大學 資管系 楊子青
表格 表格架構 直欄(column) 表格(table) 儲存格(cell) 橫列(row)
表格語法 Step1.設定表格 Step2.設定橫列： Step3.設定直欄： 實例： 語法：<table border="1"> ... </table> Step2.設定橫列： 語法：<tr> … </tr> Step3.設定直欄： 語法：<td> … </td> 實例： <table border="1"> <tr> <td>第 1 列、第 1 欄</td> <td>第 1 列、第 2 欄</td> </tr> </table>
表格問題 如果要排版美觀，可在語法內加上width、 color等屬性值，缺點會造成網頁語法雜亂 <table> <tr> <td>標題</td> <td>回應</td> <td>日期</td> </tr> <td>如何停用WordPress內建搜尋功能？</td> <td>5</td> <td>2013/09/02</td> </table> 如果要排版美觀，可在語法內加上width、 color等屬性值，缺點會造成網頁語法雜亂
建議：使用CSS+DIV排版 (1)將Table的語法改為DIV (使用 http://jsfiddle.net/ 編輯) <div id="css_tbl"> <div class="css_tr"> <div class="css_td">標題</div> <div class="css_td">回應</div> <div class="css_td">日期</div> </div> <div class="css_td">如何停用WordPress內建搜尋功能？</div> <div class="css_td">5</div> <div class="css_td">2013/09/02</div>
(2)套上CSS (使用 http://jsfiddle.net/ 編輯) 建議：使用CSS+DIV排版 (2)套上CSS (使用 http://jsfiddle.net/ 編輯) #css_tbl{ display: Table; } .css_tr{ display: Table-Row; .css_td{ display: Table-Cell;
建議：使用CSS+DIV排版 執行結果 (與Table效果相同)
建議：使用CSS+DIV排版 修改版 (HTML部分) <div id="css_tbl"> <div class="css_tr"> <div class="css_td_1">標題</div> <div class="css_td_1">回應</div> <div class="css_td_1">日期</div> </div> <div class="css_td">如何停用WordPress內建搜尋功能？</div> <div class="css_td">5</div> <div class="css_td">2013/09/02</div>
建議：使用CSS+DIV排版 修改版 (CSS部分) #css_tbl{ display: Table; } .css_tr{ display: Table-Row; .css_td{ display: Table-Cell; color: Blue; .css_td_1{ color: Red;
建議：使用CSS+DIV排版 修改版執行結果
參考資料 教科書 網路資源 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。 Chap 07: 表格與表單 網路資源 http://sofree.cc/css-table/