帮助:表格

表格（英语：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类为整个表设置的淡灰色填充。