Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Re: [講義06] 表格的製作

[講義06] 表格的製作

本講義的範例
http://mepopedia.com/~jinjin/web/hw06-ex/




在進入表格之前,先複習一下基本的設定,大家可以下載練習檔來練習,希望可以透過影片讓大家對於CSS基本的設定更佳的熟練,也先把基本的部分做好設定。

Dreamweaver中#content、#footer、h2、項目清單的CSS設定
http://www.youtube.com/watch?v=gvI0qYcn9ko






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






Dreamweaver表格製作-細部調整、圖片開啟新視窗、超連結等CSS的設定

http://www.youtube.com/watch?v=69CMaum2WPY






Dreamweaver中表格CSS設定以及影音嵌入

http://www.youtube.com/watch?v=lXMUKwYmBqQ





Edited 6 time(s). Last edit at 12/11/2011 01:15AM by HP.
(編輯記錄)

MEPOERs said:
HP: 哇,有影音解說耶!有關 table 的部份,我看了也覺得很有收獲呢!
HP: 另外,要是同學覺得看不清楚的話,可以將解析度調到 720p (HD),然後用全螢幕看,很清楚哦!
弟分尼: 老師我覺得影音解說其實不好欸,有點麻煩,而且我家的電腦跑不動.....還是之前的比較好!!!直接可以做重點!!!
Attachments:
開啟 | 下載 - hw06-ex.rar (1007.2 KB)
補充:

在 table 中設定 <table cellpadding="0"> 效果等於在 CSS 設定 td { padding:0;}。

也因此,在 CSS 設定一次 td { padding:0;} 就不用每次在 table 中設定 cellpadding="0" 了。

另外,CSS 中的 padding-left、padding-right 等屬性也適用於 td 中。用來控制 table/td 的 padding 非常好用。同時,這個用法也經過跨瀏覽器的測試,在不用的瀏覽器都能正常地使用。



Edited 3 time(s). Last edit at 02/06/2012 01:24AM by HP.
(編輯記錄)

Re: [講義06] 表格的製作

花的時間有點久因為影片崁入的問題

Attachments:
開啟 | 下載 - story.html (5 KB)
開啟 | 下載 - style.css (4.1 KB)