使用手冊 取消

以表格呈現內容

  1. Dreamweaver 使用手冊
  2. 簡介
    1. 多方互動網頁設計基本概念
    2. Dreamweaver 的新增功能
    3. 使用 Dreamweaver 開發網頁 - 總覽
    4. Dreamweaver / 常見問題
    5. 鍵盤快速鍵
    6. Dreamweaver 系統需求
    7. 功能摘要
  3. Dreamweaver 和 Creative Cloud
    1. 將 Dreamweaver 設定與 Creative Cloud 同步
    2. Dreamweaver 中的 Creative Cloud Libraries
    3. 在 Dreamweaver 中使用 Photoshop 檔案
    4. 使用 Adobe Animate 和 Dreamweaver
    5. 從資料庫擷取網頁最佳化的 SVG 檔案
  4. Dreamweaver 工作區和檢視
    1. Dreamweaver 工作區
    2. 最佳化視覺開發的 Dreamweaver 工作區
    3. 根據檔案名稱或內容搜尋檔案 | Mac OS
  5. 設定網站
    1. 關於 Dreamweaver 網站
    2. 設定網站的本機版本
    3. 連線到發佈伺服器
    4. 設定測試伺服器
    5. 匯入和匯出 Dreamweaver 網站設定
    6. 將現有網站從遠端伺服器帶入本機網站根目錄
    7. Dreamweaver 中的輔助功能
    8. 進階設定
    9. 設定網站偏好設定以傳送檔案
    10. 在 Dreamweaver 中指定 Proxy 伺服器設定
    11. 將 Dreamweaver 設定與 Creative Cloud 同步
    12. 在 Dreamweaver 中使用 Git
  6. 管理檔案
    1. 建立和開啟檔案
    2. 管理檔案和資料夾
    3. 下載和上傳伺服器檔案
    4. 存回和取出檔案
    5. 同步化檔案
    6. 比較檔案差異
    7. 遮罩 Dreamweaver 網站中的檔案和資料夾
    8. 啟用 Dreamweaver 網站的設計備註
    9. 防止 Gatekeeper 遭到潛在惡意利用
  7. 版面和設計
    1. 使用視覺輔助以配置版面
    2. 關於使用 CSS 配置頁面
    3. 使用 Bootstrap 設計回應式網站
    4. 在 Dreamweaver 中建立及使用媒體查詢
    5. 以表格呈現內容
    6. 顏色
    7. 使用流變格線版面的互動設計
    8. Dreamweaver 中的 Extract
  8. CSS
    1. 了解串接樣式表
    2. 使用 CSS 設計工具配置頁面
    3. 在 Dreamweaver 中使用 CSS 預處理器
    4. 如何在 Dreamweaver 中設定 CSS 樣式偏好設定
    5. 在 Dreamweaver 中移動 CSS 規則
    6. 在 Dreamweaver 中將行內 CSS 轉換為 CSS 規則
    7. 使用 div 標籤
    8. 套用漸層至背景
    9. 在 Dreamweaver 中建立與編輯 CSS3 轉變效果
    10. 格式化程式碼
  9. 頁面內容和資產
    1. 設定頁面屬性
    2. 設定 CSS 標題屬性和 CSS 連結屬性
    3. 處理文字
    4. 尋找和取代文字、標籤和屬性
    5. DOM 面板
    6. 在即時檢視中編輯
    7. 在 Dreamweaver 中進行文件編碼
    8. 在文件視窗中選取並檢視元素
    9. 在屬性檢視窗中設定文字屬性
    10. 檢查網頁拼字
    11. 在 Dreamweaver 中使用水平線
    12. 在 Dreamweaver 中新增和修改字體組合
    13. 使用資源
    14. 在 Dreamweaver 中插入和更新日期
    15. 在 Dreamweaver 中建立和管理最愛資源
    16. 在 Dreamweaver 中插入及編輯影像
    17. 新增媒體物件
    18. 在 Dreamweaver 中加入視訊
    19. 插入 HTML5 視訊
    20. 插入 SWF 檔
    21. 新增音效效果
    22. 在 Dreamweaver 中插入 HTML5 音效
    23. 使用圖庫項目
    24. 在 Dreamweaver 中使用阿拉伯文和希伯來文文字
  10. 連結和導覽
    1. 關於連結和導覽
    2. 連結
    3. 影像地圖
    4. 連結疑難排解
  11. jQuery Widget 和效果
    1. 在 Dreamweaver 中使用 jQuery UI 和 Mobile Widget
    2. 在 Dreamweaver 中使用 jQuery 效果
  12. 撰寫網站程式碼
    1. 關於在 Dreamweaver 中撰寫程式碼
    2. Dreamweaver 的程式碼撰寫環境
    3. 設定程式碼撰寫偏好設定
    4. 自訂程式碼色彩標示
    5. 撰寫和編輯程式碼
    6. 程式碼提示和程式碼完成
    7. 收合和展開程式碼
    8. 利用片段重複使用程式碼
    9. Lint 程式碼
    10. 最佳化程式碼
    11. 在設計檢視中編輯程式碼
    12. 使用頁面的檔頭內容
    13. 在 Dreamweaver 中插入伺服器端包含
    14. 在 Dreamweaver 中使用標籤資料庫
    15. 匯入自訂標籤到 Dreamweaver
    16. 使用 JavaScript 行為 (一般說明)
    17. 套用內建的 JavaScript 行為
    18. 關於 XML 與 XSLT
    19. 在 Dreamweaver 中執行伺服器端 XSL 轉換
    20. 在 Dreamweaver 中執行用戶端 XSL 轉換
    21. 在 Dreamweaver 中新增 XSLT 字元實體
    22. 格式化程式碼
  13. 跨產品工作流程
    1. 安裝與使用 Dreamweaver 的擴充功能
    2. Dreamweaver 中的應用程式內更新
    3. 在 Dreamweaver 中插入 Microsoft Office 文件 (僅適用於 Windows)
    4. 使用 Fireworks 和 Dreamweaver
    5. 使用 Contribute 編輯 Dreamweaver 網站的內容
    6. Dreamweaver-Business Catalyst 整合
    7. 建立個人化的電子郵件行銷活動
  14. 範本
    1. 關於 Dreamweaver 範本
    2. 辨識範本和以範本為架構的文件
    3. 建立 Dreamweaver 範本
    4. 建立範本的可編輯區域
    5. 在 Dreamweaver 中建立重複區域和表格
    6. 使用範本中的選擇性區域
    7. 在 Dreamweaver 中定義可編輯的標籤屬性
    8. 如何在 Dreamweaver 中建立巢狀範本
    9. 編輯、更新和刪除範本
    10. 在 Dreamweaver 中匯出及匯入 XML 內容
    11. 對現有的文件套用或移除範本
    12. 編輯 Dreamweaver 範本的內容
    13. Dreamweaver 中範本標籤的語法規則
    14. 設定範本區域的標示偏好設定
    15. 使用 Dreamweaver 範本的好處
  15. 行動裝置和多螢幕
    1. 建立媒體查詢
    2. 為行動裝置變更頁面方向
    3. 使用 Dreamweaver 為行動裝置建立網頁用程式
  16. 動態網站、網頁和網站表單
    1. 了解網頁用程式
    2. 設定您的電腦以進行應用程式開發
    3. 疑難排解資料庫連線
    4. 在 Dreamweaver 中移除連線 Script
    5. 設計動態網頁
    6. 動態內容來源總覽
    7. 定義動態內容的來源
    8. 將動態內容新增至頁面
    9. 在 Dreamweaver 中變更動態內容
    10. 顯示資料庫記錄
    11. 在 Dreamweaver 中提供即時資料及進行疑難排解
    12. 在 Dreamweaver 中新增自訂伺服器行為
    13. 使用 Dreamweaver 建立表單
    14. 使用表單向使用者收集資訊
    15. 在 Dreamweaver 中建立及啟用 ColdFusion 表單
    16. 建立網站表單
    17. 加強對 HTML5 表單元素的支援
    18. 使用 Dreamweaver 開發表單
  17. 以視覺化方式建立應用程式
    1. 在 Dreamweaver 中建立主要和細節頁面
    2. 建立搜尋及結果頁面
    3. 建立記錄插入頁面
    4. 在 Dreamweaver 中建立更新記錄頁面
    5. 在 Dreamweaver 中建立記錄刪除頁面
    6. 在 Dreamweaver 中使用 ASP 命令修改資料庫
    7. 建立註冊頁面
    8. 建立登入頁面
    9. 建立唯有授權用戶才能存取的頁面
    10. 使用 Dreamweaver 保護 ColdFusion 中的資料夾
    11. 在 Dreamweaver 中使用 ColdFusion 組件
  18. 測試、預覽和發佈網站
    1. 預覽頁面
    2. 在多部裝置上預覽 Dreamweaver 網頁
    3. 測試 Dreamweaver 網站

 

了解如何在您的網站中使用表格呈現內容。同時,學習如何分割及合併表格儲存格,以及匯入和匯出表格式資料。

表格是在 HTML 網頁上呈現表格式資料以及展示文字和圖形的強大工具。表格是由一列或多列所構成;而每一列則是由一個或多個儲存格構成。雖然 HTML 程式碼中通常不會明確地指定欄,Dreamweaver 可讓您操作欄以及列與儲存格。

選取表格後或是插入點位於表格中時,Dreamweaver 會顯示表格寬度與表格中各欄的欄寬。寬度旁邊是表格標題選單與欄標題選單的箭頭。使用選單可以快速存取常用的表格相關命令。您可以啟用或停用寬度和選單功能。

如果您看不到表格或欄的寬度,表示 HTML 程式碼中並無該表格或欄的指定寬度。如果出現了兩個數字,則表示其在「設計」檢視中所顯示的視覺寬度與 HTML 程式碼中指定的寬度不符。當您拖曳表格右下角調整其大小時,或是在儲存格中加入超出其設定寬度的內容時,就可能發生此問題。

例如,如果將欄的寬度設為 200 像素,然後加入內容後使寬度延伸為 250 像素,該欄便會出現兩個數字:200 (程式碼中所指定的寬度) 和括號中的 (250) (畫面上呈現欄時的視覺寬度)。

註解:

您也可以使用 CSS 定位來配置版面。

HTML 中表格格式的優先順序

在「設計」檢視中格式化表格時,您可以針對整個表格,或針對表格中選取的列、欄或儲存格設定屬性。當屬性 (例如背景顏色或對齊) 針對整個表格設定為某個值,而針對個別儲存格又設定成另一個值的時候,這個儲存格的格式會優先於列的格式,而列的格式則又會優先於表格的格式。

表格格式設定的優先順序如下:

  1. 儲存格
  2. 表格

例如,假設您將某個單一儲存格的背景顏色設為藍色,然後又將整個表格的背景顏色設為黃色,則藍色儲存格並不會變成黃色,因為儲存格格式設定優先於表格格式設定。

註解:

當您設定欄的屬性時,Dreamweaver 會變更對應到此欄中每一個儲存格的 td 標籤屬性。

關於分割和合併表格儲存格

您可以合併任何數量的相鄰儲存格 (只要整個選取範圍是儲存格構成的直線或矩形區塊) 來產生跨越幾欄或幾列的單一儲存格。您可以將儲存格分割成任何數量的列或欄,不論它先前是否經過合併。Dreamweaver 會自動重建表格 (新增所有必要 colspanrowspan 屬性),建立指定的排列方式。

在下列範例中,前兩列中間的儲存格已合併成跨越兩列的單一儲存格。

合併的儲存格

插入表格和新增內容

使用「插入」面板或「插入」選單建立新表格。接著,在表格儲存格中加入文字和影像,就像在表格外加入文字和影像一樣。

  1. 將插入點置於您要表格出現的位置。

    註解:

    如果文件是空白的,那麼您只需將插入點置於文件的開頭位置。

    • 選取「插入 > 表格」。

    • 在「插入」面板的「HTML」類別中,按一下「表格」。

  2. 設定「表格」對話方塊的屬性,再按一下「確定」建立表格。
    建立表格
    建立表格

    決定表格的列數。

    決定表格的欄數。

    表格寬度

    以像素為單位,或以瀏覽器視窗寬度的百分比來指定表格的寬度。

    邊框粗細

    以像素為單位指定表格邊框的寬度。

    儲存格間距

    決定相鄰表格儲存格之間的像素數目。

    註解:

    如果您沒有明確指定邊框粗細或儲存格間距及儲存格內距的值,則大部分瀏覽器會以邊框粗細和儲存格內距為 1 且儲存格間距為 2 的設定顯示表格。若要讓瀏覽器以沒有邊框、內距和間距的方式顯示表格,請將「儲存格內距」和「儲存格間距」設定為 0。

    儲存格內距

    決定儲存格邊框及其內容之間的像素數目。

    不對表格啟用欄或列標題。

    讓表格的第一欄成為標題欄,以便您為表格的每一輸入標題。

    讓表格的第一列成為標題列,以便您為表格的每一輸入標題。

    兩者

    讓您在表格中輸入欄和列標題。

    註解:

    在您的網站使用標題,對於使用螢幕讀取器的網頁瀏覽者非常有幫助。螢幕讀取器會讀取表格標題,並協助螢幕讀取器用戶掌握表格資訊。

    註解

    提供顯示在表格外部的表格標題。

    摘要

    提供表格描述。螢幕助讀程式會讀取摘要文字,但該文字不會在用戶的瀏覽器中顯示。

匯入和匯出表格

您可以將其他應用程式 (例如 Microsoft Excel) 所建立並儲存為分隔符號文字格式 (將項目以定位鍵字元、逗號、冒號或分號分隔) 的表格式資料,匯入 Dreamweaver 中並格式化為表格。

您也可以從 Dreamweaver 將表格資料匯出到文字檔中,其相鄰儲存格內容會以分隔符號來分隔。您可以使用逗號、冒號、分號或空格做為分隔符號。當您轉存表格時,整個表格都會被轉存;您不可以選取表格的某些部分進行轉存。

註解:

如果您只需要表格中的某些資料 (例如,前六列或前六欄),請複製含有這些資料的儲存格,將這些儲存格貼到表格的外面 (以建立新表格),然後再匯出這個新表格。

匯入表格資料

  1. 選取「檔案 > 匯入 > 匯入表格式資料」。

  2. 指定表格式資料選項,再按一下「確定」。

    資料檔案

    要匯入的檔案名稱。按一下「瀏覽」按鈕以選取檔案。

    分隔符號

    是您要匯入之檔案中所使用的分隔符號。

    如果選取「其他」,彈出式選單右邊便會出現文字方塊。輸入檔案中使用的分隔符號。

    註解:

    可指定儲存資料檔案時所使用的分隔符號。如果沒有指定分隔符號,檔案將無法正確匯入,而資料也無法以正確格式出現在表格中。

    表格寬度

    表格的寬度。

    • 選取「符合資料大小」可讓每個欄的寬度足夠在欄中容納最長的文字字串。

    • 選取「設為」時,可以用像素為單位來指定固定的表格寬度,或是指定為瀏覽器視窗寬度的百分比。

    邊框

    以像素為單位指定表格邊框的寬度。

    儲存格內距

    是儲存格內容和儲存格邊界之間的像素數目。

    儲存格間距

    是相鄰表格儲存格之間的像素數目。

    註解:

    如果您沒有明確指定邊框、儲存格間距和儲存格內距的值,則大部分瀏覽器會以邊框和儲存格內距為 1 且儲存格間距為 2 的設定顯示表格。若要讓瀏覽器以沒有內距和間距的方式顯示表格,請將「儲存格內距」和「儲存格間距」設定為 0。若要在邊框設定為 0 時,檢視儲存格與表格邊界,請選取「檢視 > 視覺輔助 > 表格邊框」。

    格式化第一橫列

    可決定要在表格的第一列套用何種格式 (如果有的話)。請從四個格式選項中選取:無格式、粗體、斜體或粗斜體。

轉存表格

  1. 將插入點置於表格的任何儲存格內。
  2. 選取「檔案 > 轉存 > 表格」。
  3. 請指定下列選項:

    分隔符號

    指定要使用哪一種分隔符號字元,分隔所轉存檔案中的項目。

    斷行

    指定您要在哪種作業系統開啟轉存的檔案:Windows、Macintosh 或 UNIX (不同作業系統表示文字行結尾的方式也不相同)。

  4. 按一下「轉存」。
  5. 為檔案輸入名稱,再按一下「儲存」。

選取表格元素

您可以一次選取整個表格,也可以選取一列或一欄。您也可以選取一個或多個別的儲存格。

當您將滑鼠指標移過表格、列、欄或儲存格上方時,Dreamweaver 會將該選取範圍中所有的儲存格反白標示,讓您清楚知道將會選取哪些儲存格。當您的表格中不含邊框、橫跨多欄或多列的儲存格,或是巢狀表格時,這會非常有用。您可以在偏好設定中變更反白標示的顏色。

註解:

如果您將滑鼠指標移到表格的邊框上,然後按住 Control 鍵 (Windows) 或 Command 鍵 (Macintosh),便會將表格的整個結構 (也就是表格中所有的儲存格) 反白標示。當您有巢狀表格並想要查看其中一個表格的結構時,這會非常有用。

選取整個表格

請執行下列其中一項作業以選取表格:

  • 按一下表格的左上角以選取該表格。
  • 在表格儲存格中按一下,然後在「文件」視窗左下角的標籤選取器中選取標籤。
  • 在表格儲存格中按一下後,再按一下表格標題選單,然後選取「選取表格」。所選表格的下方與右方邊緣便會顯示選取範圍控點。
  • 在表格儲存格中按一下,然後選取「編輯 > 表格 > 選取表格」。

選取個別或多個列或欄

  1. 將指標指向列的左方邊緣或欄的上方邊緣。
  2. 當指標變成選取用的箭頭時,請按一下以選取列或欄,或者以拖曳方式選取多個列或欄。
    選取一列

選取單一欄

  1. 在欄中按一下。
  2. 按一下欄標題選單,然後選擇「選取欄」。

選取單一儲存格

  1. 請執行下列其中一項作業:

    • 在儲存格中按一下,然後在「文件」視窗左下角的標籤選取器中,選取 <td> 標籤。
    • 在儲存格中以 Control+按一下 (Windows) 或 Command+按一下 (Macintosh)。

選取一行或一個矩形區塊的儲存格

請執行下列其中一項作業:
  • 從一個儲存格拖曳到另一個儲存格。

  • 按一下儲存格,在同一儲存格中 Control+按一下 (Windows) 或 Command+按一下 (Macintosh) 將其選取後,再於另一個儲存格上 Shift+按一下。

選取儲存格區塊

選取不相鄰的儲存格

Control+按一下 (Windows) 或 Command+按一下 (Macintosh) 您要選取的儲存格、列或欄。

如果您 Control+按一下或 Command+按一下的儲存格、列或欄是尚未選取的,便會將其加入選取範圍中。如果是已經選取的,就會從選取範圍中將其移除。

變更表格元素的反白標示顏色

  1. 選取「編輯 > 偏好設定」(Windows) 或「Dreamweaver > 偏好設定」(Macintosh)。
  2. 從左邊的類別清單選取「反白標示」,執行下列其中一項變更,然後按一下「確定」。
    • 若要變更表格元素的標示顏色,請按一下「滑鼠移過」顏色方塊,然後使用檢色器來選取標示顏色 (或是在文字方塊中輸入標示顏色的十六進位值)。

    • 若要啟用或停用表格元素的反白標示功能,請選取或取消選取「滑鼠滑過」的「顯示」選項。

    註解:

    這些選項會影響到您將滑鼠游標滑過時 Dreamweaver 反白標示的所有物件。

設定表格屬性

您可以使用「屬性」檢視窗來編輯這些表格。

  1. 選取表格。
  2. 在「屬性」檢視窗 (「視窗 > 屬性」) 中,依照需求更改屬性。
    表格屬性
    表格屬性

    表格 ID

    是表格的 ID。

    列和欄

    表格中的列數和欄數。

    W

    表格的寬度,以像素為單位,或以瀏覽器視窗寬度的百分比來表示。

    註解:

    您通常不需要設定表格的高度。

    儲存格內距

    是儲存格內容和儲存格邊界之間的像素數目。

    儲存格間距

    是相鄰表格儲存格之間的像素數目。

    對齊

    決定表格相對於同一段落中其他元素 (例如文字或影像) 顯示的位置。

    「靠左對齊」會讓表格對齊其他元素的左邊 (讓同一段落中的文字在表格的右邊換行)、「靠右對齊」會讓表格對齊其他元素的右邊 (文字在它左邊換行),而「置中對齊」是將表格置中 (文字出現在表格的上、下)。「預設」是表示瀏覽器應該使用它的預設對齊方式。

    註解:

    如果對齊是設定為「預設」,其他的內容就不會顯示在表格旁邊。若要將表格顯示在其他內容的旁邊,請使用「靠左對齊」或「靠右對齊」。

    邊框

    以像素為單位指定表格邊框的寬度。

    註解:

    如果您沒有明確指定邊框、儲存格間距和儲存格內距的值,則大部分瀏覽器會以邊框和儲存格內距為 1 且儲存格間距為 2 的設定顯示表格。若要讓瀏覽器以沒有內距和間距的方式顯示表格,請將「邊框」、「儲存格內距」和「儲存格間距」設定為 0。若要在邊框設定為 0 時,檢視儲存格與表格邊界,請選取「檢視 > 視覺輔助 > 表格邊框」。

    類別

    設定表格上的 CSS 類別。

    註解:

    您可能需要展開「表格屬性」檢視窗,才能看到下列選項。若要展開「表格屬性」檢視窗,請按一下右下角的展開箭頭。

    清除欄寬度和清除列高度

    和「清除列高」會從表格刪除明確指定的列高或欄寬值。

    將表格寬度轉換為像素

    和「將表格高度轉換為像素」可將表格中每一欄的寬度或高度,設定為目前的像素寬度 (也會將整個表格的寬度設定為目前的像素寬度)。

    將表格寬度轉換為百分比

    和「將表格高度轉換為百分比」會以「文件」視窗的寬度百分比,表示表格中每一欄的寬度或高度目前的寬度或高度 (也會以「文件」視窗的寬度百分比,表示整個表格目前的寬度)。

    如果您已經在文字方塊輸入值,請按 Tab 或 Enter 鍵 (Windows) 或是 Return 鍵 (Macintosh) 套用該值。

設定儲存格、列及欄的屬性

您可以使用「屬性」檢視窗來編輯表格中的儲存格與列。

  1. 選取欄或列。
  2. 在「屬性」檢視窗中 (「視窗 > 屬性」),設定下列選項:

    水平

    指定儲存格、列或欄內容的水平對齊方式。您可以將內容靠左對齊、靠右對齊或置中對齊儲存格,也可以指定瀏覽器使用它的預設對齊方式 (通常一般儲存格為靠左對齊,標題儲存格為置中對齊)。

    垂直

    指定儲存格、列或欄內容的垂直對齊方式。您可以將內容對齊儲存格的上方、中間、下方或基線,也可以指定瀏覽器使用它的預設對齊方式 (通常為置中對齊)。

    W 和 H

    以像素為單位,或以整個表格寬度或高度百分比,表示所選儲存格的寬度和高度。若要指定百分比,請在值後面加上百分比符號 (%)。若要讓瀏覽器依據儲存格內容以及其他列和欄的寬度與高度來決定適當的寬度或高度,請將欄位留白 (預設)。

    根據預設,瀏覽器會選擇列高和欄寬以容納欄中最寬的影像或最長的行。這就是為什麼有時新增內容到表格時,某個欄會比表格中的其他欄寬很多。

    註解:

    您可以將高度指定為整個表格高度的百分比,但是列不一定能以指定的百分比高度在瀏覽器中顯示。

    背景

    儲存格、欄或列的背景顏色,以檢色器來選擇。

    合併儲存格

    將選取的儲存格、列或欄結合成一個儲存格。選取的儲存格必須構成一個矩形或直線區塊,才可以使用合併儲存格。

    分割儲存格

    將儲存格分割,形成兩個以上的儲存格。您一次只能分割一個儲存格;如果選取了一個以上儲存格,這個按鈕就無法使用。

    不換行

    會阻止換行,而使指定儲存格內的所有文字保持在同一行中。如果啟用了「不換行」,當您在儲存格輸入或貼上資料時,儲存格就會加寬來容納所有的資料(一般而言,儲存格會先水平擴展以容納儲存格中最長的字或最寬的影像,然後視需要垂直擴展以容納其他內容)。

    標題

    會將選取的儲存格格式化為表格標題儲存格。表格標題儲存格的內容預設為粗體並且置中。

    註解:

    您可以用像素或百分比來指定寬度和高度,而且也可以在這兩者之間互相轉換。

    註解:

    當您設定欄的屬性時,Dreamweaver 會變更對應到此欄中每一個儲存格的 td 標籤屬性。不過,當您設定列的某些屬性時,Dreamweaver 是變更 tr 標籤的屬性,而不是變更列中每個 td 標籤的屬性。當您要將同樣的格式套用到列裡面的所有儲存格時,將格式套用到 tr 標籤可以產生更乾淨、更精簡的 HTML。

  3. 按 Tab 或 Enter 鍵 (Windows) 或是 Return (Macintosh) 鍵,以套用該值。

格式化表格和儲存格

您可以設定表格及其儲存格的屬性,或將預先設定的設計套用到表格,藉以變更表格的外觀。在您設定表格與儲存格的屬性之前,要注意格式化的優先順序為儲存格、列和表格。

註解:

若要格式化表格儲存格中的文字,請使用您格式化表格外部文字時所用的相同程序。

變更表格、列、儲存格或欄的格式

  1. 選取某個表格、儲存格、列或欄。
  2. 在「屬性」檢視窗中 (「視窗 > 屬性」),按一下右下角的展開箭頭,再依需要變更屬性。
  3. 視需要變更屬性。

    如需關於選項的詳細資訊,請按一下「屬性」檢視窗上的「說明」圖示。

    註解:

    當您設定欄的屬性時,Dreamweaver 會變更對應到此欄中每一個儲存格的 td 標籤屬性。不過,當您設定列的特定屬性時,Dreamweaver 會變更 tr 標籤的屬性,而不是變更列裡面每個 td 標籤的屬性;當您要將同樣的格式套用到列裡面的所有儲存格時,將格式套用到 tr 標籤可以產生更乾淨、更精簡的 HTML 程式碼。

在程式碼檢視中加入或編輯表格的輔助功能值

在程式碼中編輯適當的屬性。
註解:

若要在程式碼中快速找到標籤,請在表格中按一下,然後在「文件」視窗底部的標籤選取器中選取 <table> 標籤。

在設計檢視中加入或編輯表格的輔助功能值

  • 若要編輯表格註解,請反白標示該註解,然後輸入新的註解。
    • 若要編輯註解的對齊方式,請將插入點放在表格註解中,按一下右鍵 (Windows) 或 Control+按一下 (Macintosh),然後選取「編輯標籤程式碼」。

    • 若要編輯表格摘要,請選取表格,按一下右鍵 (Windows) 或 Control+按一下 (Macintosh),然後選取「編輯標籤程式碼」。

調整表格、欄和列的大小

重新調整表格尺寸

您可以調整整個表格或個別列和欄的大小。當您調整整個表格的大小時,表格中的所有儲存格都會依比列變更大小。如果已明確地指定表格儲存格的寬度或高度,調整表格大小只會變更儲存格在「文件」視窗中的可視大小,但是不會變更儲存格的已指定寬度與高度。

您可以拖曳表格的其中一個選取範圍控點來調整其大小。當您選取表格或將插入點放到表格中時,Dreamweaver 會在表格頂端或底部顯示表格寬度以及表格標題選單。

有時在 HTML 程式碼中設定的表格欄寬,與畫面上所顯示的寬度並不相符。如果發生這種情況,您可以將寬度改為一致。Dreamweaver 中顯示的表格與欄位寬度和標題選單,可以幫助您配置表格,您可以視需要啟用或停用欄寬與選單功能。

調整欄與列的大小

您可以使用「屬性」檢視窗或拖曳欄或列的邊框,變更欄寬或是列高。如果無法調整大小,您可以清除欄寬或列高,然後再重來一次。

註解:

您也可以使用「程式碼」檢視,直接在 HTML 程式碼中變更儲存格寬度和高度。

當您選取表格或將插入點放到表格中時,Dreamweaver 會在欄位頂端或底部顯示欄寬以及欄標題選單;您可以視需要啟用或停用欄標題選單功能。

調整表格大小

選取表格。如果您選取表格時正在「即時檢視」中,便會顯示「元素顯示」。按一下三明治圖示,以進入表格格式設定模式。

  • 若要水平調整表格的大小,請拖曳右邊的選取範圍控點。

  • 若要垂直調整表格的大小,請拖曳底部的選取範圍控點。

  • 若要同時調整表格的水平和垂直方向大小,請拖曳右下角的選取範圍控制點。

若要在「即時」檢視中結束表格格式設定模式,請按 Esc 鍵或按一下表格外面。您可以使用「編輯 > 表格」選單選項,進一步修改表格。

注意:「編輯 > 表格」選單中的選項,會根據您選取的是整個表格或單一儲存格而有所不同。在「即時檢視」中,若已選取整個表格,「元素顯示」會顯示「table」,而選取特定儲存格時則會顯示「td」。若要從儲存格格式設定切換為表格格式設定模式,請按一下表格邊框。

變更欄寬並保持整個表格的寬度不變

  1. 在「設計」檢視中,拖曳您要變更之欄位的右側邊框。

    相鄰的欄寬度也會變更,所以實際上是調整兩個欄的大小。視覺回應效果會顯示欄位調整的結果,整個表格的寬度並沒有改變。

    變更欄寬度,同時保持表格寬度

    註解:

    在以百分比 (而不是像素) 表示寬度的表格中,當您拖曳最右端欄的右邊框時,就會變更整個表格的寬度,而且所有的欄都會依比例變寬或變窄。

變更欄寬並保持其他欄的大小不變

  1. 在「設計」檢視中,按住 Shift 鍵,同時拖曳該欄的邊框。

    便會變更該欄位的寬度。視覺回應效果會顯示欄位調整的結果;整個的表格寬度會變更以配合您正在調整大小的欄位。

    變更欄寬度,而其他欄則保持其寬度

以視覺化方式變更列高

拖曳列的下方邊框。

使程式碼中的欄寬與視覺寬度一致

  1. 在儲存格中按一下。
  2. 按一下表格標題選單,然後選取「將所有寬度設為一致」。

    Dreamweaver 會重設程式碼中指定的寬度,以符合視覺寬度。

清除表格中所有已設定的寬度或高度

  1. 選取表格。
  2. 請執行下列其中一項作業:
    • 選取「編輯 > 表格 > 清除儲存格寬度」或「編輯 > 表格 > 清除儲存格高度」。

    • 在屬性檢視窗 (「視窗 > 屬性」) 中,按一下「清除列高度」按鈕 或「清除欄寬度」按鈕

    • 按一下表格標題選單,然後選取「清除全部的高度」或「清除全部的寬度」。

清除已設定的欄寬

在欄中按一下,再按一下欄標題選單,然後選取「清除欄寬度」。

在「設計」檢視中啟用或停用表格與欄的寬度及選單

選取「檢視 > 設計檢視選項 > 視覺輔助 > 表格寬度」。

新增和移除列與欄

若要新增和移除列與欄,請使用「修改 > 表格」或是欄標題選單。

註解:

在表格的最後一個儲存格按 Tab 鍵,會自動新增另一列到表格。

新增單一的列或欄

在儲存格中按一下,並執行下列其中一項作業:
  • 選取「編輯 > 表格 > 插入列」或是「編輯 > 表格 > 插入欄」。

    在插入點上方便會出現一列,或是在插入點左邊出現一欄。

  • 按一下欄標題選單,然後選取「在左邊插入欄」或「在右邊插入欄」。

     

新增多列或欄

  1. 在儲存格中按一下。
  2. 選取「編輯 > 表格 > 插入列或欄」,完成對話方塊,然後按一下「確定」。

    插入

    指定要插入列或是欄。

    列數或欄數

    要插入的列數或欄數。

    位置

    可指定新列或新欄應該出現在所選儲存格的列或欄前面或是後面。

刪除列或欄

請執行下列其中一項作業:
  • 在要刪除的列或欄的儲存格中按一下,然後選取「編輯 > 表格 > 刪除列」或「編輯 > 表格 > 刪除欄」。

  • 選取整列或整欄,然後按 Delete 鍵。

  • 在「屬性」檢視窗中 (「視窗 > 屬性」),執行下列其中一項作業:
    • 若要新增或刪除列,請增加或減少「列數」值。
    • 若要新增或刪除欄,請增加或減少「欄數」值。
註解:

如果您要刪除含有資料的列和欄,Dreamweaver 不會警告您。

分割和合併儲存格

使用屬性檢視窗,或「編輯 > 表格」子選單中的選項,分割或合併儲存格。

合併表格中的兩個或多個儲存格

  1. 選取連續行並呈矩形形狀中的多個儲存格。

    在下面的圖例中,選取範圍是儲存格構成的矩形範圍,所以這些儲存格可以合併。

    可在儲存格構成的矩形範圍中合併儲存格

    在下列圖例中,由於選取範圍不是矩形,所以無法合併這些儲存格。

    如果選取範圍不是矩形,則無法合併儲存格

  2. 請執行下列其中一項作業:
    • 選取「編輯 > 表格 > 合併儲存格」。

    • 在展開的 HTML 屬性檢視窗 (「視窗 > 屬性」) 中,按一下「合併儲存格」。

    註解:

    如果沒有看到按鈕,請按一下「屬性」檢視窗右下角的展開箭頭,就可以看到所有的選項。

    個別儲存格的內容就會置於所產生的合併儲存格中。選取的第一個儲存格的屬性會套用到合併後的儲存格。

分割儲存格

  1. 在儲存格中按一下,並執行下列其中一項作業:
    • 選取「編輯 > 表格 > 分割儲存格」。

    • 在展開的 HTML 屬性檢視窗 (「視窗 > 屬性」) 中,按一下「分割儲存格」。

    註解:

    如果沒有看到按鈕,請按一下「屬性」檢視窗右下角的展開箭頭,就可以看到所有的選項。

  2. 在「分割儲存格」對話方塊中,指定要如何分割儲存格:

    儲存格分割成

    指定要將儲存格分割成多列或是分割成多欄。

    列數/欄數

    指定要將儲存格分割成多少列或多少欄。

增加或減少儲存格所合併的列數或欄數

請執行下列其中一項作業:
  • 選取「編輯 > 表格 > 增加列合併」或「編輯 > 表格 > 增加欄合併」。

  • 選取「編輯 > 表格 > 減少列合併」或「編輯 > 表格 > 減少欄合併」。

複製、貼上及刪除儲存格

您可以複製、貼上或刪除單一表格儲存格或一次處理多個儲存格,並且保留儲存格的格式。

您可以將儲存格貼到插入點或現有表格中選取的位置。若要貼上多個表格儲存格,「剪貼簿」的內容必須與表格結構或表格中要貼上儲存格的選取範圍相容。

剪下或複製表格儲存格

  1. 選取一個儲存格,或是以連續一直線或構成矩形形狀的方式選取多個儲存格。

    在下列圖例中,選取範圍是儲存格構成的矩形範圍,所以可以剪下或複製這些儲存格。

    可在儲存格構成的矩形範圍中剪下或複製儲存格

    在下列圖例中,由於選取範圍不是矩形,所以無法剪下或複製這些儲存格。

    如果選取範圍不是矩形,則無法剪下或複製儲存格

  2. 選取「編輯 > 剪下」或「編輯 > 複製」。
    註解:

    如果您選取了一整列或一整欄並且選取「編輯 > 剪下」時,整個列或欄就會從表格中移除 (而不只是儲存格的內容)。

貼上表格儲存格

  1. 選取要貼上儲存格的位置:
    • 若要以貼上的儲存格取代現有的儲存格,請選取一組與剪貼簿上儲存格具有相同版面的現有儲存格 (例如,如果您已經複製或剪下了一塊 3 x 2 的儲存格區塊,便可以選取另一塊 3 x 2 的儲存格區塊,再按貼上以將其取代)。

    • 若要將一整列儲存格貼到特定儲存格上方,請在該儲存格中按一下。

    • 若要將一整欄儲存格貼到特定儲存格的左邊,請在該儲存格中按一下。

    註解:

    如果剪貼簿上不是一整列或一整欄儲存格,而您在某個儲存格中按一下,並且從剪貼簿貼上儲存格,那麼您剛才按的儲存格和相鄰的儲存格,可能會由貼上的儲存格所取代 (視其在表格中的位置而定)。

    • 若要以貼上的儲存格建立新表格,請將插入點置於表格的外面。
  2. 選取「編輯 > 貼上」。

    如果您是將整列或整欄貼到現有表格中,這些列或欄就會新增到表格。如果您是貼上個別儲存格,所選取儲存格的內容就會被取代。是果您是在表格之外貼上,這些列、欄或儲存格就會被用來定義新的表格。

移除儲存格內容但是不動儲存格

  1. 選取一個或多個儲存格
    註解:

    請確定選取範圍不是完全由整列或整欄所構成。

  2. 按 Delete 鍵。

    註解:

    如果您在選取「編輯 > 清除」或按 Delete 鍵時只選取整列或整欄,那麼就會從表格中移除整列或整欄 (而不只是它們的內容)。

刪除含有合併儲存格的列或欄

  1. 選取列或欄。
  2. 選取「編輯 > 表格 > 刪除列」或「編輯 > 表格 > 刪除欄」。

巢狀結構表格

巢狀表格就是一個表格位於另一表格的儲存格中。您可以格式化巢狀表格,就像任何其他表格一樣;但是它的寬度會受到它所出現之儲存格的寬度所限制。

  1. 按一下現有表格的儲存格。
  2. 選取「插入 > 表格」、設定「插入表格」選項,然後按一下「確定」。

排序表格

您可以依據單一欄的內容來排序表格的列。您也可以依據兩欄的內容執行較複雜的表格排序。

您不能排序包含 colspanrowspan 屬性的表格,也就是包含合併儲存格的表格。

  1. 選取表格,或是在任何儲存格中按一下。
  2. 選取「編輯 > 表格 > 表格排序」,在對話方塊中設定選項,然後按一下「確定」。

    排序

    可決定要使用哪一欄的值來排序表格的列。

    順序

    可決定要依字母順序或依數字順序來排序欄,以及要依據遞增順序 (A 到 Z、小數字到大數字) 或遞減順序來排序。

    如果欄的內容為數字時,請選取「依照數字大小」。將字母順序排序套用到一位數字或兩位數字,會將排序的數字視為單字 (產生如 1、10、2、20、3、30 這樣的順序) 而不是當作數值來排序 (產生如 1、2、3、10、20、30 這樣的順序)。

    再排序/順序

    可決定對另一欄進行次要排序的排序順序。在「再排序」彈出式選單指定次要排序的欄,並且在「順序」彈出式選單中指定次要排序的順序。

    第一個橫列也要排序

    指定排序時要將表格的第一列包括在內。如果第一列是不應該移動的標題,請不要選取這個選項。

    排序標題列

    指定使用與主列相同的準則,排序表格 thead 區段 (如果有) 內的所有列(請注意,即使在排序之後,thead 列仍會保持在 thead 區段中並在表格的頂端顯示)。如需 thead 標籤的詳細資訊,請參閱「參考」面板 (選取「說明 > 參考」)。

    排序頁尾列

    指定使用與主列相同的準則,排序表格 tfoot 區段 (如果有) 內的所有列(請注意,即使在排序之後,tfoot 列仍會保持在 tfoot 區段中並在表格的底部顯示)。如需 tfoot 標籤的詳細資訊,請參閱「參考」面板 (選取「說明 > 參考」)。

    完成排序後將全部列的顏色保持相同

    可指定在排序後,表格列屬性 (例如顏色) 仍應與原來的內容維持關聯。如果您將表格列格式化成兩種交替的顏色,請不要選取這個選項,以確保排序後的表格仍然保有交替顏色的列。如果列屬性是針對每一列的內容,請選取這個選項,以確保這些屬性在排序後的表格中仍然會與正確的列關聯。

 Adobe

更快、更輕鬆地獲得協助

新的使用者?