[講義06] 表格的製作 1. 表格的概述2. 表格中的標記3. 表格的邊框3.1 設定儲存格的邊框本講義的範例 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語法： 表格儲存格 表格儲存格 表格儲存格 表格儲存格 表格儲存格 表格儲存格 另外為了使CSS可以更活用的設計表格樣式，還有兩個常用的標記： <caption>：定義表格的大標題，該標記可以出現在<table></table>之間的任意位置，不過通常出現在第一排<table>標記之後。 <th>：是table header的縮寫，即表頭的意思，在表格中用於列或欄的名稱，跟<tr>和<td>很類似，主要是針對他們進行樣式設定。 例如表格也可以這樣表現： 表格的標題 表格標頭 表格標頭 表格儲存格 表格儲存格 表格儲存格 表格儲存格 各部位如圖所示 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 http://mepopedia.com/forum/read.php?804,18062,18062#msg-18062 Sat, 24 Oct 2026 18:56:21 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?804,18062,88465#msg-88465 Re: [CSS][Table] cellpadding=0 效果等於 td {padding:0;} - Re: 表格的製作 http://mepopedia.com/forum/read.php?804,18062,88465#msg-88465 網頁設計]]> didi7777 網頁設計與語法（HTML/CSS） Wed, 26 Sep 2018 13:31:10 +0800 http://mepopedia.com/forum/read.php?804,18062,87521#msg-87521 Re: [CSS][Table] cellpadding=0 效果等於 td {padding:0;} - Re: 表格的製作 http://mepopedia.com/forum/read.php?804,18062,87521#msg-87521
(2).請回答以下問題：
1.導覽列配色與風格設定：簡單的
2.有無遇到的問題? 沒有太大的問題
3.製作感想 :其實我做錯了我直接跳到06但這是05
4.製作作業的時間 about 2hr]]> misoomisooo 網頁設計與語法（HTML/CSS） Wed, 17 Jan 2018 15:25:33 +0800 http://mepopedia.com/forum/read.php?804,18062,83443#msg-83443 Re: [講義06] 表格的製作 http://mepopedia.com/forum/read.php?804,18062,83443#msg-83443 loveelise1021 網頁設計與語法（HTML/CSS） Wed, 04 Jan 2017 00:37:21 +0800 http://mepopedia.com/forum/read.php?804,18062,19972#msg-19972 [CSS][Table] cellpadding=0 效果等於 td {padding:0;} - Re: 表格的製作 http://mepopedia.com/forum/read.php?804,18062,19972#msg-19972
在 table 中設定 <table cellpadding="0"> 效果等於在 CSS 設定 td { padding:0;}。

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

另外，CSS 中的 padding-left、padding-right 等屬性也適用於 td 中。用來控制 table/td 的 padding 非常好用。同時，這個用法也經過跨瀏覽器的測試，在不用的瀏覽器都能正常地使用。]]> HP 網頁設計與語法（HTML/CSS） Sun, 05 Feb 2012 20:31:04 +0800 http://mepopedia.com/forum/read.php?804,18062,18062#msg-18062 [講義06] 表格的製作 http://mepopedia.com/forum/read.php?804,18062,18062#msg-18062
  1. 1. 表格的概述
  2. 2. 表格中的標記
  3. 3. 表格的邊框
  4. 3.1 設定儲存格的邊框
本講義的範例
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

]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 22 Nov 2011 23:40:34 +0800