幫助:表格
一個 表格 是一個用於組織和定位資料的列和行的排列。表格對於這個目的非常有用，並且存在許多不同的樣式和技巧，可以用來定製每個表格。本頁面提供有關如何在華夏公益教科書中構建表格的語法的資訊。
使用工具欄
要自動插入表格，請點選 
在 編輯工具欄 上。
點選按鈕並接受預設值後，將插入以下文字
{| class="wikitable"
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}
| 標題文字 | 標題文字 | 標題文字 |
|---|---|---|
| 示例 | 示例 | 示例 |
| 示例 | 示例 | 示例 |
| 示例 | 示例 | 示例 |
示例文字（“標題文字”或“示例”）將被替換為實際資料。在點選“插入表格”按鈕後出現的初始對話方塊中，可以自定義列數和行數。
語法教程
|
| ||||||||||||||||||||||||||||||||||||||||||
如果你使用單豎線，那麼看起來像第一個單元格的實際上是應用於單元格的格式修飾符，其餘的“單元格”將合併成一個
{| style="border:1px;"
|-
|format modifier (not displayed) |These all |(including the pipes) |go into |the first cell
|}
這可能不是你想要的
| 所有這些 |（包括管道）| 都進入 | 第一個單元格 |
但是，格式修飾符很有用
{| style="border:1px;"
|-
| Cell 1 (no modifier—not aligned)
|-
| style="text-align: right;" | Cell 2 (right aligned)
|}
| 單元格 1（無修飾符 - 不對齊） |
| 單元格 2（右對齊） |
請記住：一行中不超過 2 個單豎線！
一行 列標題 透過使用 “! scope="col" |" 而不是 "|" 來標識，並且使用 "!! scope="col" |" 而不是 "||"。標題單元格通常以與常規單元格不同的方式呈現，具體取決於瀏覽器。它們通常以粗體字並居中呈現。
{|
|+ The table's caption
! scope="col" | Column heading 1
! scope="col" | Column heading 2
! scope="col" | Column heading 3
|-
| Cell 1 || Cell 2 || Cell 3
|-
| Cell A
| Cell B
| Cell C
|}
一行中的第一個單元格透過以 “! scope="row" |" 而不是 "|" 開頭來標識為 行標題，並在新行上開始後續資料單元格。
{|
|+ The table's caption
! scope="col" | Column heading 1
! scope="col" | Column heading 2
! scope="col" | Column heading 3
|-
! scope="row" | Row heading 1
| Cell 2 || Cell 3
|-
! scope="row" | Row heading A
| Cell B
| Cell C
|}
可選 引數 可以修改單元格、行或整個表格的行為。例如，可以向表格新增邊框
{| border="1"
|+ The table's caption
! scope="col" | Column heading 1
! scope="col" | Column heading 2
! scope="col" | Column heading 3
|-
! scope="row" | Row heading 1
| Cell 2 || Cell 3
|-
! scope="row" | Row heading A
| Cell B
| Cell C
|}
最終的表格將顯示如下
| 列標題 1 | 列標題 2 | 列標題 3 |
|---|---|---|
| 行標題 1 | 單元格 2 | 單元格 3 |
| 行標題 A | 單元格 B | 單元格 C |
每行必須與其他行具有相同數量的單元格，以便表格中的列數保持一致。對於空單元格，請使用不間斷空格 作為內容以確保單元格顯示。要顯示單元格中可見的管道，請使用<nowiki>|</nowiki>或者|.
簡單示例
這兩個都生成相同的輸出。根據每行中的單元格數量和每個單元格內的總文字選擇樣式。
維基標記程式碼
{|
| A
| B
|-
| C
| D
|}
{|
| A || B
|-
| C || D
|}
它在瀏覽器中顯示的樣子
| A | B |
| C | D |
標準格式
你可以新增class="wikitable"在{|表格開始處，以便應用標準格式，該格式將背景顏色應用於表格標題，並在單元格之間以及表格周圍新增邊框。
{| class="wikitable" style="text-align: center; width: 200px; height: 200px;"
|+ Multiplication table
|-
! scope="col" | ×
! scope="col" | 1
! scope="col" | 2
! scope="col" | 3
|-
! scope="row" | 1
| 1 || 2 || 3
|-
! scope="row" | 2
| 2 || 4 || 6
|-
! scope="row" | 3
| 3 || 6 || 9
|-
! scope="row" | 4
| 4 || 8 || 12
|-
! scope="row" | 5
| 5 || 10 || 15
|}
以及它在瀏覽器中的顯示方式
| × | 1 | 2 | 3 |
|---|---|---|---|
| 1 | 1 | 2 | 3 |
| 2 | 2 | 4 | 6 |
| 3 | 3 | 6 | 9 |
| 4 | 4 | 8 | 12 |
| 5 | 5 | 10 | 15 |
顏色
為單個單元格指定文字和背景顏色的方法如下。
維基標記程式碼
{|
| style="background: red; color: white" | abc
| def
| style="background: red; color: white" | ghi
| jkl
|}
它在瀏覽器中顯示的樣子
| abc | def | ghi | jkl |
與其他引數一樣，也可以為整行或整個表格指定顏色；行的引數會覆蓋表格的值，單元格的引數會覆蓋行的引數。（請注意，沒有簡單的方法可以為整列指定顏色 - 必須單獨指定列中每個單元格的顏色。）
維基標記程式碼
{| style="background: yellow; color: green"
|-
| abc || def || ghi
|- style="background: red; color: white"
| jkl || mno || pqr
|-
| stu || style="background: silver" | vwx || yz
|}
它在瀏覽器中顯示的樣子
| abc | def | ghi |
| jkl | mno | pqr |
| stu | vwx | yz |
要使表格與背景融合，請使用 style="background: none;" 或 style="background: transparent;"。
要強制單元格與 class="wikitable" 的預設顏色之一匹配，請對較暗的標題使用 style="background: #f2f2f2"，對較亮的正文使用 style="background: #f9f9f9"。
寬度，高度
可以指定整個表格的寬度和高度，以及行的高度。要指定列的寬度，可以指定其中任意單元格的寬度。如果未為所有列指定寬度，或未為所有行指定高度，則會存在一些歧義，結果取決於瀏覽器。
維基標記程式碼
{| style="width: 75%; height: 200px;" class="wikitable"
|-
| abc || def || ghi
|- style="height:100px;"
| jkl || style="width:200px;" | mno || pqr
|-
| stu || vwx || yz
|}
它在瀏覽器中顯示的樣子
| abc | def | ghi |
| jkl | mno | pqr |
| stu | vwx | yz |
設定列寬
要強制列寬符合特定要求，而不是接受列中單元格中最寬文字元素的寬度，請遵循以下示例。請注意，文字環繞 將被強制。
維基標記程式碼
{| class="wikitable"
! scope="col" style="width:50px;" | Name
! scope="col" style="width:225px;" | Effect
! scope="col" style="width:225px;" | Games Found In
|-
| Poké Ball || Regular Poké Ball || All Versions
|-
| Great Ball || Better than a Poké Ball || All Versions
|}
| 名稱 | 效果 | 發現的遊戲 |
|---|---|---|
| 精靈球 | 普通精靈球 | 所有版本 |
| 高階球 | 比精靈球更好 | 所有版本 |
要在沒有標題的表格中設定列寬，請在每列的第一個單元格中指定寬度，如下所示
{| class="wikitable"
|-
| style="width:100px;" | This column is 100 pixels wide
| style="width:200px;" | This column is 200 pixels wide
| style="width:300px;" | This column is 300 pixels wide
|-
| blah || blih || bluh
|}
| 此列寬為 100 畫素 | 此列寬為 200 畫素 | 此列寬為 300 畫素 |
| blah | blih | bluh |
設定邊框
表格邊框預設為複雜陰影雙線（HTML 中的預設值）；但是，可以透過使用樣式引數（style="border: 1px solid darkgray"）將這些邊框設定為細實線，如以下所示（注意：如果你打算將 'cellpadding' 或 'cellspacing' 選項與邊框一起使用，則必須使用此格式）
{| cellpadding="2" style="border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Middle
! style="width: 130px;" | Right
|- style="border:none;"
| [[File:StarIconBronze.png|120px]]
| [[File:StarIconGold.png|120px|Caption when mouse-over image]]
| [[File:StarIconGreen.png|120px|Green stellar icon]]
|- style="text-align:center;"
| Bronze star || Gold star || Green star
|}
請注意，底行文字透過style="text-align: center;"居中，而星形影像沒有居中。
| 左 | 中 | 右 |
|---|---|---|
|
|
|
| 青銅星 | 金星 | 綠星 |
只要 檔案 省略引數 "thumb"，它們就不會顯示邊框。邊框顏色 "darkgray" 與使用class="wikitable"上面顯示的顏色匹配；但是，它可以是任何顏色名稱（例如style="border: 1px solid darkgreen;"）或使用十六進位制顏色（例如：#DDCCBB）。有關十六進位制顏色的資訊，請參閱 網頁顏色，它們允許你指定任何你喜歡的色調。
列格式說明符（用 "|...|" 括起來）可以具有樣式引數，以設定每個單元格的邊框，如下所示
{| cellpadding="2" style="border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Middle
! style="width: 130px;"| Right
|- style="text-align: center;"
| style="border: 1px solid blue;"|
[[File:StarIconBronze.png|120px]]
| style="border: 1px solid #777777;"|
[[File:StarIconGold.png|120px|Caption when mouse-over image]]
| style="border: 1px solid #22AA55;"|
[[File:StarIconGreen.png|120px|Green stellar icon]]
|- style="text-align: center;"
|Bronze star || Gold star || Green star
|}
請注意，只有影像單元格在這裡具有單獨的邊框，文字沒有。
| 左 | 中 | 右 |
|---|---|---|
|
|
|
|
| 青銅星 | 金星 | 綠星 |
較低的十六進位制顏色（例如：#616161）更接近黑色。通常，表格中的所有邊框都將是相同的顏色。
垂直對齊
預設情況下，表格中的資料垂直對齊到單元格的中間，這會導致如下佈局
| 行標題 | 更長的文字段落。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | 短文字 |
|---|
要解決此問題，請將style="vertical-align: top;"應用於行（不幸的是，需要單獨將其應用於每行）。例如
{| class="wikitable" style="width: 400px;"
|- style="vertical-align: top;"
! scope="row" style="width: 10%;" | Row heading
| style="width: 70%;" | A longer piece of text. Lorem ipsum...
| style="width: 20%;" | short text
|- style="vertical-align: top"
! scope="row" | Row heading
| Excepteur sint occaecat...
| short text
|}
| 行標題 | 更長的文字段落。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | 短文字 |
|---|
浮動表格
維基標記編碼
This paragraph is before the table. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod...
{| style="float: right;" class="wikitable"
| Col 1, row 1
| rowspan="2" | Col 2, row 1 (and 2)
| Col 3, row 1
|-
| Col 1, row 2
| Col 3, row 2
|}
Note the floating-table to the right.
This paragraph is after the table. The text in column 2
will span both rows due to format specifier <tt>"rowspan=2"</tt> so there
is no coding for "Col 2" in the 2nd row, just: Col 1 & Col 3.
它在瀏覽器中顯示的樣子
本段位於表格之前。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...
| 列 1，行 1 | 列 2，行 1（和 2） | 列 3，行 1 |
| 列 1，行 2 | 列 3，行 2 |
請注意右側的浮動表格。
本段位於表格之後。列 2 中的文字將跨越兩行，因為格式說明符為“rowspan=2”，因此在第二行中沒有“列 2”的編碼，只有：列 1 和列 3。
表格居中
可以實現居中表格，但它們不會“浮動”；也就是說，表格兩側不會出現任何文字。訣竅是{| style="margin: 1em auto 1em auto;"
維基標記
{| class="wikitable" style="margin: 1em auto 1em auto;"
|+ '''Cells left-aligned, table centered'''
! scope="col" | Duis
! scope="col" | aute
! scope="col" | irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
它在瀏覽器中顯示的樣子
| Duis | aute | irure |
|---|---|---|
| dolor | in reprehenderit | in voluptate velit |
| esse cillum dolore | eu fugiat nulla | pariatur. |
可摺疊表格
您可以建立一個可以摺疊隱藏的表格。新增class="collapsible"到表格頂部或在 "wikitable" 之後新增 "collapsible" 以啟用摺疊行為。預設情況下，可摺疊表格將從摺疊狀態開始。要更改此行為，請包含附加的類 'selected'。您必須包含一個標題行，其中將顯示展開和摺疊的控制元件。示例
{| class="wikitable collapsible selected"
! Header
|-
| Content which starts shown
|-
| Click the header row to collapse
|}
給予
| 標題 |
|---|
| 顯示的初始內容 |
| 單擊標題行以摺疊 |
可排序表格
可以透過新增class="sortable"來使表格可排序。由於這非常有用，因此在設計表格時，明智的做法是牢記此功能的可能性和侷限性。例如
- 不要透過跨越多行的子標題將表格劃分為多個部分。相反，可以新增一列，以簡短形式顯示這些標題的每個行的內容。
- 不要使用跨越多個列的元素；同樣，再次以簡短形式在每行中重複內容。
- 在數字列中，不要在數字前面新增 "ca." 等文字 - 它將被排序為零。不要在數字之後新增文字，也不要新增數字範圍。相反，將這些文字放在單獨的列中。
可以將縮寫內容的完整形式放在表格外部作為圖例。
維基標記
{| class="wikitable sortable"
|+ Sortable table
|-
! scope="col" | Alphabetic
! scope="col" | Numeric
! scope="col" | Date
! scope="col" class="unsortable" | Unsortable
|-
| d || 20 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}
它在瀏覽器中顯示的樣子
| 字母順序 | 數字順序 | 日期順序 | 不可排序 |
|---|---|---|---|
| d | 20 | 2008-11-24 | 這 |
| b | 8 | 2004-03-01 | 列 |
| a | 6 | 1979-07-23 | 不能 |
| c | 4 | 1492-12-08 | 被 |
| e | 0 | 1601-08-13 | 排序。 |