幫助:表格
一個表格是用於組織和定位資料的列和行的排列。表格對於此目的很有用，並且可以使用許多不同的樣式和技巧來定製每個表格。此頁面為您提供有關在華夏公益教科書中構建表格的語法的相關資訊。
使用工具欄
要自動插入表格，請單擊 
在 編輯工具欄 上。
單擊按鈕並接受預設值時，將插入以下文字
{| 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 行 |
請注意右側的浮動表格。
本段文字位於表格之後。由於格式說明符“rowspan=2”，第 2 列中的文字將跨越兩行，因此第 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 | 排序。 |