帮助:表格

表格（英语：table）是在页面中非常常见的文本形式，用于呈现以二级形式排列的数据。表格有专门的HTML语法，而在MediaWiki中，wikitext也可以用来产生表格。在编辑源代码时，编辑工具栏中的表格按钮可以很方便地创建表格，你也可以手动创建表格。可视化编辑器也可以创建表格，并且能够很方便地合并单元格、插入或删除行列。本页主要介绍表格的wikitext语法，故不多介绍在可视化编辑器中的用法。

需要注意的是，不要滥用表格。表格一般不应当用来排版，更不应该添加花里胡哨的样式。在求闻百科中使用表格时，须遵守Qiuwen:无障碍访问方针。

基本语法

一个表格的基本语法如下：

{| class="wikitable"
|+ 标题文本
|-
! 标题文本 !! 标题文本 !! 标题文本
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}

效果如下：

标题文本

标题文本	标题文本	标题文本
示例	示例	示例
示例	示例	示例

在这个例子中，{|表示一个表格的开始，必须位于一行的开头。每个wikitext表格都是以这个符号开头的，其后接表格的基本属性。大多数表格都需要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"就是应用于整个表格的。下面这个例子中，我们不添加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。

宽度和高度

CSS的width和height属性可以设置表格的宽度和高度。宽度和高度的类型都属于长度，其值可以是相对值，也可以是绝对值。除非值为0，否则必须要有单位。

宽度和高度可以应用于整个表格，也可以应用于单个单元格。当应用于单元格时，其同一行或同一列的单元格的相应尺寸也会受到影响。

简单的宽度和高度

下面这个表格的宽度为80%，这是一个相对值，意味着表格将占用容器宽度的80%。其中，第一列的宽度为2em，这是一个绝对值，无论容器的大小是多少，第1列的宽度都是2em。不难推断出，第2列将占用表格的剩余的空间。

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

标题1	标题2
1行1列	1行2列
2行1列	2行2列

此外，宽度也可以用来指定单元格的大小分配。在下面这个例子中，三个列所占的宽度分别为整个表格的宽度的20%、20%、60%。尽管第1列的文本比其他列的文本多，但是由于指定了宽度，因此内容的数量不会影响宽度。

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

标题1	标题2	标题3
1行1列	1行2列	1行3列
2行1列有很多很多文本	2行2列	2行3列

复杂的宽度与高度

在一些情况下，绝对宽度和相对宽度或高度可能都没有办法满足需求。在这种情况下，可以使用复杂的表格宽度和高度。这里仅作参考，事实上并不推荐使用过于复杂的宽度和高度。

下面这个表格的宽度为min(max(70%, 20em), 100%)。意思是，当20em的长度小于容器宽度的70%时，这个表格的宽度是20em，否则为容器宽度的70%。但是，如果容器宽度本身小比较小，以至于小于20em，那么表格的宽度就是容器宽度的100%，以免超出容器宽度。

{| class="wikitable" style="width: min(max(70%, 20em), 100%)"
|+ 标题文本
|-
! 标题文本 !! 标题文本 !! 标题文本
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}

标题文本

标题文本	标题文本	标题文本
示例	示例	示例
示例	示例	示例

下面这个表格的宽度为calc(100% - 2em)。这个很好理解，这个宽度是相对宽度和绝对宽度的混合，其宽度是容器宽度减去2em。

{| class="wikitable" style="calc(100%, 2em)"
|+ 标题文本
|-
! 标题文本 !! 标题文本 !! 标题文本
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}

标题文本

标题文本	标题文本	标题文本
示例	示例	示例
示例	示例	示例

表格内容的自动排版

一般情况下，如果不指定宽度，那么表格的宽度以及各单元格的宽度是自动调整的，会根据内容来进行分配。如果指定了整个表格的宽度和高度，但是没有指定单元格的宽度和高度，那么这个单元格的宽度和高度也会自动分配。

在下面这个例子中，表格的宽度不会超过40个字符的宽度，字符多的单元格会分配更宽的宽度。

{| class="wikitable" style="width: min(40em, 100%)"
|+ 自动排版的表格
|-
! 标题1 !! 标题2 !! 标题3
|-
| 这是一个很多文本的单元格，内容非常非常多，需要占用比较多的空间，以便呈现其内容。
| 内容很少的单元格
| 这个单元格的内容也比较少。
|-
| 这个内容很少。
| 内容很少的单元格。
| 这个单元格的内容也是比较少的。
|}

自动排版的表格

标题1	标题2	标题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类为整个表设置的淡灰色填充。