林佳漢 亞洲大學 資訊傳播學系
大綱 建立表格 表格屬性與外觀的調整 版面配置基礎 調整表格來建立網頁版面 能力指標 課堂活動
建立表格 表格的加入可由常用面板中的 「表格」或是功能表「插入 / 表 格」來開啟表格對話視窗。其中 可設定欄與列的個數、表格的寬 度、邊框粗細、內距與間距等。 其中寬度的部分可以選擇以像素 為單位(絕對寬度)或是以百分 比為單位(相對於瀏覽器視窗的 寬度)。內距指的是表格內元素 與表格邊框之間的距離,間距指 的是兩個儲存格之間的距離。
表格屬性與外觀的調整 在插入了表格之後,如果需要對於表格的屬性進行調 整,可以點選表格,命於下方的屬性面板進行調整。 除了插入表格時設定的基本屬性之外,還可以調整表 格的對齊方式。此外,對於表格的大小以及其內部欄 位的寬度均可透過滑鼠拖曳的方式進行調整。只需將 滑鼠游標移至邊框拖曳滑鼠即可進行調整。
版面配置基礎 表格在網頁的一個很重要的用途是作為版面配置的工 具,可以將各元件置放於網頁適當的位置上。在版面 配置上,我們首先要依照各個元件分布的情況加以切 割成較小的單元,每個單元內盡量為單一(種類)元 件,如此在版面的安排上將能夠較為單純。
調整表格來建立網頁版面 在將版面切割成小單元之後,接著要做的便是利用表 格將這些小單元切割出來。為了簡化後續的說明,在 本單元中我們僅利用表格的合併來進行版面的切割與 實作。實務上,如果可以依照個人經驗來搭配分割與 合併的步驟。
能力指標 了解如何建立表格 了解如何調整表格屬性與外觀 了解版面配置基礎觀念 了解如何調整表格來建立網頁版面
課堂活動 請加入一個 4x4 的表格 寬度為 800 像素 請調整表格的寬度跟列數 利用拖曳的方式調整寬度 利用屬性面板調整列數 請進行儲存格合併的動作 從上到下分別為 2 欄、 4 欄、 2 欄、 3 欄 利用拖曳的方式調整每一列中的欄邊界