[遠距教學講義] 表格的製作

遠距教學的表格製作影音原始檔
共三個檔案
放在學校 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]

1. 表格的概述

表格是網頁中常出現的元素，在傳統的網頁設計中表格除了有整理資料的功能外，還常被使用為整個頁面排版的工具，但是在CSS逐步展開WEB標準設定後，表格逐漸不再擔任重要的版面配置任務，而以DIV取代，但表格仍然在整理資料上，扮演重要的角色，本單元也以CSS搭配表格，講述如何以表格整理資料，並同時展現美感的部分，包含：色彩、標題、邊框、背景等。

2. 表格中的標記

最常用的與表格相關的標記為<table>、<tr>、<td>。

<table>：定義整個表格。
<tr>：定義一列
<td>：定義一個儲存格


如以下是三列兩欄表格的HTML語法：

<table> <tr> <td>表格儲存格</td> <td>表格儲存格</td> </tr> <tr> <td>表格儲存格</td> <td>表格儲存格</td> </tr> <tr> <td>表格儲存格</td> <td>表格儲存格</td> </tr> </table>

另外為了使CSS可以更活用的設計表格樣式，還有兩個常用的標記：

<caption>：定義表格的大標題，該標記可以出現在<table></table>之間的任意位置，不過通常出現在第一排<table>標記之後。

<th>：是table header的縮寫，即表頭的意思，在表格中用於列或欄的名稱，跟<tr>和<td>很類似，主要是針對他們進行樣式設定。

例如表格也可以這樣表現：

<table> <caption>表格的標題</caption> <tr> <th>表格標頭</th> <th>表格標頭</th> </tr> <tr> <td>表格儲存格</td> <td>表格儲存格</td> </tr> <tr> <td>表格儲存格</td> <td>表格儲存格</td> </tr> </table>
各部位如圖所示

3. 表格的邊框

1. 設定儲存格的邊框

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



[hr]



(編輯記錄)