歡迎來到排版章節:掌握表格!

你好!這一章將探討「表格」——這是 ICT 中用於整理數據以及控制文件與網頁排版的重要工具。無論你是要撰寫專業報告還是設計網站,表格都能幫助你清晰且精準地組織內容。你可以把表格想像成一個為你的資訊準備的分類整理櫃!

如果偶爾覺得表格很難搞,不用擔心。只要拆解其結構並弄懂簡單的 HTML 標籤,你很快就能成為表格大師!


1. 理解表格結構:基礎概念

1.1 什麼是表格?

表格是一個簡單的網格結構,利用列 (Row)欄 (Column) 來有邏輯地排列資訊。

  • 列 (Row): 表格的水平部分。(想像一下躺下——列是左右延伸的)。
  • 欄 (Column): 表格的垂直部分。(想像一下高聳的柱子——欄是上下延伸的)。
  • 儲存格 (Cell): 表格的最小單位;由列與欄交會而成。這就是你放入資料的地方!

小貼士:你可以將列數乘以欄數,計算出儲存格的總數。(例如:5 列 x 3 欄 = 15 個儲存格)。

1.2 建立表格(在文件與 HTML 中)

在任何應用程式(如文書處理軟體或網頁編輯器)中,第一步都是指定所需的列數和欄數。

在文件製作中 (課程大綱 13.2)

當使用 Microsoft Word 或排版軟體 (DTP) 時,通常會透過「插入表格」對話框來定義:

  • 列 (rows) 的數量(水平)。
  • 欄 (columns) 的數量(垂直)。
在網頁製作中 (HTML - 課程大綱 21.2)

當使用 HTML(內容層)建立表格時,你需要使用特定的標籤:

主要結構標籤如下:

  • <table> 表格的開始與結束。
  • <tr> 定義表格的一列 (Table Row)
  • <td> 定義一個表格的資料儲存格 (Table Data cell)(普通的儲存格)。
  • <th> 定義一個表格的標題儲存格 (Table Header cell)(通常顯示為粗體且置中)。

記憶口訣 (HTML):
T-R-D:Table (表格)、Row (列)、Data (資料)。它們必須按此順序排列!

重點摘要:表格是由列與欄組成的儲存格網格,對於文件和網頁的結構化內容至關重要。


2. 編輯與操作表格內容

在實作考試中,你必須具備在建立表格後修改其結構的能力。

2.1 編輯列與欄

你必須能夠編輯表格及其內容,包括:

  • 插入列與欄: 為資料增加新的儲存空間。
  • 刪除列與欄: 移除不需要的部分。
  • 在表格中放置文字或物件: 在儲存格中填入文字、數字,或其他元素如圖片、圖表或試算表摘錄 (課程大綱 13.1 & 13.2)。

2.2 合併儲存格 (Spanning)

合併儲存格是指將兩個或多個相鄰的儲存格組合成一個單一且較大的儲存格。當你需要一個單一標題跨越多個資料欄,或反之亦然時,這點非常重要。

在文件製作中 (課程大綱 13.2)

在文書處理軟體中,通常只需選取想要合併的儲存格,然後選擇「合併儲存格」選項即可。

在網頁製作中 (HTML - 課程大綱 21.2)

在 HTML 中,合併是透過在 <td><th> 標籤內加入特殊的屬性 (attributes) 來達成:

  1. colspan 指定儲存格應跨越多少欄 (columns)
  2. rowspan 指定儲存格應向下跨越多少列 (rows)

範例:如果你有一個標題需要橫跨 3 欄,你會使用:<th colspan="3">每月銷售報告</th>

類比:想像你在規劃座位。如果你使用 colspan="2",你就是給予一個人兩個並排的座位。如果你使用 rowspan="2",那個人佔用一個座位,但空間會向下延伸到下一列。

常見錯誤:當使用 colspanrowspan 時,記得要從該列中刪除多餘的 <td> 標籤,否則你的表格結構會崩壞!

重點摘要:使用合併功能來建立不規則的表格形狀,並確保標題能正確橫跨其對應的資料欄。


3. 表格的格式化與呈現

格式化能確保你的表格既美觀又專業。這涉及調整大小、對齊內容以及控制邊框的顯示。

3.1 控制尺寸(文件與網頁)

在文件製作中 (課程大綱 13.2)

你必須能夠:

  • 調整列高: 增加列的高度。
  • 調整欄寬: 增加或減少欄的寬度。
在網頁製作中 (HTML - 課程大綱 21.2)

在指定表格與儲存格尺寸時,你會使用以下兩種單位之一:

  • 像素 (px): 固定測量單位(例如:width="600"width="600px")。
  • 百分比 (%): 根據視窗大小變化的相對測量單位(例如:width="80%")。這對於響應式設計通常效果更好。

你知道嗎? 使用百分比(如 80%)來設定表格寬度,意味著當使用者改變瀏覽器視窗大小時,表格會自動調整尺寸!

3.2 內容對齊

資料對齊對於可讀性至關重要,特別是針對數字。

  • 水平對齊 (align): 控制左右位置。
    • 靠左(文字預設)
    • 靠右(數字/貨幣預設)
    • 置中
    • 左右對齊(將文字延伸至兩邊邊緣)
  • 垂直對齊 (valign): 控制儲存格內的上下位置。
    • 靠上
    • 置中
    • 靠下

3.3 外觀與可讀性

你必須能夠在文件中(以及在網頁中透過樣式)調整這些功能:

1. 顯示/隱藏網格線與邊框:

  • 在文件中: 你可以選擇顯示網格線(方便編輯)或隱藏網格線(常用於專業列印文件,呈現簡潔的排版效果)。
  • 在 HTML 中: 邊框通常使用 CSS(階層式樣式表,詳見 21.3 章節)處理。你可能需要確保邊框是可見/不可見或是合併 (collapsed) 的 (課程大綱 21.3)。

2. 文字自動換行 (僅限文件 - 課程大綱 13.2):

你需要能夠在儲存格內進行文字換行。如果文字長度超過儲存格寬度,文字會自動掉到下一行。

3. 網底/著色:

透過網底 (shading)儲存格著色來突顯關鍵資料(例如標題或總計),能提升視覺溝通效果。這在文件和網頁中都很常見(HTML 中可使用 bgcolor 屬性,但建議優先使用 CSS)。

4. 文字繞排表格 (課程大綱 13.1)

當你在文件中(非網頁)插入表格時,通常需要控制文字如何繞著它排列。你應該能夠為表格、圖表或圖片應用不同的繞排選項,包括:

  • 上下繞排: 文字在表格前停止,並在表格後重新開始。
  • 矩形繞排: 文字圍繞在表格周圍形成一個方形。
  • 緊密繞排: 文字緊貼著表格的輪廓排列。

重點摘要:格式化涉及精確控制對齊(水平與垂直)、尺寸(像素或百分比),以及諸如邊框和網底等視覺元素,從而達到最佳的清晰度。


快速複習清單:表格 (13.2 & 21.2)

為了順利通過實作考試中的表格項目,請確保你能自信地執行以下操作:

結構與編輯:

  • 建立指定列數和欄數的表格。
  • 插入及刪除列與欄。
  • 合併儲存格(或在 HTML 中使用 colspan/rowspan)。

格式化與外觀:

  • 調整列高與欄寬(文件),或使用像素/%數值(HTML)。
  • 設定儲存格水平對齊(左、右、中、左右對齊)。
  • 設定儲存格垂直對齊(上、中、下)。
  • 為特定儲存格套用網底或色彩。
  • 顯示或隱藏網格線/邊框。
  • 在文件中設定文字繞排(矩形、緊密、上下)。