從HTML表格到CSS 靜宜大學 資管系 楊子青.

Presentation on theme: "從HTML表格到CSS 靜宜大學 資管系 楊子青."— Presentation transcript:

1 從HTML表格到CSS 靜宜大學 資管系 楊子青

2 表格 表格架構 直欄(column) 表格(table) 儲存格(cell) 橫列(row)

3 表格語法 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>

4 表格問題 如果要排版美觀，可在語法內加上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等屬性值，缺點會造成網頁語法雜亂

5 建議：使用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>

6 (2)套上CSS (使用 http://jsfiddle.net/ 編輯)
建議：使用CSS+DIV排版 (2)套上CSS (使用 編輯) #css_tbl{ display: Table; } .css_tr{ display: Table-Row; .css_td{ display: Table-Cell;

7 建議：使用CSS+DIV排版 執行結果 (與Table效果相同)

8 建議：使用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>

9 建議：使用CSS+DIV排版 修改版 (CSS部分) #css_tbl{ display: Table; } .css_tr{
display: Table-Row; .css_td{ display: Table-Cell; color: Blue; .css_td_1{ color: Red;

10 建議：使用CSS+DIV排版 修改版執行結果

11 參考資料 教科書 網路資源 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。
Chap 07: 表格與表單 網路資源