Change History
Message: [遠距教學講義] 表格的製作
Original Message
作者: JinJinDate: May 18, 2012 07:13AM
[遠距教學講義] 表格的製作
遠距教學的表格製作影音原始檔
共三個檔案
放在學校 ican系統→教材區
這次前兩個檔案是直接上傳到ican
下載會有下載紀錄，請大家下載
但因空間不足還是放到推薦網站區
要記得去下載喔!
大家試試看是否可順利下載
若有問題請回報
[hr]
本講義的範例
http://mepopedia.com/~jinjin/web/hw06-ex/
[hr]
在進入表格之前，先複習一下基本的設定，大家可以下載練習檔來練習，希望可以透過影片讓大家對於CSS基本的設定更佳的熟練，也先把基本的部分做好設定。
Dreamweaver中#content、#footer、h2、項目清單的CSS設定
http://www.youtube.com/watch?v=gvI0qYcn9ko
[hr]
表格是網頁中常出現的元素，在傳統的網頁設計中表格除了有整理資料的功能外，還常被使用為整個頁面排版的工具，但是在CSS逐步展開WEB標準設定後，表格逐漸不再擔任重要的版面配置任務，而以DIV取代，但表格仍然在整理資料上，扮演重要的角色，本單元也以CSS搭配表格，講述如何以表格整理資料，並同時展現美感的部分，包含：色彩、標題、邊框、背景等。
最常用的與表格相關的標記為<table>、<tr>、<td>。
<table>：定義整個表格。
<tr>：定義一列
<td>：定義一個儲存格
如以下是三列兩欄表格的HTML語法：
<table><br />
<tr><br />
<td>表格儲存格</td><br />
<td>表格儲存格</td><br />
</tr><br />
<tr><br />
<td>表格儲存格</td><br />
<td>表格儲存格</td><br />
</tr><br />
<tr><br />
<td>表格儲存格</td><br />
<td>表格儲存格</td><br />
</tr><br />
</table><br />
另外為了使CSS可以更活用的設計表格樣式，還有兩個常用的標記：
<caption>：定義表格的大標題，該標記可以出現在<table></table>之間的任意位置，不過通常出現在第一排<table>標記之後。
<th>：是table header的縮寫，即表頭的意思，在表格中用於列或欄的名稱，跟<tr>和<td>很類似，主要是針對他們進行樣式設定。
例如表格也可以這樣表現：
<table><br />
<caption>表格的標題</caption><br />
<tr><br />
<th>表格標頭</th><br />
<th>表格標頭</th><br />
</tr><br />
<tr><br />
<td>表格儲存格</td><br />
<td>表格儲存格</td><br />
</tr><br />
<tr><br />
<td>表格儲存格</td><br />
<td>表格儲存格</td><br />
</tr><br />
</table><br />
各部位如圖所示
border-collapse:collapse;
HTML屬性中：
cellpadding：設置儲存格內容和邊框之間的距離
cellspacing：設置相鄰儲存格邊框之間的距離
以CSS實現cellpadding的作用，只要對td使用padding就可以，而對儲存格使用margin是無用的，必須在table使用專門屬性：border-spacing來代替他。
接下來則以實例來解說表格的應用：
Dreamweaver表格製作-TABLE,TR TD TH caption的CSS設定
http://www.youtube.com/watch?v=3gPx_YYE1yI
[hr]
Dreamweaver表格製作-細部調整、圖片開啟新視窗、超連結等CSS的設定
http://www.youtube.com/watch?v=69CMaum2WPY
[hr]
Dreamweaver中表格CSS設定以及影音嵌入
http://www.youtube.com/watch?v=lXMUKwYmBqQ
Dreamweaver表格製作-細部調整、圖片開啟新視窗、超連結等CSS的設定
http://www.youtube.com/watch?v=69CMaum2WPY
[hr]
Dreamweaver中表格CSS設定以及影音嵌入
http://www.youtube.com/watch?v=lXMUKwYmBqQ
[hr]
共三個檔案
放在學校 ican系統→教材區
這次前兩個檔案是直接上傳到ican
下載會有下載紀錄，請大家下載
但因空間不足還是放到推薦網站區
要記得去下載喔!
大家試試看是否可順利下載
若有問題請回報
[hr]
本講義的範例
http://mepopedia.com/~jinjin/web/hw06-ex/
[hr]
在進入表格之前，先複習一下基本的設定，大家可以下載練習檔來練習，希望可以透過影片讓大家對於CSS基本的設定更佳的熟練，也先把基本的部分做好設定。
Dreamweaver中#content、#footer、h2、項目清單的CSS設定
http://www.youtube.com/watch?v=gvI0qYcn9ko
[hr]
表格的概述
表格是網頁中常出現的元素，在傳統的網頁設計中表格除了有整理資料的功能外，還常被使用為整個頁面排版的工具，但是在CSS逐步展開WEB標準設定後，表格逐漸不再擔任重要的版面配置任務，而以DIV取代，但表格仍然在整理資料上，扮演重要的角色，本單元也以CSS搭配表格，講述如何以表格整理資料，並同時展現美感的部分，包含：色彩、標題、邊框、背景等。
表格中的標記
最常用的與表格相關的標記為<table>、<tr>、<td>。
<table>：定義整個表格。
<tr>：定義一列
<td>：定義一個儲存格
如以下是三列兩欄表格的HTML語法：
另外為了使CSS可以更活用的設計表格樣式，還有兩個常用的標記：
<caption>：定義表格的大標題，該標記可以出現在<table></table>之間的任意位置，不過通常出現在第一排<table>標記之後。
<th>：是table header的縮寫，即表頭的意思，在表格中用於列或欄的名稱，跟<tr>和<td>很類似，主要是針對他們進行樣式設定。
例如表格也可以這樣表現：
各部位如圖所示
表格的邊框
設定儲存格的邊框
border-collapse:collapse;
HTML屬性中：
cellpadding：設置儲存格內容和邊框之間的距離
cellspacing：設置相鄰儲存格邊框之間的距離
以CSS實現cellpadding的作用，只要對td使用padding就可以，而對儲存格使用margin是無用的，必須在table使用專門屬性：border-spacing來代替他。
接下來則以實例來解說表格的應用：
Dreamweaver表格製作-TABLE,TR TD TH caption的CSS設定
http://www.youtube.com/watch?v=3gPx_YYE1yI
[hr]
Dreamweaver表格製作-細部調整、圖片開啟新視窗、超連結等CSS的設定
http://www.youtube.com/watch?v=69CMaum2WPY
[hr]
Dreamweaver中表格CSS設定以及影音嵌入
http://www.youtube.com/watch?v=lXMUKwYmBqQ
Dreamweaver表格製作-細部調整、圖片開啟新視窗、超連結等CSS的設定
http://www.youtube.com/watch?v=69CMaum2WPY
[hr]
Dreamweaver中表格CSS設定以及影音嵌入
http://www.youtube.com/watch?v=lXMUKwYmBqQ
[hr]