查看“Help:表格”的源代码

'''表格'''是在页面中非常常见的文本形式。wikitext可以用来产生表格。表格在以行列的形式直观呈现大量数据时非常有用。

需要注意的是，不要滥用表格。表格一般不应当用来排版，更不应该添加花里胡哨的样式。

在编辑源代码时，编辑工具栏中的表格按钮可以很方便地创建一个表格。在可视化编辑器中，亦可创建表格。本页介绍的是 表格的wikitext语法，故不多介绍在可视化编辑器中的用法。

== 基本语法 ==
一个表格的基本语法如下：
<pre>-{}-
{| class="wikitable"
|+ 标题文本
|-
! 标题文本 !! 标题文本 !! 标题文本
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
</pre>

在上面的例子中，<code>{|</code>表示一个表格的开始，必须位于一行的开头。每个表格都是以这个符号开头的，其后接表格的基本属性，大多数表格都需要wikitable类以实现基本的格式化，因此添加<code>class="wikitable"</code>。

其后以<code>|+</code>开头的是表格标题，标题会显示在表格的最顶部，宽度不会超过表格自身的宽度。标题文本是可选的。

<code>|-</code>将表格分成了多行。每一行则是由相等数量的单元格组成。在上面的例子中，以<code>|</code>开头的是普通的单元格；以<code>!</code>开头的是表头，其样式略深一些，且显示为居中、加粗。表头也是可选的，但通常情况下一个表格应该要有一个表头。单元格按照先分行后分列的顺序排列。

在代码的同一行内，多个单元格可以使用<code>!!</code>和<code>||</code>分开，如果每个单元格一行，则单元格可以直接以<code>!</code>或<code>|</code>开头。

这就是表格的基本语法。上面这个表格呈现的效果如下：

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

== 跨列与跨行 ==
rowspan和colspan属性分别用来表示表格的跨行和跨列。这里所说的属性应该添加在单元格的开始处，并与内容用一个“<code>|</code>”分开。

 -{}-
 <nowiki>{|</nowiki> class="wikitable"
 |+ 标题文本
 |-
 ! 标题文本 !! 标题文本 !! 标题文本
 |-
 | <mark>rowspan="2" | 跨行文本</mark> || 示例 || 示例
 |-
 | <mark>colspan=2" | 跨列文本</mark>
 |}
效果如下：
{| class="wikitable"
|+ 标题文本
|-
! 标题文本 !! 标题文本 !! 标题文本
|-
| rowspan="2" | 跨行文本 || 示例 || 示例
|-
| colspan=2" | 跨列文本
|}
这个跨行文本占了它下方的一行，因此在书写第二行的时候，忽略了第一列，直接开始写第二列。由于第二行的第二列跨了两列，因此第二行没有第三列。

当然，一个单元格可以同时跨列和跨行。例如：

 -{}-<nowiki>{|</nowiki> class="wikitable"
 |+ 标题文本
 |-
 ! 标题文本 !! 标题文本 !! 标题文本
 |-
 | <mark>colspan="2" rowspan="2" | 横跨两行两列</mark> || 示例
 |-
 | 示例
 |-
 | 示例 || 示例 || 示例
 |}
效果如下：
{| class="wikitable"
|+ 标题文本
|-
! 标题文本 !! 标题文本 !! 标题文本
|-
| colspan="2" rowspan="2" | 横跨两行两列 || 示例
|-
| 示例
|-
| 示例 || 示例 || 示例
|}

== 属性 ==
你可以为表格的各个元素添加'''属性'''，这些属性包括表格属性、单元格属性、行属性和表格标题属性。

=== 表格属性 ===
表格属性添加在表格最开头的<code>{|</code>后面，将应用于整个表格。我们通常所添加的<code>class="wikitable"</code>就是应用于整个表格的。下面这个例子中，为整个标题设置文本颜色，并添加边框：

 -{}-{| <mark>class="wikitable" style="color:green; border:2px dashed blue"</mark>
 |-
 ! 标题文本 !! 标题文本
 |-
 | 示例 || 示例
 |-
 | 示例 || 示例
 |}

{| class="wikitable" style="color:green; border:2px dashed blue"
|-
! 标题文本 !! 标题文本
|-
| 示例 || 示例
|-
| 示例 || 示例
|}

=== 单元格属性 ===
单元格属性应用于单个单元格。单元格属性应用在单元格内容与单元格分隔符之间，并用<code>|</code>隔开。例如，在这个例子中，将左下角的单元格设置文本颜色并添加边框：

 -{}-{| class="wikitable"
 |-
 ! 标题文本 !! 标题文本
 |-
 | 示例 || 示例
 |-
 <mark>| style="color:green; border:2px dashed blue" |</mark> 示例 || 示例
 |}

{| class="wikitable"
|-
! 标题文本 !! 标题文本
|-
| 示例 || 示例
|-
| style="color:green; border:2px dashed blue" | 示例 || 示例
|}

=== 行属性 ===
你可以为表格的特定的行添加属性，这些属性将应用于整个行上。行属性直接添加在行分隔符<code>|-</code>之后。在本例中，为标题行后面的一行应用样式。
 -{}-{| class="wikitable"
 |-
 ! 标题文本 !! 标题文本
 <mark>|- style="color:green; border:2px dashed blue"</mark>
 | 示例 || 示例
 |-
 | 示例 || 示例
 |}

{| class="wikitable"
|-
! 标题文本 !! 标题文本
|- style="color:green; border:2px dashed blue"
| 示例 || 示例
|-
| 示例 || 示例
|}

=== 表格标题属性 ===
属性也可以应用于表格的标题。例如，CSS样式<code>caption-side</code>可以设置表格标题应用在表格的什么位置。
 -{}-{| class="wikitable"
 <mark>|+ style="color:green; border:2px dashed blue; caption-side:bottom" |</mark> 标题文本
 |-
 ! 标题文本 !! 标题文本
 |-
 | 示例 || 示例
 |-
 | 示例 || 示例
 |}

{| class="wikitable"
|+ style="color:green; border:2px dashed blue; caption-side:bottom" | 标题文本
|-
! 标题文本 !! 标题文本
|-
| 示例 || 示例
|-
| 示例 || 示例
|}

== 样式 ==
{{参见|Help:CSS}}
根据不同的情况，我们可能需要为表格的不同部分设置不同的'''样式'''。

=== 宽度和高度 ===
CSS的<code>width</code>和<code>height</code>属性可以设置表格的宽度和高度，其值为绝对或相对的长度。除非值为0，否则必须要有单位。

宽度和高度可以应用于整个表格，也可以应用于单个单元格。当应用于单元格时，其同一行或同一列的单元格的宽度也会受到影响。没有指定的宽度和高度会被自动设置。

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

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

上面这个例子中，整个表格的宽度被限定为容器宽度的80%，同时表格的1行1列单元格的宽度被限制为2em。2行1列没有规定宽度，但显然受到了1行1列的影响。

此外，宽度也可以用来指定单元格的大小分配，例如：
 -{}-{| class="wikitable"
 | <mark>style="width:20%"</mark> | 1行1列
 | <mark>style="width:20%"</mark> | 1行2列
 | <mark>style="width:60%"</mark> | 1行3列
 |-
 | 2行1列有很多很多文本
 | 2行2列
 | 2行3列
 |}

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

上面的这个例子强制让表格的各列按照20%:20%:60%即1:1:3的比例分配，尽管这与表格内容的数量不对应。

{{mbox|text=注意，设置宽度和高度使用的是<code>style</code>中的<code>width</code>和<code>height</code>CSS属性，如<code>style="width=80%"</code>而不是直接设置像<code>width="80%"</code>这样的节点属性。}}

=== 表格对齐 ===
一般来说，表格对齐的方式取决于皮肤默认设置，表格内部文本对齐的方式取决于其外部元素。你也可以手动定义。

<code>margin</code>样式可以指定表格在页面中应该如何对齐，例如下面这个例子中，表格是右对齐的：

 -{}-{| class="wikitable" <mark>style="margin-left: auto; margin-right: 0; width: auto"</mark>
 ! 标题 !! 标题 !! 标题
 |-
 | 内容1 || 内容2 || 内容3
 |-
 | 内容4 || 内容5 || 内容6
 |}

{| class="wikitable" style="margin-left: auto; margin-right: 0; width: auto"
! 标题 !! 标题 !! 标题
|-
| 内容1 || 内容2 || 内容3
|-
| 内容4 || 内容5 || 内容6
|}
<code>text-align</code>样式可以指定表格内部的文本应该如何对齐。例如：

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

{| 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"
 | <mark>style="vertical-align:top"</mark> | 顶端对齐
 | <mark>style="vertical-align:middle"</mark> | 中间对齐
 | <mark>style="vertical-align:bottom"</mark> | 底端对齐
 |}

{| class="wikitable"
! colspan="3" | 表格垂直对齐演示
|- style="height:5em"
| style="vertical-align:top" | 顶端对齐
| style="vertical-align:middle" | 中间对齐
| style="vertical-align:bottom" | 底端对齐
|}

{{mbox|text=请不要使用诸如<code>align="left"</code>或<code>valign="top"</code>这样的属性。}}

=== 表格浮动 ===
<code>float</code>样式可以让表格与文字浮动。例如，将属性<code>float:right</code>应用于整个表格，就会有下面这样的效果：
----
{| class="wikitable" style="float:right"
! colspan=3 | 拥有float:right样式的表格
|-
| 单元格 || 单元格 || 单元格
|}
----
{{mbox|text=一般来说，没有必要设置表格浮动，尤其对移动版视图不友好。}}
=== 单元格衬距 ===
<code>padding</code>属性可以设置单元格内容与其边界的距离。例如：
 -{}-{| class="wikitable"
 ! colspan=2 | 单元格衬距演示
 |-
 | <mark>style="padding:2em"</mark> | 距离四周2em
 | <mark>style="padding-top:3em"</mark> | 距离顶部3em
 |-
 | <mark>style="padding:0"</mark> | 与四周没有距离
 | <mark>style="padding:1em 2em 3em 4em"</mark> | 与四周距离各不相同
 |}
{| class="wikitable"
! colspan=2 | 单元格衬距演示
|-
| style="padding:2em" | 距离四周2em
| style="padding-top:3em" | 距离顶部3em
|-
| style="padding:0" | 与四周没有距离
| style="padding:1em 2em 3em 4em" | 与四周距离各不相同
|}

注意衬距与间距的区别：间距是单元格之间的距离，单元格本身不会占用任何间距的位置，而衬距是单元格内部的文字与单元格边距的距离，其仍属于单元格自身所占的位置。也就是说，间距在边框之外，边框在衬距之外，而衬距则在内容之外。

{{mbox|text=<code>padding:1em 2em 3em 4em</code>是<code>padding-top:1em; padding-right:2em; padding-bottom:3em; padding-left:4em</code>的缩写，显然，将四个方向的衬距写在一个属性里面更简洁。记住这个顺序：上、右、下、左。若只有三个值，则分别表示上、左右、下；两个值则分别表示上下和左右。若只有一个值，例如上面的例子中的<code>padding:2em</code>，则表示上下左右四个方向均应用相同大小的衬距。}}
{{mbox|text=一般来说，除非必要，否则没必要手动指定单元格的衬距。此外，不要使用<code>cellpadding</code>。}}

=== 边框和填充 ===
CSS的<code>border</code>和<code>background</code>样式可以设置表格的边框和填充。关于这些CSS属性的具体用法，这里不做阐述，仅举一个例子。

 -{}-{| class="wikitable" <mark>style="border:6px gray double"</mark>
 |+ 灰色双重边框的表格
 |-
 | <mark>style="background-color: lime"</mark> | 这个单元格的背景是绿色的
 | <mark>style="background-color: yellow"</mark> | 这个单元格的背景是黄色的
 |- <mark>style="background: linear-gradient(cyan, white)</mark>
 | 这一行的背景是渐变色
 | 由青色渐变至白色
 |}

{| class="wikitable" style="border:6px gray double"
|+ 灰色双重边框的表格
|-
| style="background-color: lime" | 这个单元格的背景是绿色的
| style="background-color: yellow" | 这个单元格的背景是黄色的
|- style="background: linear-gradient(cyan, white)
| 这一行的背景是渐变色
| 由青色渐变至白色
|}

注意：上面的例子中，使用了一些CSS的简写。例如<code>border:6px gray double</code>本质上相当于<code>border-width:6px; border-color:gray; border-style:double</code>，同时也相当于分别设置4条边的宽度、颜色和样式。显然，写到一个属性里面要更加简洁。<code>background: linear-gradient(cyan, white)</code>本质上是在设置<code>background-image</code>，同样地<code>background-color</code>也可以直接通过<code>background</code>设置。上面表格的第二行，由于该行的单元格没有设置填充，因此直接使用了为行设置的填充，这个填充覆盖了wikitable类为整个表设置的淡灰色填充。

{{mbox|text=
设置表格的边框和填充时，需要注意：
# 不要滥用这个功能。一般来说，<code>wikitext</code>类已经可以完成基本的格式化，无需再单独设置边框和填充。
# 使用边框和填充时，必须考虑无障碍性，确保色觉不佳、使用黑白输出或辨别能力不强的阅读者也能阅读表格内容。
# 不要使用<code>border</code>、<code>bordercolor</code>、<code>bgcolor</code>等HTML属性来实现表格样式。
}}

{{帮助页面}}
[[Category:帮助文档]]