表格允許我們在螢幕上將資料結構化為整齊的行和列。這在許多情況下都很有用。事實上，網頁上的許多其他類似框的結構都使用表格作為其基礎。
維基文字表格與 HTML 表格密切相關。如果您熟悉 HTML，您可能會很高興地瞭解到您可以在維基頁面中使用 HTML 表格。但是，維基標記程式碼（如其所稱）使用的字元更少，並且不使用結束標籤。維基文字表格在最簡單的形式中非常基礎，但與它們的 HTML 等價物一樣，它們可以透過新增 HTML 屬性和 CSS 樣式進行廣泛的格式化。本頁介紹如何製作表格。
對於那些只需要一個可以修改的快速維基文字或 HTML 表格的人來說，請參閱 現成的表格 .
這是一個基本的表格示例
{| class="wikitable"
|+ Caption
|-
! Heading 1
! Heading 2
|-
| A
| B
|-
| C
| D
|}
外部大括號和管道符號 表示一個表格 。管道和連字元符號 表示一個新的行 。單獨的管道符號 表示一個資料單元格 。感嘆號 表示標題單元格 。管道和加號符號 表示表格標題 。
請注意，該表格透過使用class="wikitable"獲得了標準的邊框和格式；如果沒有它，表格的格式就不那麼清晰。實際上，在維基樣式表中定義的其他屬性已將標題單元格居中並使其加粗 。相同的預設條件使表格的背景顏色為白色 ，文字為黑色 ，並將表格標題放置在頂部。
還要注意，基本表格的列會擴充套件以適應最寬的文字。如果某些表格單元格為空，則列可能會變得很窄。使用者通常會在單元格中放置特殊的隱藏字元來擴充套件這些列。使用的字元是不間斷空格 ， ，之所以這樣稱呼，是因為它最初的目的是將由它連結的任何兩個詞保持在一起。
這些簡單的表格周圍沒有任何邊距來將它們與其他文字隔開。為了確保它們不會與頁面的其他部分混淆，可以在它們之前和之後使用程式碼<br clear=all> 模板 {{clear }} 通常用於使用更少的標記來完成相同的事情。這可以確保表格和任何緊隨其後的文字都從它們自己的新行開始。表格也可以包含邊距 樣式來執行此間距。
此簡單的表格程式碼，或示例中使用的任何其他程式碼，可以複製並貼上到 沙盒 或其他頁面中進行測試和擴充套件。要擴充套件此類表格，只需新增更多行和資料單元格即可。
還有兩種表格佈局可以在維基頁面中使用；它們都與上面顯示的基本表格製作相同的表格。第一個列表非常類似，但將行的單元格 程式碼寫入一行 。請注意，使用雙 管道符號作為單元格分隔符：當標題單元格以這種方式排列時，使用雙 感嘆號而不是雙管道符號。
第二個列表是維基文字表格的 HTML 等價物，當此類表格要由模板顯示時，有時更容易使用。事實上，維基表格的管道符號可能會與模板中的其他此類符號衝突，使用 HTML 表格是避免此類問題的一種方法。使用 HTML 表格時，它們具有更寬鬆的語法規則；例如，它們可以在元素之間有行間距，而維基文字表格則不行。
技術說明： 您最好知道可以在某些 HTML 編輯器中建立 HTML 表格，並且這些編輯器通常在網際網路上免費提供。網際網路還提供用於程式碼的 HTML 到維基文字轉換器，但不提供相反的轉換。因此，對於少數需要維基文字和 HTML 版本相同的表格的情況，最好先建立 HTML 版本，然後簡單地將其轉換為維基 。
程式碼中看到的術語 class="wikitable" 稱為 HTML 屬性 ，它應用了維基表格的標準格式規則，使這些示例更清晰。另請注意，格式略有不同；HTML 表格的樣式放置在 開始元素標籤 內 ，而維基樣式只是寫在 {| 符號 之後 。屬性和其他樣式將在下一節中討論。
{| class="wikitable"
|+ Caption
|-
! Heading 1!! Heading 2
|-
| A || B
|-
| C || D
|}
< table class = "wikitable" >
< caption > Caption</ caption >
< tr >
< th > Heading 1</ th >
< th > Heading 2</ th >
</ tr >
< tr >
< td > A</ td >
< td > B</ td >
</ tr >
< tr >
< td > C</ td >
< td > D</ td >
</ tr >
</ table >
表格元素 從新行開始可以縮排。行間距 通常不允許在這些元素之間。表格有自己的修改 HTML 屬性 ，例如 border 、width 和 align 等，就像大多數 HTML 元素一樣。此外 ，表格可以使用 類 、ID 和 樣式 進行更改。見後。要顯示在模板中的表格 最好使用 HTML 製作。維基標題單元格具有內建樣式 ；它們已經是粗體和居中。
HTML 表格需要單元格中的文字才能正確顯示。如果需要空白單元格，則輸入一個 不換行空格 ， ，可以避免問題。
上面顯示的簡單表格可以按原樣使用，但其使用者可能遲早需要應用一些額外的格式。要擴充套件表格的 結構 ，許多人只需新增帶有單元格的新行，或者在現有行中新增額外的單元格。這些方法有其優點，因為可以保留顏色和 格式 。當需要更復雜的表格時，本節中的資訊將很有用。
表格樣式是一組指令或規則，用於為工作新增格式。
樣式可以在稱為 類 的樣式表列表中指定和命名。然後在表格行中進行 類宣告 ，即編寫類名就會呼叫它。這樣做的效果是將命名類中的所有樣式應用於表格。這種表格類宣告的示例是 class="wikitable"。
樣式也可以在表格中完全指定；這些稱為內聯樣式，只要它們寫在表格的適當部分，就可以覆蓋表格行中宣告的類中包含的樣式。
維基文字的使用者使用內聯樣式，因為很少有可用的 類 來格式化表格；編寫 新的 樣式表類將是首選方法，但由於需要，此活動屬於管理員的範圍。
樣式規則可用於格式化表格的 所有 部分。
HTML 屬性 也可用於格式化，但其格式與 CSS 樣式不同。許多現在已經過時，因此始終首先考慮 CSS。
樣式和屬性可以結合使用，以獲得良好的效果。 編寫這些樣式的通用格式可以在下面的下拉框 樣式格式 中找到，屬性摘要可以在另一個下拉框中找到。本頁的各個部分包含許多程式碼示例，說明如何放置樣式以獲得給定效果，建議對該主題不熟悉的讀者按照程式碼的措辭進行理解。關於樣式優先順序的更多資訊可以在華夏公益教科書頁面 The CSS Cascade
樣式格式
樣式的放置位置
樣式的編寫要考慮到特定的表格級別。例如，單元格背景色將在單元格級別寫入，而更通用的表格背景色將在表格級別寫入。單獨的行背景也可以使用行級別的樣式設定。
需要注意的是，可以設定 行的樣式 來更改其所有單元格，但只能以這種方式使用 一些 不同的格式；其他必須應用於每個單元格。這可能使一些工作非常繁瑣。允許使用這些格式的是影響 顏色 、字型 和 文字對齊方式 的格式；不允許使用的是改變 佈局 的格式，即 邊框 、單元格間距 、單元格填充 、邊距 和 文字間距 。
在維基文字中，屬性列表 和 CSS 樣式表示式 放在建立表格、行或單元格的符號 之後 。示例將在正文中找到。當要為表格指定一個 類 （一組預先打包的樣式）時，它將在表格行中寫入。這通常是這種情況，即使類包含針對更低級別的樣式。以下示例顯示了一個使用 WIKITABLE 類的表格的示例程式碼，以及其每個相關元素中的樣式。需要注意的是，如果在此示例中省略標題樣式，WIKITABLE 的紫色著色將在那裡占主導地位；也就是說，該級別的內聯樣式優先於類應用於它的樣式。注意，樣式與單元格文字之間用管道符號隔開。
{ | class="wikitable" align=center width=50% style=" background : lightyellow ; color : maroon ; "
|+ style=" font-weight : bold ; "|Caption Text
|-
! style=" background : brown ; color : white ; "| Heading 1
! style=" background : brown ; color : white ; "| Heading 2
|-
| Cell A1 Text||Cell A2 Text
|- style=" background : lightgray ; "
| style=" border : 3 px solid darkred ; "|Cell B1 Text
| Cell B2 Text
| }
該表格如下所示
標題文字
標題 1
標題 2
單元格 A1 文字 單元格 A2 文字
單元格 B1 文字
單元格 B2 文字
所有單元格在一行 的備用佈局
要使用備用的 所有單元格在一行 符號向這些表格單元格新增樣式或屬性，請使用以下典型格式
| - style = "background:lightgray;"
| style = "border:3px solid darkred;" | Cell B1 Text || align = left | Cell B2 Text
請注意，樣式和資料文字仍然用管道符號隔開，並且雙管道符號隔離了下一個單元格的詳細資訊。同一行的其他單元格可能仍然需要佔用下一行。
相同的思路應用於備用格式中的 標題 ，如下所示
| -
! align = left | Heading 1 !! style = "font-family:courier;" | Heading 2
請注意，雙感嘆號隔開標題單元格描述，並且管道符號隔開每個標題的樣式及其資料。
可以在頁面 Tables Ready to Use 上看到許多 HTML 表格及其維基文字等效程式碼的示例。
HTML 屬性的格式
HTML 屬性包括諸如 cellpadding 、cellspacing 和 align 這樣的專案。還有其他幾個屬性適用於表格，表格的完整列表可以在旁邊下拉框摘要中找到。它們都使用兩個用等號分隔的術語，通常在表格行中設定多個這樣的專案。通用格式是
attribute1=value1 attribute2=value2 attributeN=valueN 請注意，在上面的示例中，規則用空格隔開。另一個列表，這次是三個提到的屬性的實際示例，是
cellpadding=10px cellspacing=8px align=center CSS 樣式的格式
CSS 樣式比 HTML 屬性具有更多格式化規則。它們包括所有顏色、字型、間距、填充、邊距和其他專案。表格元素中通常有幾個這樣的規則，表格行本身包含大多數規則。通用格式是
style = "property1:value1; property2:value2; ... propertyN:valueN;" 從上面的通用形式可以看出
每個樣式規則 包含 一個屬性和一個值。屬性和值 之間 的分隔符 是 冒號 。樣式規則 之間 的分隔符 是 分號 。整個集合 的規則 用 雙引號 括起來 。集合構成 與 style 相等的表示式的右側。另一個列表，可以放在表格元素、行元素或單元格元素中，以設定它們的背景和文字顏色，就是
style="background:lightyellow; color:royalblue;" 請注意，使用了顏色名稱，並且每個顏色名稱都拼寫為一個單詞。兩種格式化方法經常混合在同一行中，如下所示
align=right width=300px style="background:lightyellow; color:royalblue;" 樣式表示式的標點符號規則
有時樣式規則看起來有點緊湊，需要展開以使其更易讀，併為文字換行提供方便的斷點。這些說明適用於 CSS 樣式表示式 內部 的標點符號。
主要要點，避免
樣式表示式 內 不允許 換行 .冒號和分號 前面 不允許有空格。 這些有緯度
冒號和分號 之後 的空格可以。
表格、行或單元格符號與單詞 style 之間的空格可以。
任何 等號 符號周圍的空格可以。
樣式規則與其邊界引號之間的空格可以。
可選地，可以在最後一個樣式規則 之後 立即放置一個分號。 此外
複合值，如 2px solid black 必須 用空格隔開。
屬性 必須 用空格與 CSS 樣式表示式隔開。
CSS 屬性摘要
維基標記表格中常用的樣式規則 使用了兩組 不同的 樣式規則； 一組與表格中特定元素相關的 HTML 屬性，以及一組更通用的級聯樣式表，即 CSS 屬性。
表格 、標題 、行 和 單元格 每個都可以被視為更通用的表格構建中的單獨 元素 。在屬性引用與相同級別相同元素中的 CSS 屬性相同的格式的所有情況下，CSS 屬性優先。
為了快速參考，列出了每個樣式集的簡短列表，但這些列表絕不完整。在此下拉列表底部提供了指向完整 CSS 屬性參考的連結。
表格的 HTML 屬性；使用以下格式；
attribute1=value1 attribute2=value2 attributeN=valueN
'' cellspacing'' .
****** Do not use border styles with this attribute; only the '' border'' attribute.
CSS 樣式規則；使用以下格式；
style=" property1: value1; property2: value2; propertyN: valueN;"
< blockquote > , < center > ,< div > ,
< h1-h6 > , < hr > , < ol > , < p > , < pre > , < table > , and < ul > . Line-height fails within a < span > .
WIKITEXT 樣式表示式間距規則
主要要點，避免
樣式表示式內部 不允許換行。讓軟體進行換行。
冒號或分號之前 不允許有空格。 這些有緯度
各種表格符號和style 詞語之間的空格是可以的。
任何 等號 符號周圍的空格可以。
樣式規則與其外部 括號之間的空格是可以的。
冒號和分號 之後 的空格可以。
分號可以放置在最後一個樣式規則之後 。 此外
諸如“2px solid black”之類的複合值必須 用空格隔開。
HTML 屬性必須 用空格與 CSS 樣式表示式隔開。
允許 HTML 元素 行間距，但不允許 Wikitext 元素。
為了清晰起見，可以縮排 Wikitext 和 HTML 表格元素。
程式碼 LISTINGS 中的長行只有 在新增一些空格的情況下才能換行。 將兩種樣式規則方法結合起來
只要它們保持各自的本地格式，就可以將屬性與 CSS 樣式混合使用。也就是說；引號之間沒有等號，引號外部沒有 CSS 規則。請注意，Wiki 撇號程式碼和各種 HTML 標籤仍然可以直接用於文字。下面顯示了混合樣式的示例。
{| border=1 width=300px style="background:lightyellow;color:maroon;"
| height=100px| <u>''First''</u> cell
| style="background:black;color:white;" width=200px align=center|''Second'' cell
|}
內聯樣式的優先順序。
當屬性和樣式在同一級別上發生衝突時，樣式將具有優先順序 。
當樣式表示式中存在兩個具有不同值的類似屬性時，將採用第二個 值。
當同一表格行中存在兩個完整的 樣式表示式時，將忽略 第二個表示式。在同一行中，兩個類似屬性的情況也是如此；忽略第二個屬性。
有關屬性和值的更詳細說明，請參閱CSS 參考列表
表格準備就緒 上，可以檢視大量 HTML 表格及其 Wikitext 等效程式碼的示例。有時，從這些示例中更容易理解某個特定要點，或者回憶起已經學到的細節。
當針對類似格式的樣式寫入表格的各個部分（元素）時，一組格式可能會與另一組格式發生衝突。通常，任何 更靠近單元格文字的格式將優先於遠離單元格文字的類似格式。
例如，如果使用表格行中的樣式表示式將表格的背景色設定為紅色 ，那麼單元格中的另一個表示式可以指定單元格顏色為藍色 。也可以以不同的方式指定行的顏色。根據優先順序規則，只有一部分會受到影響，表格的其餘部分會保留在表格行中為其設定的顏色。這些簡單的優先順序列在此處
寫在單元格中的樣式 優先於在行或表格級別應用的類似 樣式。寫在行中的樣式 優先於在表格級別應用的類似 樣式。當 CSS 樣式和HTML 屬性 都在同一級別時，CSS 樣式將具有優先順序。 例如，如果 CSS margin 屬性將表格放置在頁面左側邊距附近，則使用屬性align 將表格額外居中將被忽略。雖然這些格式並不完全相同，但隱含 的 CSS 定位優先於同一級別上的屬性的定位。屬性有時 可以具有優先順序。 只有當屬性位於更靠近 文字的表格級別時，才會發生這種情況。例如：如果表格級別的CSS 樣式 將文字設定為右對齊，而單元格 屬性將其居中，則單元格將具有居中 文字，而表格的其餘部分將右對齊。可以修改 類宣告的 CSS 樣式 ，方法是在表格的適當級別使用內聯 CSS 樣式，但屬性無法覆蓋這些樣式。當然，屬性可以應用於類根本沒有指定的樣式。類性質在 WikiBooks 頁面類和樣式說明 如果這些優先順序看起來很複雜，那麼在實際操作中它們更容易理解。在以下表格中，在表格、行和單元格級別上應用了許多文字顏色。為了幫助理解基本層次結構，請參考下面的程式碼模組，同時遵循以下幾點。
表格文字的預設顏色 為黑色 。這從程式碼中看不出，但這是 Wiki 樣式表的結果。 CSS 類宣告 ，class=wikitable，將各種樣式一次性應用於表格，包括灰色 背景。它還使用黑色文字顏色。 表格樣式 將紅色 文字應用於整個表格。如果沒有其他程式碼，所有文字都將為紅色 。行樣式 將藍色 文字應用於第二行，將綠色文字應用於第三行。由於行比表格具有更高的優先順序，因此它們會更改文字顏色 。單元格樣式 將褐紅色 文字應用於兩個單元格。單元格級別比表格或行具有更高的優先順序，可以進一步更改某些部分 。樣式越靠近文字 ，其在設定格式方面的優先順序就越高。還可以使用 HTML 標籤或 wikitext 將其他格式直接應用於資料 。
{| class="wikitable" style="color:red;"
|-
| style="color:maroon;"|'''A1 : Maroon Cell Style'''
|'''A2 : Red Table Style'''
|- style="color: blue;"
| style="color:maroon;"|'''B1 : Maroon Cell Style'''
|'''B2 : Blue Row Style'''
|- style="color: green;"
| '''C1 : Green Row Style'''
| '''C2 : Green Row Style'''
|-
| '''D1 : Red Table Style'''
| '''D2 : Red Table Style'''
|}
A1 : 褐紅色單元格樣式 A2 : 紅色表格樣式
B1 : 褐紅色單元格樣式 B2 : 藍色行樣式
C1 : 綠色行樣式 C2 : 綠色行樣式
D1 : 紅色表格樣式 D2 : 紅色表格樣式
對 CSS 優先順序的描述是故意限制的。CSS 優先順序的設定很複雜，由多種因素決定。樣式在網頁或其各種樣式表中寫入 的位置 會產生影響，即所謂的樣式源 ，並且這些源有一個層次結構。例如，使用者樣式表重要樣式 的設定優先順序高於任何作者樣式 。此外，在從特定來源存在的每組樣式內部 ，還設定了其他優先順序；這些優先順序遵循複雜的優先順序規則；（ID 優先於類，類優先於元素樣式，等等）。還存在針對重複樣式的衝突規則，有時只有瀏覽器的執行順序才能決定要使用哪些類似樣式。有關 CSS 優先順序在網頁中如何工作的概述，請參閱CSS 級聯 。}}
表格編碼需要對錶格空間的基本瞭解。
表格空間只是主表格元素和其中可調整的部分。本節簡要介紹表格術語，並說明其格式的性質。
請參閱下拉框表格設計空間 以檢視文字。
表格設計空間
表格設計空間
表格中有多個空間在設計中需要關注；尤其是邊距、填充和單元格間距。請參閱上面的圖形和下面的描述，瞭解它們的詳細資訊。
邊距 設定表格與頁面上相鄰專案的間距，表格的四邊可以具有不同的邊距。實際上，邊距可以設定為負值，以使表格部分重疊。除了邊距之外，還有一些對齊屬性可以將表格居中或將其定位到左側或右側（align=style="margin:10px 10px 20px 0px;"
此程式碼一次性將表格邊距應用於所有四邊。值的順序對應於上、右、下、左。此順序也用於填充。
表格填充 描述主表格周長內的一個區域。（圖形中的表格空間 A）。它用於在內容看起來有點擁擠時改善表格的外觀。它也可以分別或一起為所有邊指定。此屬性在表格行中設定，但只能在單元格間距未摺疊時使用；否則將獲得虛假結果。表格填充的使用相對較少，不像單元格級別上使用的類似屬性。某些瀏覽器（例如 Internet Explorer 6）根本不會呈現表格行中設定的填充，但 Opera 和 Firefox 都可以呈現。儘管如此，表格填充使用以下樣式style="padding:20px 10px 20px 10px;"
此程式碼一次性將表格填充應用於所有邊，順序為上、右、下、左；它透過僅使用一個數字作為統一 值應用。此屬性僅影響表格行中寫入的表格 填充。
單元格間距 描述所有表格單元格和周長邊框之間的區域。（圖形中的表格空間 B）。它獨立於任何外部表格填充設定。一個值可以設定所有單元格的間距，水平和垂直間距可以分別設定。此 CSS 屬性與border-collapse 屬性一起使用，並且邊框需要設定為separate 才能使用它。表格行中用於單元格間距的樣式示例如下style="border-collapse:separate;border-spacing:10px"
另一個 單元格間距方法存在；有一個用於單元格間距 的 HTML 屬性，它也可以在不需要 CSS 樣式的情況下設定間距。在某些情況下它很有用，而在另一些情況下則沒有。它的簡單性使其適用於大型表格，在大型表格中，CSS 樣式會造成很多工作。它只應用統一 間距，但這通常就足夠了。當 HTML 表格要進入某種模板時，它就不那麼有用；它可能會阻止在這些時間執行。該屬性在表格行中應用統一 間距，帶 cellspacing=10px
單元格填充 描述單元格中文本週圍的空間，並將文字與單元格邊框隔開。（圖形中的表格空間 C）。它的程式碼描述與表格填充 相同，只是它是在單元格 行中編寫的。style="padding:10px 5px 10px 5px;"
它不能 在行 內的樣式中編寫，因此當需要進行很多自定義填充時，就需要任意數量的單元格樣式語句。 有一個 HTML 屬性可以將統一填充 應用於所有單元格，它是在表格 行中編寫的。它具有典型的形式 cellpadding=10px
表格標題 是一行文字，預設情況下它位於表格上方並居中。這段文字顯然位於 上邊距內 ，因此需要在表格佈局中考慮。有一個屬性可以將標題定位到表格的任意一側，但並非所有瀏覽器都能處理它。在 Wiki 中，它有自己的表格元素，|+< caption ></ caption >
邊框 嚴格來說不是表格空間，但除了在劃分各個空間方面的明顯作用外，它們本身也用於裝飾。邊框 CSS 樣式僅在表格行中為表格周長設定。對於單元格 ，必須為每個單元格設定。還可以使用 CSS 程式碼將每一側設定為不同的樣式。表格行中也有一個 HTML 屬性可以建立簡單的統一 全方位邊框，它可以為大型表格和不太苛刻的應用程式節省大量工作。下面顯示了典型的樣式和屬性 style="border:10px solid brown;"
該屬性通常為 border=1px
頁面其餘部分將分別討論各種表格空間。
邊框用於將表格與頁面的其他部分隔開，並且經常用於裝飾。
可以為整個表格設定邊框，也可以為表格的任何單個部分設定邊框。可以指定這些邊框的厚度 、樣式 和顏色 ，甚至還有關於四個單獨邊框的規則。
本節介紹了用於建立邊框的各種選項，並嘗試介紹一些鮮為人知的格式。有關邊框樣式的摘要，請參閱下拉框邊框樣式 。
邊框樣式
實線 style="border:5px solid maroon" 點線 style="border:5px dotted blue" 凹槽 style="border:5px groove oldlace" 凸起 style="border:5px ridge green"
虛線 style="border:5px dashed salmon" 內嵌 style="border:5px inset gray" 雙線 style="border:5px double maroon" 外嵌 style="border:5px outset dimgray"
僅頂部 style="border-top:5px solid tomato" 僅右側 style="border-right:5px solid royalblue" 僅底部 style="border-bottom:5px solid darkred" 僅左側 style="border-left:5px solid fuchsia"
備註
邊框樣式 可以在表格或單元格級別 設定，並且只會影響該元素 。上面的邊框示例 是在單元格級別 使用提供的樣式製作的。邊框屬性 只能在表格級別 設定，並在所有位置設定邊框 。邊框屬性 在表格行中設定，只是border=1px 。部分邊框 樣式可能需要刪除其他邊框以獲得特定效果。要刪除帶樣式的邊框 ，在同一級別輸入style="border:none" 。要刪除透過屬性設定的邊框 ，在表格行中輸入border=0 。已刪除的邊框可以在刪除後的樣式中恢復 .單元格邊框樣式 會疊加在屬性設定的邊框上。對於表格周長 ，請使用其中一個示例樣式，但在表格行中使用。此周長使用style="border:2px solid dimgray" 單獨行的邊框 不受支援，必須根據需要應用單元格邊框。
下面的示例 具有各種邊框。最初，此基本表格上沒有全方位 邊框。為表格周長設定了外部 邊框，併為各個單元格的底部 設定了各種邊框。此外，整個表格的背景顏色已更改為lightyellow ，然後標題顏色在更改後變為brown 。標題的文字顏色已設定為white ，以便與新的背景顏色形成更好的對比。請按照以下示例中的詳細資訊操作您輸入的內容 :
{| cellspacing=0 align=center cellpadding=5px width=50% style="background: lightyellow; border: 1px solid gray;"
|+ Top Caption
|-
! style="background:brown;color:white;border-bottom:1.5px solid black" |Heading 1
! style="background:brown;color:white;border-bottom:1.5px solid black" |Heading 2
|-
| width=50% style="border-bottom:1px solid gray" |A
| width=50% style="border-bottom:1px solid gray" |B
|-
| style="border-bottom:1.5px solid black" |C
| style="border-bottom:1.5px solid black" |D
|}
您得到的結果
單元格間距 是指表格中每個單元格周圍的空間。它也稱為邊框間距 它可以設定為零，但更常設定為某個實用值，以便將單元格隔開，並改進佈局。
有時可以使邊框重疊 ，這稱為摺疊 邊框。
有時可以使水平間距和垂直間距不同。
有兩種 用於設定邊框間距的方法：HTML 屬性 方法和CSS 樣式 方法。
間距只能寫入表格 行。 使用屬性或 樣式
混合使用樣式和屬性方法可能會導致邊框和間距的混亂 .大型表格最好使用 HTML 屬性 ，因為它們可以減少工作量。HTML 屬性方法
此cellspacing 方法使用邊框 屬性製作的邊框時，可以呈現最佳外觀。 在此方法中，應用cellspacing 的值會適當地隔開邊框。為這些細 內部邊框設定零值會產生與 CSS 樣式中看到的摺疊邊框 非常相似的結果，並且以很少的工作量呈現整潔的外觀。如果完全省略 cellspacing 屬性，則仍會新增少量間距。
用邊框 屬性製作的邊框是複合的。也就是說，它們總是由兩種不同的顏色構成。在 HTML 中，可以指定兩種顏色，但在維基文字中則不能。預設狀態為底部和右側邊框設定較淺的顏色，為左側和頂部邊框設定較深的顏色。
用屬性製作的邊框適用於整個表格，包括表格周長。當值發生變化時，外部 周長會發生變化，但內部 邊框會保留標稱值。
當需要更精細的邊框時，必須使用邊框樣式 ，並且為了設定它們的間距，最好使用相應的border-spacing 屬性。 以下是一些cellspacing 屬性的示例。
{ | width=100% border=1 cellspacing=15px
|+ ''Border=1''' and '''Cellspacing=15px''
| width=50% style=" padding : 15 px ; "|There is all-round ''uniform'' spacing.
| width=50% style=" padding : 15 px ; |The borders are made of two colors.
| }
具有Border=1 和Cellspacing=15px 的程式碼
有全方位統一 間距。
邊框由兩種顏色構成
Border=1 和Cellspacing=0 間距已被移除。
邊框並排排列
Border=1 和Cellspacing 省略已新增預設間距。
單元格已彼此隔開。
具有Cellspacing=0 的粗“帶樣式”邊框
粗邊框顯示了效果。
邊框並排排列
cellspacing 屬性易於使用。對於大型表格，請使用cellspacing 以減少工作量。
如果cellspacing 屬性被省略 ，則會應用少量預設間距。
該方法幾乎 使用cellspacing=0 摺疊屬性設定的邊框。對於真正摺疊 的邊框，即重疊 的邊框，請使用 CSS 樣式。見下文。
使用border=1 製作的細內部邊框，使用cellspacing=0 時，看起來仍然很合理，尤其是當替代的 CSS 方法涉及大量工作時。
CSS 邊框間距
使用 CSS 的摺疊邊框和分離邊框
以下備註顯示了摺疊 和分離 邊框的目的和外觀。
CSS 邊框間距 用於使用 CSS 樣式製作的邊框，而不是屬性 。摺疊邊框旨在重疊 ，並且透過為border-collapse 屬性設定collapse 來實現，無論border-spacing 如何。分離的邊框不會重疊 ，並且透過為border-collapse 屬性設定separate ，以及透過設定確切的border-spacing 值來實現。並排的邊框 ，使用分離 邊框和設定為零的間距 來實現。表格級別的填充 僅在邊框分離 時可以使用。當它們預設情況下被暗示為分離 時（未提供 cellspacing 值時），或者當邊框摺疊 時，結果將是虛假的。但是，以下格式是可靠的。
程式碼放置位置
摺疊邊框
{| style="border-collapse:collapse;"
|+ Typical CSS collapsed borders example
| style="border:1px solid black;"|Text for cell one
| style="border:1px solid black;"|Text for cell two
|}
分離邊框
{| style="border-collapse:separate;border-spacing:7px;border:1px solid gray;"
|+ Typical CSS separated borders example
| style="border:1px solid black;"|Text for cell one
| style="border:1px solid black;"|Text for cell two
|}
摺疊邊框的詳細資訊
摺疊邊框可以使用以下兩種編碼形式中的任何一種
style="border-collapse:collapse;"
或；
style="border-collapse:collapse;border-spacing:50px;"兩種格式都提供以下結果
無論間距如何，都會摺疊
當邊框摺疊 時，它們將始終 重疊。
無論設定了任何border-spacing ，都會發生這種情況。
細 邊框的相同示例如下所示
無論間距如何，都會摺疊
當邊框摺疊 時，它們將始終 重疊。
無論設定了任何border-spacing ，都會發生這種情況。
分離邊框的詳細資訊
分離的邊框可以具有統一 或非統一 間距
style="border-collapse:separate; border-spacing:7px;"style="border-collapse:separate; border-spacing:7px 14px;"
統一 邊框間距。在第二個形式中，兩個數字分別產生水平 和垂直 間距。非統一 結果如下
帶確切間距的分離
；分離 邊框從不 重疊，並且是不同的。
Border-spacing 可以為水平和垂直設定。
細 邊框的相同示例如下所示
帶確切間距的分離
分離 邊框從不 重疊，並且是不同的。Border-spacing 可以為水平和垂直設定。
帶邊框間距為零的分離
分離邊框狀態可以透過將間距設定為零來將邊框並排放置。為了完整起見，顯示了粗邊框和細邊框的這些情況
帶邊框間距為零的分離
分離 邊框從不 重疊，並且是不同的。間距 已消失。
細 邊框的相同示例如下所示
帶邊框間距為零的分離
雙倍厚度 適用於內部 邊框。最好使用摺疊 用於這些情況。
使用 HTML 屬性設定間距
使用border 屬性 建立的邊框應使用cellspacing 屬性 來摺疊或間隔其邊框。類似地，使用 CSS 建立的邊框應使用 CSS 間隔。嘗試整合這兩種方法可能會造成混淆。
問題 有時會出現在 cellspacing 屬性 中。例如，當表格要作為模板引數 顯示時，模板很可能會失敗。為了避免這種情況，表格應該在 HTML 中建立， cellspacing 屬性應該被移除，而應該使用 CSS 樣式。此外，wikitext 應該更改為 HTML。在其他情況下，屬性形式可能會有用，因為它可以以很少的編碼工作量提供良好的效果。
單元格填充 是指包圍單元格中文字的空間。它也可以應用於表格，以填充表格外圍區域內的空間。填充 即使在單元格寬度發生變化時也會保留。單個文字 通常使用對齊而不是填充來處理。單元格的四個邊 都可以設定不同的填充。表格填充 可以在某些 瀏覽器中應用，前提是邊框沒有摺疊。填充有兩種 方法 ：HTML 屬性 方法和CSS 樣式 方法。屬性寫在 表格行中，而 CSS 樣式則根據格式化意圖寫在單元格或表格行中。單元格樣式和表格屬性cellpadding 可以在同一個表格中一起使用，不會造成混淆。單元格的統一填充 使用表格行中的 HTML 屬性cellpadding 。單元格的非統一填充 使用單元格行中的樣式。表格填充 無論哪種方式都需要表格行中的樣式，但只有在邊框分離 的情況下才能輕鬆使用。一些瀏覽器，例如 Internet Explorer 6，根本不會呈現表格行中設定的填充，而 Opera 和 Firefox 則會這樣做。這些是cellpadding 屬性的示例。
{| width=100% border=1 cellpadding=15px
|+ Uniform: ''Cellpadding=15px''
| width=50% |This is an example of all-round padding, using the HTML attribute.
| width=50% |The text has been spaced from each cell's border with one entry.
|}
Cellpadding 省略這是一個沒有單元格填充的示例。
文字緊貼單元格邊框放置。
統一：Cellpadding=15px
這是一個使用 HTML 屬性的全方位填充示例。
文字已使用一個條目從每個單元格的邊框間隔開。
屬性cellpadding 使用起來很簡單。
該屬性僅對單元格應用統一 填充。
CSS 單元格填充
CSS 單元格填充和表格填充
以下說明展示了兩種方法的編碼。
程式碼放置位置
單元格填充
{| border=1
|+ Typical CSS cell padding example
| style="padding:15px;"|Text for cell one
| style="padding:15px 20px;"|Text for cell two
| style="padding:15px 20px 5px 8px;"|Text for cell three
|}
表格填充 （某些瀏覽器）。
{| style="border-collapse:separated;border-spacing:5px;padding:20px;"
|+ Typical CSS table padding example
| style="border:10px solid brown;"|Text for cell one
| style="border:10px solid salmon;"|Text for cell two
|}
詳細的單元格填充
單元格填充以及表格填充可以以三種方式之一指定。
當引用一個值時 ，它指的是統一 填充；每個邊都相同。當引用兩個值時 ，第一個值設定左 和右 ，第二個值設定上 和下 。當引用所有四個值時 ，它們按上 、右 、下 和左 的順序應用。樣式表示式可以是以下三個之一style="padding:5px;"
或；
style="padding:5px 10px 15px 8px;"
這些格式與屬性版本具有相似的行為，除了它們能夠設定非統一 填充。
當為 cellpadding 設定屬性時，單元格內或表格行中的樣式將具有優先順序。透過這種方式，可以由屬性設定通用填充，而單元格樣式則設定與通用填充的差異。
表格填充
表格填充使用與單元格填充相同的 CSS 樣式，只是它放置在表格行中。主要區別在於邊框必須分離才能使用。一些瀏覽器，例如 Internet Explorer 6，根本不會呈現表格行中設定的填充，而 Opera 和 Firefox 則會這樣做。以下樣式設定表格填充
style="border-collapse:separated; border-spacing:7px;padding:20px;"
沒有 表格填充的表格，第二個示例顯示有 表格填充的表格。請注意，表格填充存在於外圍區域附近的所有單元格間距之外。
可以對整個表格或單個單元格進行背景著色。文字著色也是如此。當使用 cellspacing 時，表格背景屬性設定單元格邊框之間的顏色，而單元格背景設定單元格內部的顏色。下拉框中提供了一些顏色名稱選項。如果在設計工作中需要更多顏色資料，請直接將任何或所有下拉框模板Lightcolors Mediumcolors Darkcolors Greycolors
顏色
背景用淺色
象牙色
亞麻色
米色
木瓜色
淡黃色
雪白色
淡黃色
淡黃色
蔚藍色
淡玫瑰色
淡紫紅色
薄荷色
幽靈白
煙白色
淺灰色
深灰色
灰色
暗淡灰色
深色文字
黑色
深藍色
午夜藍
深綠色
深橄欖綠
皇家藍
海軍藍
深石板藍
藍色
深紅色
栗色
棕色
磚紅色
紅色
白色
設定背景和文字顏色的樣式規則通常為
style="background:lightyellow;color:maroon"
其中background 是元素的背景顏色，color 是文字的顏色。
這些顏色可以在任何表格、行或單元格元素中設定，並遵循之前討論過的常規 CSS 樣式優先順序。
至少有三種方法可以指定顏色
使用顏色名稱，例如：red、blue、mistyrose 等。
使用顏色的 RGB 值；例如；RGB(140,100,65)。
使用顏色的十六進位制表示法；例如（包括分號）；#f8a4c8; 為了進一步強調這一點，以下三個用於在米色背景上顯示黑色文字的樣式表示式是等效的
style="background:Linen;color:black"或；
style="background:rgb(250,240,230);color:rgb(0,0,0)"
style="background:#faf0e6;;color:#000000;"請注意，使用十六進位制表示法會在末尾有一個分號。由於分號也用作樣式規則的分隔符，因此程式碼中很可能出現兩個分號。這兩個都不應該省略。
每一行都有相同列數的表格，為了便於說明，每一列都有相同行數，被稱為統一表格 。但是，可以透過合併單元格來建立非統一 表格，這在 wikitext 和 HTML 中被稱為跨越 。
{| class="wikitable"
|-
| A
| B
| C
|-
| colspan="2"| D
| F
|}
}
樣式與 資料用管道 符號分隔。HTML 屬性 border 和colspan 使用等號 分隔符。Colspan 可以看作是向右延伸 。跨越的單元格 應該在程式碼中省略。不一致的值 不會擴充套件表格。
類似地，我們可以對行做同樣的事情
{| class="wikitable"
|-
|rowspan="2"|A
| B
| C
|-
| E
| F
|}
樣式與 資料用管道 符號分隔。HTML 屬性 border 和 rowspan 使用等號 作為分隔符。Rowspan 可以被認為是向下延伸 。跨越的單元格 應該在程式碼中省略。不一致的值不會擴充套件表格。
rowspan 和 colspan 這兩個屬性可以組合起來同時跨越垂直和水平方向。
{| class="wikitable"
|-
| rowspan=3 colspan=3|A
| D
|-
| H
|-
| L
|-
| M
| N
| O
| P
|}
跨行和跨列屬性 可以應用於同一個單元格。單元格之間的跨越 只能在可比的連線維度上進行。跨越的單元格 應該在程式碼中省略。跨越單元格的移除 不能導致一行為空。例如，嘗試在 H和 L之間進一步形成跨行，需要將作為該行最後一個剩餘單元格的 L移除，而連線將失敗。
當內容新增到單元格時，表格有三種 不同的行為；這假設單元格中存在不止幾個字元。
第一 種情況是最常見的；即，對於非格式化文字 。也就是說，依賴軟體來換行的文字。第二 種行為是對於預格式化 文字，該文字位於預格式化標籤內，或者新增框狀結構 ，如其他表格 或影像 。這第二組的特徵是具有預設寬度 或分配寬度 。第三 種表格內容是一個非常長的沒有空格的字元字串，這種字串有時會出現在程式列表中。這三種情況將在下面更詳細地解釋。
考慮非格式化文字的情況。當表格及其單元格的寬度 設定沒有在程式碼中設定時，新增到單元格中的文字會導致單元格和表格擴充套件到頁面的全寬，然後再進行任何文字換行。在沒有寬度設定的情況下，可能會生成一個全寬表格。
當表格的寬度和單元格的寬度完全指定時，當單個單元格的文字達到單元格邊界時，單元格文字將開始換行。然後，隨著文字的增加，單元格將向下擴充套件，同時保持其寬度設定。即使指定了單元格的高度，這種行為也很明顯。
考慮單元格內容具有預設寬度或預設寬度的情況。假設內容是一個影像。無論 單元格的寬度是否在程式碼中設定，影像都會擴充套件單元格 以容納自身。如果表格 寬度已設定，則其他單元格甚至可能會縮小或擴充套件高度以保持預期的表格寬度及其內容。當表格寬度無法 以這種方式維護時，表格將擴充套件，可能超出頁面的右邊緣。這種行為通常會在預格式化文字標籤中的文字中看到。為了避免這些問題，只需在內容本身的編碼中限制內容的寬度 。
表格單元格通常包含程式碼列表作為文字，以便使用者可以看到程式碼的編寫方式。其中一些程式碼行非常長，通常會根據表格設定的寬度進行換行。但是，由於無空格文字被視為單個單詞 ，因此表格無法將其拆分為中間進行換行。在這種情況下，無論寬度設定如何，表格都會擴充套件。這種缺乏換行在其他地方可能是一個難題，即使在計劃了長行換行的情況下也是如此。透過在長文字字串中放置適當數量的空格來避免這個問題。例如，CSS 樣式表示式允許在許多地方使用空格，前提是它們不直接放置在分號 或冒號 之前。
寬度 使用絕對 單位，如畫素，或相對 單位，如百分比 。相對單位 很有用，因為不需要知道頁面寬度。相對寬度 指的是表格情況下頁面寬度 的百分比，或者指的是單元格寬度設定為單元格的情況下表格 的百分比。高度 永遠 不需要真正固定，儘管有時設定一些最小高度對工作有所幫助。下面可以看到一個設定了相對寬度 的表格。表格設定為佔據頁面寬度的一半 （width=50% ），最左側的兩列分別佔據該寬度 的 25%。請注意，單元格寬度將變為表格寬度設定的 25%，並且頁面寬度和表格的最終寬度都不需要知道。該影像使用其自身的尺寸來佔據剩餘寬度，並且也使用其自身的程式碼進行居中。請注意，雖然兩行都指定了相同的高度，但影像使頂行更深。這個佈局也利用了這一點來顯示基本的水平和垂直文字對齊方式。
{| class="wikitable" width=50% style="margin-left:auto; margin-right:auto"
|-
| height=60px width=25%| A
| width=25% align=center| B
| [[image:Oriental_poppy.jpg|center|100x90px]]
|-
| height="60px" valign="bottom"| C
| valign="middle" align="right"| D
|
|}
各列分別設定為表格寬度的 25%、25% 和 50%（隱含）。 表格設定為可用頁面寬度的 50%。 兩行最初都設定為 60 畫素高。 該影像迫使頂行高度為 90 畫素，但有足夠的水平 空間。 影像的尺寸在影像程式碼中設定。 該影像還使用其自身 程式碼來水平定位自身；（居中） 文字單元格介紹了各種文字對齊方式
A
B
C
D
表格可以在頁面上水平 對齊，使用HTML 屬性 'align' ，CSS 樣式 'float' ，以及CSS 樣式 'margin' 。在每種情況下，這些樣式規則都放在表格行中。表格的垂直 對齊是透過使用文字換行符來實現的，而微調可以透過 CSS 邊距樣式來實現。
HTML 屬性方法 使用表格行中的align 屬性將表格定位在可用空間的左邊 、中間 或右邊 ，可以在本頁的表格程式碼中看到其使用示例。需要注意的是，對於表格的居中，相同表格行中的邊距CSS 樣式 將優先於align 。頂部和底部邊距不會造成問題，但使用左右邊距會導致問題。文字可以在這樣的表格周圍浮動，除了居中的情況。CSS 樣式 'float' 無法將表格放置在可用空間的中心，而是侷限於左邊 和右邊 。它的優點是文字可以圍繞表格浮動。CSS 樣式 'margin' 最佳 ，透過其設定可以將表格放置在水平對齊的任何位置。當margin 屬性設定為auto 時，表格將放置在水平容器空間的中心。透過合理使用相對測量值（%）可以獲得相同的結果。文字圍繞使用margin 定位的表格浮動的程度取決於剩餘的空間大小。請檢視下面下拉框中的示例。
表格對齊
表格對齊示例 第一個表格僅使用屬性 來設定寬度並將表格定位在頁面中心。{| align=center width=70% style="background:papayawhip;"
|+ Centered and sized with attributes
| Doesn't work well with wikitable, and is deprecated in HTML 4.
|}
使用屬性居中和調整大小
與 wikitable 不相容，在 HTML 4 中已被棄用。
第二個表格使用 CSS margin 屬性的auto 值將表格居中 。當與表格寬度的相對測量值結合使用時，可以合理地調整不同的螢幕尺寸。由於它是居中的，任何相鄰的文字必須跟在後面，不能換行。表格和邊距佔據了表格容器的整個寬度，使用這種方法，頂部和底部邊距將變為零。
{| class="wikitable" style="width:70%; margin:auto;background:lightgrey;"
|+ Centered using the ''auto'' value of the CSS property ''margin''.
| Table Text
|}
使用 CSS 屬性 margin 的 auto 值居中。
表格文字
第三個表格模擬了適用於任何螢幕寬度的居中表格 ，但與所有居中表格一樣，它只適合後續文字。表格和邊距佔據了表格容器的整個寬度。
{| class="wikitable" style="width:70%; margin:0 15% 0 15%;background:mistyrose;"
|+ Centered using relative width and margin CSS styles
| Table Text
|}
第四個表格將表格放置在頁面右側 ，並使用 CSS 樣式 'width' 和 'float' 對其進行調整大小。
{| class="wikitable" style="width:70%;float:right;background:lightyellow;"
|+ Floated right using 'float'
| Table Text
|}
與大多數表格樣式一樣，有兩種主要方法：HTML 屬性 和CSS 樣式 。
所有文字 都可以使用屬性進行定位 。請檢視下面的表格以瞭解示例。 影像和其他框狀形狀的垂直定位 需要樣式屬性vertical-align ，水平 定位使用它們自己的編碼。屬性對齊摘要如下
Align 設定文字的水平對齊方式。它具有left 、center 或right 的值。例如align=center 用於居中文字（或表格）。Valign 設定文字的垂直對齊方式。它具有top 、middle 和bottom 的值。在表格行中沒有等效的用法。文字的垂直對齊 在單元格級別使用valign ，或使用 CSS 屬性vertical-align 。影像和巢狀表格的垂直對齊 僅在單元格級別使用 CSS 屬性vertical-align 。影像和巢狀表格 透過自己的編碼 設定它們的水平對齊方式。垂直對齊 不能在表格級別設定。以下表格顯示了要使用特定效果的樣式，特別是 HTML 屬性align 和valign 的使用。此外，影像和巢狀表格的垂直對齊方式顯示在下面的程式碼塊和表格中。
可用的對齊選項
目標對齊方式
屬性align
屬性valign
CSS 樣式text-align
CSS 樣式vertical-align
表格的水平位置 在表格級別 是
表格的垂直位置 在表格級別 不可用 - 在頁面中定位表格
所有文字的水平位置 在表格級別
是
所有文字的垂直位置 在表格級別 不可用 - 必須在單元格級別完成
行的文字的水平位置 在行級別 是
是
行的文字的垂直位置 在行級別
是
單元格文字的水平位置 在單元格級別 是
是
單元格文字的垂直位置 在單元格級別
是
是
單元格影像等的水平位置 在單元格級別 最好使用物件自己的程式碼來定位它
單元格影像等的垂直位置 在單元格級別
是
使用Align和Valign屬性對齊單元格中的文字
align=leftalign=centeralign=rightalign=justify
valign=top這是align=left和valign=top。
這是align=center和valign=top。
這是align=right和valign=top。
這是align=justify和valign=top。文字是兩端對齊的。
valign=middle這是align=left和valign=middle。
這是align=center和valign=middle。
這是align=right和valign=middle。
這是align=justify和valign=middle。文字是兩端對齊的。
valign=bottom這是align=left和valign=bottom。
這是align=center和valign=bottom。
這是align=right和valign=bottom。
這是align=justify和valign=bottom。文字是兩端對齊的。
{| class="wikitable" align="center" style = "background: transparent;"
|+ Vertical Alignment of Box-like Objects, (Images and Nested Tables)
|-
| height=200px width=180px style = " vertical-align: top; " |[[image:ArialSpecimen.svg | center | 100px ]]
| width=180px style = " vertical-align: middle; " |[[image:ArialSpecimen.svg | center | 100px ]]
| width=180px style = " vertical-align: bottom; " |[[image:ArialSpecimen.svg | center | 100px ]]
| width=180px style = " vertical-align: top; " |
{| class="wikitable" align=center width=50%
| A || B
|-
| C || D
|}
|}
使用 CSS 樣式垂直 對齊框狀物件（影像和巢狀表格）
請注意，這些影像和巢狀表格包含使用自己的 編碼來設定它們的水平 位置，以及表格單元格中的CSS 樣式 用於除預設值以外的任何垂直 位置。
技術說明
表格可以設定為，當在頁面上顯示時，點選連結會對錶格進行排序。再次點選會以相反的方向排序。每一列都提供一個排序連結，因此可以在任何列上進行排序。這種方法允許使用者從不同的角度檢視資料。
表格也可以隱藏其內容。這些表格被稱為可摺疊 。可摺疊表格在摺疊 狀態下看起來像一個簡單的盒子；然後，當用滑鼠點選盒子時，表格會恢復到展開 狀態，並顯示出來。連結具有切換操作；再次點選連結會隱藏內容。這樣的表格有助於整理頁面，從而避免對主題的干擾。它們特別適用於補充資訊。
在最簡單的形式中，將類宣告class="sortable" 新增到任何表格的表格行，無論應用了哪些其他類和樣式，都會建立一個可排序表格。以下程式碼說明了這種方法，結果如下所示。
{| class="wikitable sortable" cellpadding=5px
! One!!Two!!Three!!Four
|-
| M||A||K||E
|-
| E||N||D||S
|-
| M||E||E||T
|}
點選此結果表格中的連結，看看排序是如何工作的
有關此主題的更詳細的處理，讀者可以參考meta:Help:Sorting 。
可摺疊表格的程式碼與普通表格的程式碼非常相似，只是增加了一個類宣告。（一些 Internet Explorer 瀏覽器會出現連結錯誤。）
這也是一個很好的例子，說明如何宣告多個類。下面是可摺疊表格的基本程式碼和結果。
{| class="wikitable collapsible" width="200px"
! Click Here for Contents
|-
| This contains the hidden content.
|}
結果是
無論是否包含wikitable 類，紫色標題都是預設功能。與其他所有部分一樣，可以將 HTML 屬性和 CSS 樣式應用於標題。
當使用width 屬性時 ，展開的寬度和初始寬度將相同，並由其固定。在這種情況下，非格式化 文字將在設定的寬度內換行。預格式化 文字將擴充套件框到其最長行的長度。像 HTML 表格和影像這樣的框結構將擴充套件下拉框到封閉物的寬度。
如果意圖是顯示非格式化 文字，但初始 框寬度比開啟 框寬度窄，則顯示的內容應放在其自己的巢狀表格單元格內，並將該表格設定為所需的開啟 寬度設定。還要注意，此可摺疊表格的預設文字對齊方式是居中 。
當省略width 屬性時 ，初始寬度由標題文字的寬度設定。在這種情況下，非格式化 文字將擴充套件框以適應頁面的可用寬度，而預格式化 文字將擴充套件框以適應其最長行的長度。像 HTML 表格和影像這樣的框結構總是會擴充套件下拉框到封閉物的寬度。
使用模板Dropimage 此模板有一套全面的選項，包括更改整個樣式表示式和類的選項。它基於Collapsible 類。使用Dropimage 的結果可以透過檢視此頁面上下拉框的效果來觀察。需要更多關於可摺疊表格的資訊的讀者，特別是關於組合可排序和可摺疊表格的資訊，應該參考meta:Help:Collapsing 。
測試沙箱 ；使用此頁面上的編輯 按鈕輸入工作內容進行測試。CSS 層疊樣式表
