可以在 wiki 页面中使用 HTML 表格元素或使用 Wiki 代码格式定义表格来编写表格。各种网页上都对 HTML 表格元素及其使用进行了详尽的描述,在此不再赘述。Wiki 代码的好处在于,表格由字符符号构成,与 HTML 表格元素相比,在文章编辑视图中查看时,更容易感知表格结构。
一条好的通用经验法则是,除非有必要,否则避免使用表格。表格标记往往会复杂化页面编辑。
Wiki 表格标记摘要
{| |
开始 table |
|+ |
表 标题, 可选;每个表格只有一个,且必须位于表格开始和第一行之间 |
|- |
表格行, 第一行可选 -- wiki 引擎假定第一行为此 |
! |
表头单元格, 可选。可以在同一行上添加连续的表头,用双感叹号 (!!) 分隔,或在新的行上开始,每行都有自己的单感叹号 (!)。 |
| |
表格数据单元格,必需!可以将连续的表格数据单元格添加到同一行,用双竖线(||)分隔或者从新行开始,用单竖线(|)分隔。 |
|} |
结束表格 |
- 以上的标记必须在新行开始,除了双竖线||和 !!,用后者可选择将连续单元格添加到一行。
- XHTML 属性。除了结束表格,每个标记都可选择接受一个或多个 XHTML 属性。属性必须位于同一行上。用单个空格将属性彼此分隔。
- 单元格和标题(| 或 ||,! 或 !! 以及 |+)包含内容。因此,用单个竖线(|)将任何属性与内容分隔。单元格内容可能会在同一行或后续行中显示。
- 表格和行标记({| 和 |-) 不会直接包含内容。在表格标记或行标记的可选属性后不要添加竖线(|)。如果你错误地在表格标记或行标记的属性后添加了一个竖线,那么解析器会删除该竖线以及你接触到错误竖线的最终属性!
- 内容可以(a)在同一行的单元格标记后在任何可选 XHTML 属性后显示,或者(b)在单元格标记所在行的后续行中显示。使用 wiki 标记的内容需要在新行开始,例如列表、标题或嵌套表格,当然也必须在新行中显示。
简单表格
普通
以下表格没有边框和良好的间距,但展示了最简单的 wiki 标记表格结构
|
{|
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
可选
要获得更像表格的 wiki 标记,可以在同一行上使用 || 列出单元格。并不适用于更长的单元格内容,例如段落。对于较短的内容(例如我们的示例表格)来说效果很好。
可以在 wiki 标记中的单元格内添加额外的空格,就像我在以下 wiki 标记中所做的那样,可以改善 wiki 标记本省的外观,但不会影响实际的表格渲染。
可以在此页面中的表格添加 HTML 属性,但为简洁起见,以下示例中并未添加。
橘子 |
苹果 |
更多 |
面包 |
馅饼 |
更多 |
黄油 |
冰淇淋 |
还有更多 |
|
{|
| Orange || Apple || more
|-
| Bread || Pie || more
|-
| Butter || Ice cream || and more
|}
|
带有 HTML 属性
你可以添加 HTML 属性改善表格外观
border="1"
|
{| border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
align="center" border="1"
|
{| align="center" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
单元格上的属性
可以在单个单元格上放置属性。例如,数字的外观可能更适合右对齐
橘子 |
苹果 |
12,333.00
|
面包 |
馅饼 |
500.00
|
黄油 |
冰淇淋 |
1.00
|
|
{| border="1"
|Orange
|Apple
|align="right"|12,333.00
|-
|Bread
|Pie
|align="right"|500.00
|-
|Butter
|Ice cream
|align="right"|1.00
|}
|
行上的属性
还可以在单个行上放置属性。
橘子 |
苹果 |
12,333.00
|
面包 |
馅饼 |
500.00
|
黄油 |
冰淇淋 |
1.00
|
|
{| border="1"
|Orange
|Apple
|align="right"|12,333.00
|-
|Bread
|Pie
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Ice cream
|align="right"|1.00
|}
|
cellspacing="0" border="1"
|
{| cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
cellpadding="20" cellspacing="0" border="1"
|
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
注意:目前此 cellpadding 示例在 mediawiki.org 上无法正常工作。它原本应该像 这样。
具有 HTML 属性和 CSS 样式
无论是否具有其他 HTML 属性,均可添加 CSS 样式属性
style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
包含 TH 标题的表格
可以使用 ! 来创建 TH(HTML 表格标题),而不是 |。通常,标题会默认显示为粗体并居中。
顶部标题
每列
美味 |
更美味 |
橘子 |
苹果 |
面包 |
馅饼 |
黄油 |
冰淇淋 |
|
{| border="1" cellpadding="20" cellspacing="0"
!Yummy
!Yummier
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
Colspan="2"
|
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|Yummies
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
侧标题
默认
水果 |
橘子 |
苹果 |
菜肴 |
面包 |
馅饼 |
搭配 |
黄油 |
冰淇淋 |
|
{| border="1" cellpadding="20" cellspacing="0"
!Fruit
|Orange
|Apple
|-
!Dish
|Bread
|Pie
|-
!Complement
|Butter
|Ice cream
|}
|
右对齐
可以按如下方式制作右对齐的侧标题
水果 |
橘子 |
苹果 |
菜肴 |
面包 |
馅饼 |
搭配 |
黄油 |
冰淇淋 |
|
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Fruit
|Orange
|Apple
|-
!align="right" |Dish
|Bread
|Pie
|-
!align="right" |Complement
|Butter
|Ice cream
|}
|
标题
可以按如下方式将 表格标题 添加到任何表格的顶部
|
{| border="1" cellpadding="20" cellspacing="0"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
可以按如下方式向标题添加 属性
|
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Food complements''
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
包含 H1、H2、H3 等标题的表格
可以使用标准的维基标记方式和 == 等号来创建 HTML H1、H2、H3、H4 等标题,并且 必须单独占一行 才能生效。
预览整个表格。 如果在表格 内 的标题的编辑选项卡上单击、编辑和预览,则母表格将显示错误损坏,因为其中一部分将丢失。
保持标题层级与页面的其余部分一致,以便页面顶部的目录正常运行。
|
{| border="3" cellpadding="20" cellspacing="0"
|colspan="2"|
===Yummiest===
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
警告
负数
如果你从一个新行以负数或计算结果为负数的参数(|-6)开始一个单元格,则负值减号会损坏你的表格(它可能显示缺少一些值),因为这是维基 markup 中的表格行而非表格单元格。为了避免这种情况,可以在值之前插入一个空格(| -6)或使用行内单元格标记(||-6)。