Re: [CSS][Table] cellpadding=0 效果等於 td {padding:0;} - Re: 表格的製作

本講義的範例
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





(編輯記錄)

MEPOERs said:

補充：

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

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

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



(編輯記錄)

(1).作業網址 ： http://mepopedia.com/~web104-2c/hw05/hw05-1055445081

(2).請回答以下問題：
1.導覽列配色與風格設定：簡單的
2.有無遇到的問題? 沒有太大的問題
3.製作感想 :其實我做錯了我直接跳到06但這是05
4.製作作業的時間 about 2hr

網頁設計

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