說明:表格

表格（英語：table）是在頁面中非常常見的文字形式。wikitext可以用來產生表格。表格在以行列的形式直觀呈現大量數據時非常有用。

需要注意的是，不要濫用表格。表格一般不應當用來排版，更不應該添加花里胡哨的樣式。

在編輯原始碼時，編輯工具列中的表格按鈕可以很方便地建立一個表格。在視覺化編輯器中，亦可建立表格。本頁介紹的是 表格的wikitext語法，故不多介紹在視覺化編輯器中的用法。

基本語法

一個表格的基本語法如下：

{| class="wikitable"
|+ 標題文字
|-
! 標題文字 !! 標題文字 !! 標題文字
|-
| 範例 || 範例 || 範例
|-
| 範例 || 範例 || 範例
|}

在上面的例子中，{|表示一個表格的開始，必須位於一行的開頭。每個表格都是以這個符號開頭的，其後接表格的基本屬性，大多數表格都需要wikitable類以實現基本的格式化，因此添加class="wikitable"。

其後以|+開頭的是表格標題（英語：caption），標題會顯示在表格的最頂部，寬度不會超過表格自身的寬度。標題文字是可選的。

|-將表格分成了多行。每一行則是由相等數量的儲存格組成。在上面的例子中，以|開頭的是普通的儲存格（英語：table cell）；以!開頭的是表頭（英語：table heading），其樣式略深一些，且顯示為居中、加粗。表頭也是可選的，但通常情況下一個表格應該要有一個表頭。儲存格按照先分行（英語：row）後分列（英語：column）的順序排列。

在代碼的同一行內，多個儲存格可以使用!!和||分開，如果每個儲存格一行，則儲存格可以直接以!或|開頭。

這就是表格的基本語法。上面這個表格呈現的效果如下：

標題文字

標題文字	標題文字	標題文字
範例	範例	範例
範例	範例	範例

跨列與跨行

rowspan和colspan屬性分別用來表示表格的跨行和跨列。這裏所說的屬性應該添加在儲存格的開始處，並與內容用一個「|」分開。

{| class="wikitable"
|+ 標題文字
|-
! 標題文字 !! 標題文字 !! 標題文字
|-
| rowspan="2" | 跨行文字 || 範例 || 範例
|-
| colspan=2" | 跨列文字
|}

效果如下：

標題文字

標題文字	標題文字	標題文字
跨行文字	範例	範例
	跨列文字

這個跨行文字佔了它下方的一行，因此在書寫第二行的時候，忽略了第一列，直接開始寫第二列。由於第二行的第二列跨了兩列，因此第二行沒有第三列。

當然，一個儲存格可以同時跨列和跨行。例如：

{| class="wikitable"
|+ 標題文字
|-
! 標題文字 !! 標題文字 !! 標題文字
|-
| colspan="2" rowspan="2" | 橫跨兩行兩列 || 範例
|-
| 範例
|-
| 範例 || 範例 || 範例
|}

效果如下：

標題文字

標題文字	標題文字	標題文字
橫跨兩行兩列		範例
		範例
範例	範例	範例

屬性

你可以為表格的各個元素添加屬性（英語：attribute），這些屬性包括表格屬性、儲存格屬性、行屬性和表格標題屬性。

表格屬性

表格屬性添加在表格最開頭的{|後面，將應用於整個表格。我們通常所添加的class="wikitable"就是應用於整個表格的。下面這個例子中，為整個標題設置文字顏色，並添加邊框：

{| class="wikitable" style="color:green; border:2px dashed blue"
|-
! 標題文字 !! 標題文字
|-
| 範例 || 範例
|-
| 範例 || 範例
|}

標題文字	標題文字
範例	範例
範例	範例

儲存格屬性

儲存格屬性應用於單個儲存格。儲存格屬性應用在儲存格內容與儲存格分隔符之間，並用|隔開。例如，在這個例子中，將左下角的儲存格設置文字顏色並添加邊框：

{| class="wikitable"
|-
! 標題文字 !! 標題文字
|-
| 範例 || 範例
|-
| style="color:green; border:2px dashed blue" | 範例 || 範例
|}

標題文字	標題文字
範例	範例
範例	範例

行屬性

你可以為表格的特定的行添加屬性，這些屬性將應用於整個行上。行屬性直接添加在行分隔符|-之後。在本例中，為標題行後面的一行應用樣式。

{| class="wikitable"
|-
! 標題文字 !! 標題文字
|- style="color:green; border:2px dashed blue"
| 範例 || 範例
|-
| 範例 || 範例
|}

標題文字	標題文字
範例	範例
範例	範例

表格標題屬性

屬性也可以應用於表格的標題。例如，CSS樣式caption-side可以設置表格標題應用在表格的什麼位置。

{| class="wikitable"
|+ style="color:green; border:2px dashed blue; caption-side:bottom" | 標題文字
|-
! 標題文字 !! 標題文字
|-
| 範例 || 範例
|-
| 範例 || 範例
|}

標題文字

標題文字	標題文字
範例	範例
範例	範例

樣式

參見：Help:CSS

根據不同的情況，我們可能需要為表格的不同部分設置不同的樣式（英語：style）。

寬度和高度

CSS的width和height屬性可以設置表格的寬度和高度，其值為絕對或相對的長度。除非值為0，否則必須要有單位。

寬度和高度可以應用於整個表格，也可以應用於單個儲存格。當應用於儲存格時，其同一行或同一列的儲存格的寬度也會受到影響。沒有指定的寬度和高度會被自動設置。

{| class="wikitable" style="width: 80%"
| style="width:2em" | 1行1列
| 1行2列
|-
| 2行1列
| 2行2列
|}

1行1列	1行2列
2行1列	2行2列

上面這個例子中，整個表格的寬度被限定為容器寬度的80%，同時表格的1行1列儲存格的寬度被限制為2em。2行1列沒有規定寬度，但顯然受到了1行1列的影響。

此外，寬度也可以用來指定儲存格的大小分配，例如：

{| class="wikitable"
| style="width:20%" | 1行1列
| style="width:20%" | 1行2列
| style="width:60%" | 1行3列
|-
| 2行1列有很多很多文字
| 2行2列
| 2行3列
|}

1行1列	1行2列	1行3列
2行1列有很多很多文字	2行2列	2行3列

上面的這個例子強制讓表格的各列按照20%:20%:60%即1:1:3的比例分配，儘管這與表格內容的數量不對應。

表格對齊

一般來說，表格對齊的方式取決於佈景主題預設設置，表格內部文字對齊的方式取決於其外部元素。你也可以手動定義。

margin樣式可以指定表格在頁面中應該如何對齊，例如下面這個例子中，表格是右對齊的：

{| class="wikitable" style="margin-left: auto; margin-right: 0; width: auto"
! 標題 !! 標題 !! 標題
|-
| 內容1 || 內容2 || 內容3
|-
| 內容4 || 內容5 || 內容6
|}

標題	標題	標題
內容1	內容2	內容3
內容4	內容5	內容6

text-align樣式可以指定表格內部的文字應該如何對齊。例如：

{| class="wikitable" style="min-width: min(15em, 100%)"
|-
! 表格對齊演示
|-
| style="text-align:left" | 左對齊
|-
| style="text-align:center" | 居中
|-
| style="text-align:right" | 右對齊
|}

表格對齊演示
左對齊
居中
右對齊

此外，還可以設置儲存格的垂直對齊：

{| class="wikitable"
! colspan="3" | 表格垂直對齊演示
|- style="height:5em"
| style="vertical-align:top" | 頂端對齊
| style="vertical-align:middle" | 中間對齊
| style="vertical-align:bottom" | 底端對齊
|}

表格垂直對齊演示
頂端對齊	中間對齊	底端對齊

表格浮動

float樣式可以讓表格與文字浮動。例如，將屬性float:right應用於整個表格，就會有下面這樣的效果：

---

擁有float:right樣式的表格
儲存格	儲存格	儲存格

封浜 – 樂秀路 – 臨洮路 – 嘉怡路 – 定邊路 – 真新新村 – 真光路 – 銅川路 – 真如 – 中寧路 – 曹楊路 – 武寧路 – 武定路 – 靜安寺 – 一大會址·黃陂南路 – 大世界 – 豫園 – 陸家嘴 – 浦東南路 – 浦東大道 – 源深路 – 昌邑路 – 歇浦路 – 龍居路 – 雲山路 – 藍天路 – 黃楊路 – 雲順路 – 浦東足球場 – 金粵路 – 桂橋路

唯亭 – 草鞋山 – 陽澄湖東 – 正儀 – 蓮湖公園 – 祖沖之公園 – 崑山文化藝術中心 – 共青 – 江浦 – 白馬涇 – 玉山廣場 – 繡衣 – 崑山城市廣場 – 金浦大橋東 – 順帆北路 – 魚池涇 – 白河潭 – 兵希 – 夏駕河公園 – 盛莊 – 章基路南 – 夏橋 – 神童涇 – 菉葭 – 花橋博覽中心 – 集善 – 花溪公園 – 花橋

大康路 – 呼蘭路 – 愛輝路 – 江楊南路 – 長江西路 – 通南路 – 長江南路 – 殷高路 – 上海財經大學 – 復旦大學 – 國權路 – 撫順路 – 江浦路 – 江浦公園 – 平涼路 – 丹陽路 – 昌邑路 – 民生路 – 楊高中路 – 迎春路 – 龍陽路 – 芳芯路 – 北中路 – 蓮溪路 – 御橋 – 康橋 – 周浦 – 繁榮路 – 沈梅路 – 鶴濤路 – 下沙 – 航頭

---

儲存格襯距

padding屬性可以設置儲存格內容與其邊界的距離。例如：

{| class="wikitable"
! colspan=2 | 儲存格襯距演示
|-
| style="padding:2em" | 距離四周2em
| style="padding-top:3em" | 距離頂部3em
|-
| style="padding:0" | 與四周沒有距離
| style="padding:1em 2em 3em 4em" | 與四周距離各不相同
|}

儲存格襯距演示
距離四周2em	距離頂部3em
與四周沒有距離	與四周距離各不相同

注意襯距與間距的區別：間距是儲存格之間的距離，儲存格本身不會佔用任何間距的位置，而襯距是儲存格內部的文字與儲存格邊距的距離，其仍屬於儲存格自身所佔的位置。也就是說，間距在邊框之外，邊框在襯距之外，而襯距則在內容之外。

邊框和填充

CSS的border和background樣式可以設置表格的邊框和填充。關於這些CSS屬性的具體用法，這裏不做闡述，僅舉一個例子。

{| class="wikitable" style="border:6px gray double"
|+ 灰色雙重邊框的表格
|-
| style="background-color: lime" | 這個儲存格的背景是綠色的
| style="background-color: yellow" | 這個儲存格的背景是黃色的
|- style="background: linear-gradient(cyan, white)
| 這一行的背景是漸變色
| 由青色漸變至白色
|}

灰色雙重邊框的表格

這個儲存格的背景是綠色的	這個儲存格的背景是黃色的
這一行的背景是漸變色	由青色漸變至白色

注意：上面的例子中，使用了一些CSS的簡寫。例如border:6px gray double本質上相當於border-width:6px; border-color:gray; border-style:double，同時也相當於分別設置4條邊的寬度、顏色和樣式。顯然，寫到一個屬性裏面要更加簡潔。background: linear-gradient(cyan, white)本質上是在設置background-image，同樣地background-color也可以直接透過background設置。上面表格的第二行，由於該行的儲存格沒有設置填充，因此直接使用了為行設置的填充，這個填充覆蓋了wikitable類為整個表設置的淡灰色填充。