第五章加入表格以編排頁面- 「成績查詢」頁面設計 3

第五章加入表格以編排頁面- 「成績查詢」頁面設計 3 課前指引表格在頁面內容的編排上是個相當重要的工具，因為網頁設計並不像美工軟體一樣，可以自由的調整文字在頁面上的位置，所以早期的網頁設計者，都會運用表格來編排頁面上的圖文位置。如今雖然CSS語法對排版問題提出解決方式，不過對於具有規則性的資料而言，表格還是最好的選擇。

章節大綱 5-1 表格的組成 5-5 展開表格版面 5-2 表格建立方式 5-6 應用範例-「成績查詢」頁面設計 5-3 表格的編輯操作 5-4 表格的CSS樣式備註：可依進度點選小節

5-1 表格的組成 • 表格是一種由縱欄及橫列所交叉組合而成的方格，適用於放置具有條理及結構性的資料內容，圖中即為表格中各個部份的名稱。縱向的排列稱為「欄」，而本圖中的表格就有四欄儲存格內容和儲存格外框的距離稱為「內距」最外圍的青色框線稱為表格的「邊框」橫向的排列稱為「列」，而本圖中的表格就有三列表格中的每一個方格稱為「儲存格」二個儲存格之間的距離稱為「間距」

5-2 表格建立方式 • 基本表格建立 1.開啟檔案 1 2.切換到「插入」面板的「常用」類別 3.按下「表格」鈕 <範例檔：05_01.html>

5-2 表格建立方式 2 1.輸入表格相關設定 2.頁首樣式選擇「兩者皆有」 3.輸入註解文字 4.按下「確定」鈕

5-2 表格建立方式 3 剛建立好的空白表格 4 在表格中輸入文字，輸入的同時，儲存格寬度會自動調整

5-2 表格建立方式 5 建立完成的表格 <範例檔：05_01ok.html>

5-2 表格建立方式 • 匯入Excel資料 1.開啟空白網頁 1 2.執行「檔案/匯入/Excel文件」指令

5-2 表格建立方式 2 1.點選Excel檔 2.指定「格式化」為「文字、結構、完整格式」 3.開啟範例Excel檔案

5-2 表格建立方式 3 匯入完成的Excel資料 <範例檔：05_02ok.html>

5-2 表格建立方式 • 匯入表格式資料 1 <範例來源檔：excel資料.txt> 執行功能表中的「檔案/匯入/表格式資料」指令

5-2 表格建立方式 2 按下「瀏覽」鈕 3 1.點選檔案 2.按此鈕開啟檔案

5-2 表格建立方式 4 3.按下「確定」鈕 1.維持預設值 2.設定儲存格內距及間距為0

5-2 表格建立方式 5 匯入完成的純文字檔案 <範例檔：05_03ok.html>

5-3 表格的編輯操作 • 表格選取技巧(1) • 進行「不連續選取」時要搭配「Ctrl」鍵先點取第1個儲存格按住「Ctrl」鍵後再點取其他儲存格，就可以進行不連續的儲存格選取

5-3 表格的編輯操作 • 表格選取技巧(2) • 進行「連續選取」時要搭配「Shift」鍵按住「Shift」鍵後，再點取其他儲存格，就可以進行連續的儲存格選取先點取第1個儲存

5-3 表格的編輯操作 • 表格選取技巧(3) • 整欄、整列及表格的選取點取此處可選取整欄點取此處可選取整列點取此處可選取整個表格

5-3 表格的編輯操作 • 重設表格的欄數及列數 1.先點選整個表格 2.再從屬性面板上輸入新的欄數或列數，輸入完畢要按下「Enter」鍵 <範例檔：05_04.html> 顯示重設後的表格 <範例檔：05_04ok.html>

5-3 表格的編輯操作 • 調整表格寬度 1.點選表格 2.這裡切換表格的度量單位 3.由此輸入數值 <範例檔：05_05.html>

5-3 表格的編輯操作 • 調整內距、間距及邊框 1 <範例檔：05_05.html> 先點選整個表格

5-3 表格的編輯操作 2.顯示調整之後的表格 2 1.由此處進行內距、間距、與邊框的設定 <範例檔：05_05ok.html>

5-3 表格的編輯操作 • 欄列的插入與刪除(1) • 利用「插入」面板 1.先點取此儲存格位置 1 2.「插入」面板切換到「版面」，按下此鈕 <範例檔：05_06.html>

5-3 表格的編輯操作 2 新增完成的表格列 <範例檔：05_06ok.html>

5-3 表格的編輯操作 • 欄列的插入與刪除(2) • 利用右鍵的快顯功能表 • 利用右鍵的快顯功能表，可以快速選擇要插入、刪除或合併的設定。如圖示：

5-3 表格的編輯操作 • 調整欄寬及列高(1) • 手動拖曳按此拖曳可調整欄寬或列高

5-3 表格的編輯操作 • 調整欄寬及列高(2) • 數值設定 1.先選取欄或列 2.由「寬」或「高」的欄位中輸入精確數值

5-3 表格的編輯操作 • 在進行欄寬調整時，表格的整體寬度是不會改變的，圖中是以5欄(寬400)的表格為例。 1 1.點選要設定寬度的欄位這是表格的總寬度(400像素)

5-3 表格的編輯操作 2 2.瞧！將第1欄的寬度設為150時，剩下欄寬會自動均分，表格總寬度不會改變 1.由此設定欄的寬度為150

5-3 表格的編輯操作 • 若是將第2欄的欄寬設為300時，由於第一欄與第二欄的寬度已經400像素，所以表格的欄寬會自動調整，但是總寬度仍會維持400像素，如圖示：第1欄設定寬度為150，但實際寬度為（76）第2欄設定寬度為300，但實際寬度為（170）

5-3 表格的編輯操作 • 儲存格的分割及合併(1) • 合併儲存格 1 1.先選取要合併的儲存格範圍 2.再點選此鈕 <範例檔：05_08.html>

5-3 表格的編輯操作 2 合併完成的結果 <範例檔：05_08ok.html>

5-3 表格的編輯操作 • 儲存格的分割及合併(2) • 分割儲存格 1 1.先點取要分割的儲存格 2.再點取此鈕 <範例檔：05_09.html>

5-3 表格的編輯操作 2 1.設定分割為2列 2.按下「確定」鈕 3 Dreamweaver會以合併儲存格的方式來處理分割，而不是從中間分割為2列 <範例檔：05_09ok.html>

5-3 表格的編輯操作 • 清除表格的寬度及高度(1) • 清除寬度 1.先點取要設定的表格 2.再點取屬性面板上的此按鈕 <範例檔：05_10.html> 寬度清除後的結果 <範例檔：05_10ok.html>

5-3 表格的編輯操作 • 清除表格的寬度及高度(2) • 清除高度 1.先點取要設定的表格 2.再點取屬性面板上的「清除列高度」鈕 <範例檔：05_11.html> 高度清除後的結果 <範例檔：05_11ok.html>

5-3 表格的編輯操作 • 儲存格的其他設定調整儲存格內資料的「水平對齊」方式設定此儲存格的文字內容會在同一行顯示，若遇到欄寬不夠時會自動調整欄寬以配合文字內容勾選啟用表頭的儲存格，其文字內容會變為粗體及置中對齊設定儲存格背景色調整儲存格內資料的「垂直對齊」方式

5-3 表格的編輯操作 • 排序表格資料 1 1.選取整個表格 2.執行「命令/表格排序」指令 <範例檔：05_12.html>

5-3 表格的編輯操作 2 2.按下「確定」鈕 1.設定條件如畫面

5-3 表格的編輯操作 3 員工已依「地區」欄位排序；同一地區員工則再依部門做排序 <範例檔：05_12ok.html>

5-4 表格的CSS樣式 • 設定表格邊框樣式 1 1.開啟要作邊框設定的表格 2.屬性面板按下「編輯規則」鈕 <範例檔：05_13.html>

5-4 表格的CSS樣式 2 4.按下「確定」鈕 1.選擇此項，使重新定義HTML元素 2.下拉找到「table」標籤 3.設定的樣式僅使用於此文件

5-4 表格的CSS樣式 3 1.切換到「邊框」 2.選擇邊框樣式 3.設定邊框厚度 4.設定邊框色彩 5.按此鈕確定

5-4 表格的CSS樣式 4 顯示加入的邊框效果 <範例檔：05_13ok.html>

5-4 表格的CSS樣式 • 編修表格樣式 1 1.輸入點放在表格中 2.開啟「CSS樣式」面板，點選「table」規則 3.按此鈕編修樣式 <範例檔：05_14.html>

5-4 表格的CSS樣式 2 1.切換到「背景」類別 2.按下「瀏覽」鈕

5-4 表格的CSS樣式 3 1.點選圖檔 2.按此鈕確定

5-4 表格的CSS樣式 4 1.切換到「邊框」分類 2.修改邊框樣式 3.修改邊框粗細 4.按此鈕確定

5-4 表格的CSS樣式 5 瞧！邊框改變了，也加入了背景影像 <範例檔：05_14ok.html>

5-4 表格的CSS樣式 • 編修儲存格的CSS樣式 1 1.將輸入點放在儲存格中 2.目標規則設在「新增CSS規則」 3.按下「編輯規則」鈕 <範例檔：05_15.html>

5-4 表格的CSS樣式 2 3.按此鈕 1.選此項 2.下拉選td

第五章 加入表格以編排頁面- 「成績查詢」頁面設計 3