用户:Liflon/Help:表格
| 维基代码 |
|---|
表格可以用多行多列的形式排列及整理内容。在维基百科的页面里，能用特殊的维基代码制作表格，要自设表格的话也有许多样式和窍门可以运用。
使用编辑工具栏
[编辑]
按一下编辑工具栏里的 
或 
（添加表格）便会自动增添表格。在工具栏找不到“添加表格”的按钮的话，可依照这里的说明增添这个按钮。
按下“添加表格”后会加入左面的代码，这段代码会生成右面的表格：
{| class="wikitable"
|-
! 標題 !! 標題 !! 標題
|-
| 例子 || 例子 || 例子
|-
| 例子 || 例子 || 例子
|-
| 例子 || 例子 || 例子
|}
|
|
表格里的占位文字（“标题”、“例子”）应该替换成实际要添加的内容。
竖线符号系列代码
[编辑]尽管HTML的表格标记也能用，但使用维基代码可以更快捷地制作表格。下面一系列含竖线符号的代码和HTML表格标记的功能完全相同，所以你懂得运用后者的话，便很容易看明白前者。含竖线符号的代码有这些：
- 整个表格本身必须用花括号和竖线符号包围着，在表格开头用“
{|”，结尾则用“|}”。这两组代码都必须自成一行：
{| 這是表格內容 |}
- 要增添表格标题，可以在一行的开头输入竖线符号和加号“
|+”并附上文字：
{|
|+ 表格標題
這是表格內容
|}
- 要增添横行，可以在新一行输入竖线符号和连接号：“
|-”。这个横行里的单元格的代码要在再下一行输入。
{|
|+ 表格標題
|-
這是一行的內容
|-
這是下一行的內容
|}
- 在下一行输入单元格的代码，开头要输入竖线符号：
{|
|+ 表格標題
|-
| 這是單元格的內容
|-
| 這是下一行首個單元格的內容
| 這是下一個單元格的內容
|}
- 单元格的分隔方式有几种：换行加竖线符号、换行加两个竖线符号，或者在同一行直接输入两个竖线符号“
||”。这三种代码的效果都一样：
{|
|+ 表格標題
|-
|單元格1 || 單元格2 || 單元格3
|-
|單元格A
|單元格B
|單元格C
|}
- 单元格的代码里如果有单独出现的竖线符号的话，会有出乎意料的显示效果。如果有代码出现在一行的头两个竖线符号之间，或者有代码前面是两个竖线符号而后面是一个竖线符号的话，都会变成该横行的格式代码（可忽略）。再之后输入的所有竖线符号则会视为单元格内容的一部分。下面这段代码的效果大概不如你所预料：
{| border="1"
|-
|格式代碼（不會顯示） |這些內容 |（包括豎線符號在內） |全都會顯示在 |單元格1裡 ||單元格2
|-
|格式代碼 |後面這些內容 ||格式代碼|會顯示在 |單元格4裡
|}
| ||||
|
不过格式代码也有其用处：
{| border="1"
|-
| 單元格1（無格式代碼）
|-
| style="text-align:right;" | 單元格2（靠右對齊）
| style="background:#FFB6C1;" | 單元格3（紅底色）
|}
|
|
谨记：每个单元格的代码内单独的竖线符号不可以出现超过两次！
- 要将单元格定义为直列表头，可以将“
|”替换为“! scope="col" |”，以及将“||”替换为“!! scope="col" |”。表头单元格的显示效果通常会与正常的单元格不同，实际效果视乎浏览器而定，不过往往会是粗体且居中对齐。在采用“class="wikitable"”等类别标记的维基格式表格里，不需要加入“scope="col"”这段代码。
{|
|+ 表格標題
! scope="col" | 直列表頭1
! scope="col" | 直列標題2
! scope="col" | 直列標題3
|-
| 單元格1 || 單元格2 || 單元格3
|-
| 單元格A
| 單元格B
| 單元格C
|}
- 要将横行的首个单元格定义为横行表头，可以将该行开头的“
|”替换为“! scope="row" |”，并且将同一行随后的单元格移至下一行。在采用“class="wikitable"”等类别标记的维基格式表格里，不需要加入“scope="row"”这段代码。
{|
|+ 表格標題
! scope="col" | 直列表頭1
! scope="col" | 直列表頭2
! scope="col" | 直列表頭3
|-
! scope="row" | 橫行表頭1
| 單元格2 || 單元格3
|-
! scope="row" | 橫行表頭A
| 單元格B
| 單元格C
|}
- 另外还有可选填的参数，可以对单元格、横行或整个表格生效。例如可以为表格加边框：
{| border="1"
|+ 表格標題
! scope="col" | 直列表頭1
! scope="col" | 直列表頭2
! scope="col" | 直列表頭3
|-
! scope="row" | 橫行表頭1
| 單元格2 || 單元格3
|-
! scope="row" | 橫行表頭A
| 單元格B
| 單元格C
|}
|
|
要将所有单元格的边框宽度缩小至1像素的话，可以在表格首行加入一段代码来指定：
{| border="1" style="border-collapse:collapse;"
|+ 表格標題
! scope="col" | 直列表頭1
! scope="col" | 直列表頭2
! scope="col" | 直列表頭3
|-
! scope="row" | 橫行表頭1
| 單元格2 || 單元格3
|-
! scope="row" | 橫行表頭A
| 單元格B
| 單元格C
|}
|
|
不过最简单的方法是用维基百科的表格用外部样式表，例如“class="wikitable"”。
{| border="1" class="wikitable"
|+ 表格標題
! 直列表頭1
! 直列表頭2
! 直列表頭3
|-
! 橫行表頭1
| 單元格2 || 單元格3
|-
! 橫行表頭A
| 單元格B
| 單元格C
|}
|
|
表格和单元格可用的参数与HTML的一样，见www<colgroup>和<col>这两个元素。Mediawiki从版本号1.18起会支援<thead>、<tbody>和<tfoot>。维基百科目前版本号是1.44.0-wmf.1 （fbc8c4f）。
即使所有单元格都不填上内容，表格仍然有其用处。例如可以用参数来更改单元格的底色，将表格变成图表，见元维基的8 × 8五格骨牌范例。与真正的图像相比，用表格制成的“图像”较容易修改。
每一行的单元格数目必须和其余横行一样，这样子表格里直列的数目才会保持一致。如果要将单元格置空，应该输入不换行空格“ ”，以确保这个单元格依然会显示出来。要在单元格里显示竖线符号的话，输入“<nowiki>|</nowiki>”或者“|”。
运用“colspan”和“rowspan”可以将不同直列或横行的单元格合并，见下面的混杂形式示例。不过要注意这样做的坏处是表格会无法正常地进行排序。
范例
[编辑]最简单的表格
[编辑]简约风格
[编辑]以下两组代码的效果相同，可因应每行有多少个单元格、每个单元格内有多少内容来决定用哪一种代码为佳。留意显示效果，这个表格是没有边框的：
{|
| A
| B
|-
| C
| D
|}
{|
| A || B
|-
| C || D
|}
|
|
乘数表
[编辑]留意以下示例使用了“class="wikitable"”调用维基百科的表格用外部样式表，调整表格的外观。这段代码添加了边框和底色，并且将表头文字变成了粗体。
{| class="wikitable" style="text-align:center; width:200px; height:200px;"
|+ 乘數表
|-
! ×
! 1
! 2
! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
|
|
表格设定
[编辑]宽度与高度
[编辑]表格整体的宽度和高度以及每行的行高全都可以指定。要指定直列的列宽，只需要指定该列任一单元格的宽度就可以。如果有一些直列的列宽或者有一些横行的行高没有特别指定的话，就会陷入不明状态，实际效果视乎浏览器而定。
{| style="width:60%; height:200px" border="1"</span>
|-
| abc || def || ghi
|- style="height:100px;"</span>
| jkl || style="width:200px;" |mno || pqr
|-
| stu || vwx || yz
|}
|
|
要注意在某些浏览器里像“style="width:75%;"”这样的文内CSS会无法生效。如果要确保代码的兼容性，像“width="75%"”这种拥有同等功能的旧式写法可能会在较多的浏览器里生效。
边框
[编辑]表格的边框预设为一种复杂且有底色的双行线（这是HTML的预设），不过也可以利用格式参数（例如“style="border:1px solid darkgray"”）将边框改为一条窄小的实线，例子如下。（注意：在设定边框的同时也想指定单元格边距（cellpadding）或单元格间距（cellspacing）的话，就必须运用以下格式。）
{| cellpadding="2" style="border:1px solid darkgray;"
! width="140" | 左
! width="150" | 中
! width="130" | 右
|- border="0"
| [[File:StarIconBronze.png|120px]]
| [[File:StarIconGold.png|120px|這是滑鼠游標停留在圖片上時會出現的文字]]
| [[File:StarIconGreen.png|120px|綠色星星]]
|- align="center"
| 棕色星星 || 金色星星 || 綠色星星
|}
| |||||||||
|
留意最后一行的文字用“align="center"”改为居中对齐，但星星图片并无居中。
上面的“File:”代码只要不输入thumb参数的话，便不会在表格里显示图片标题（除非鼠标游标停留在图片上）。这里的边框颜色“darkgray”与条目里的普通表格和信息框的一样，不过也可以换成其他颜色名称（例如“style="border:1px solid darkgreen;"”）或十六进制编码（例如“
- DDCCBB”）。
直列的格式代码（以竖线符号“|……|”包围的内容）可以输入格式参数，指定每个单元格的边框样式，例子如下：
{| cellpadding="2" style="border:1px solid darkgray;"
! width="140" | 左
! width="150" | 中
! width="130" | 右
|- align="center"
| style="border:1px solid blue;"|</span> [[File:StarIconBronze.png|120px]]
| style="border:1px solid #777777;"|</span> [[File:StarIconGold.png|120px|這是滑鼠游標停留在圖片上時會出現的文字]]
| style="border:1px solid #22AA55;"| [[File:StarIconGreen.png|120px|綠色星星]]
|- align="center"
| 棕色星星 || 金色星星 || 綠色星星
|}
| |||||||||
|
留意只有放了图片的单元格才有个别的边框，放了文字的单元格并没有。
十六进制编码中越小的就越接近黑色（例如“
- 616161”）。同一表格内的边框通常会采用同一种颜色。
表格定位
[编辑]表格本身、横行的内容和单元格的内容的定位全都可以调校，但没有参数可以同时指定表格里所有内容应如何定位。见元维基上的表格范例。
2009年4月之前曾一度建议不要用“float”（浮动）来指定表格的定位，不过现在在大字体状态下“float”也不一定会破坏页面的显示效果。在下面的“居中的浮动图片”章节可以看到浮动图片的显示效果。
表格浮动
[编辑]floatleft和floatright（区分大小写）这两个表格类别可以让表格浮动，同时调整外边距（margin），让表格不会紧贴周围的文字。floatleft会让表格向左浮动并调整右外边距；floatright则相反。例子如下：
本段落出現於表格之前。因為格式代碼“rowspan=2”會讓第2列裡的文字佔用兩個橫行，因此第2行沒有出現“第2列”的文字，只有“第1列”和“第3列”。
{| class="wikitable floatright"
| 第1列第1行
| rowspan="2" | 第2列第1（及第2）行
| 第3列第1行
|-
| 第1列第2行
| 第3列第2行
|}
{| class="wikitable floatleft"
| 第1列第1行
| rowspan="2" | 第2列第1（及第2）行
| 第3列第1行
|-
| 第1列第2行
| 第3列第2行
|}
本文為測試文字……
| ||||||||||
|
本段落出现于表格之前。因为格式代码“rowspan=2”会让第2列里的文字占用两个横行，因此第2行没有出现“第2列”的文字，只有“第1列”和“第3列”。
本文为测试文字。这段文字用于说明格式，请勿删除。这段文字用于说明格式，请勿删除。海纳百川，有容乃大。维基百科，自由的百科全书。本文为测试文字。这段文字用于说明格式，请勿删除。这段文字用于说明格式，请勿删除。海纳百川，有容乃大。维基百科，自由的百科全书。本文为测试文字。这段文字用于说明格式，请勿删除。这段文字用于说明格式，请勿删除。海纳百川，有容乃大。维基百科，自由的百科全书。本文为测试文字。这段文字用于说明格式，请勿删除。这段文字用于说明格式，请勿删除。海纳百川，有容乃大。维基百科，自由的百科全书。本文为测试文字。这段文字用于说明格式，请勿删除。这段文字用于说明格式，请勿删除。海纳百川，有容乃大。维基百科，自由的百科全书。本文为测试文字。这段文字用于说明格式，请勿删除。这段文字用于说明格式，请勿删除。海纳百川，有容乃大。维基百科，自由的百科全书。本文为测试文字。这段文字用于说明格式，请勿删除。这段文字用于说明格式，请勿删除。海纳百川，有容乃大。维基百科，自由的百科全书。 |
表格居中
[编辑]表格可以居中定位，但并不意味着同时也会“浮动”；即是说，文字并不会就此出现于表格两边。窍门是要使用“{| style="margin:1em auto 1em auto;"”这段代码。
表格之前的文字……
{| class="wikitable" style="margin:1em auto 1em auto;"
|+ '''單元格靠左對齊，表格居中'''
! scope="col" | Duis
! scope="col" | aute
! scope="col" | irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
……表格之後的文字
|
表格之前的文字……
……表格之后的文字 |
嵌套表格
[编辑] | 注意：使用嵌套表格会造成无障碍方面的问题，所以应该尽量避免。 |
下面的示例将七个不同的表格（蓝色）嵌套了在另一个表格的单元格内。表格|A|和|B|B|自动变成直向排列，但是单元格里的文字正常应该横向排列。表格|C|和|D|则利用了“float”，在单元格内各自摆放于一边。同样的方法也可用在图表上。嵌套表格的代码必须在换行后才能输入。
{| border="1"
| α
| style="text-align:center;"| 單元格2
{| border="2" style="background:#ABCDEF;" <!--
嵌套表格的代碼必須在換行後才能輸入 -->
| 嵌套
|-
| 表格
|}
| style="vertical-align:bottom;"| 回到原來的表格
| style="width:100px;" |
{| border="2" style="background:#ABCDEF;"
| A
|}
{| border="2" style="background:#ABCDEF;"
| B || B
|}
| style="width:50px;" |
{| border="2" style="background:#ABCDEF; float:left;"
| C
|}
{| border="2" style="background:#ABCDEF; float:right;"
| D
|}
|}
|
|
卷动表格
[编辑]表格可以整个放进卷动列表里，这样的话新的横行出现于荧幕上时旧的也会同时消失。条目内容应该在不同的浏览界面上都能轻松取阅，但因为卷动表格会隐藏部分内容，所以Wikipedia:格式手册 (卷动列表)不建议在条目名字空间内使用卷动表格，不过在维基百科别的名字空间内则允许。
<div style="width:75%; height:10em; overflow:auto; border:2px solid #088;">
{| style="width:75%; height:200px" border="1"
|-
| abc || def || ghi
|- style="height:100px;"
| jkl || style="width:200px;" | mno || pqr
|-
| stu || vwx || yz
|}
</div>
| |||||||||
|
颜色及参数有效范围
[编辑]下面列出了指定单元格里文字和背景颜色的两种方法：
{|
| style="background:red; color:white" | abc
| def
| bgcolor="red" | <span style="color:white;"> ghi </span>
| jkl
|}
|
|
和其他参数一样，也可以对一整行或者整个表格指定颜色，对横行指定的参数优先于表格的参数，而对单元格指定的参数也会凌驾横行的参数。（留意没有任何简易的方法可以对一整个直列指定颜色，只可以对直列里的每个单元格逐个指定。可考虑使用编辑工具解决。）
{| style="background:yellow; color:green"
|-
| stu || style="background:silver" | vwx || yz
|- style="background:red; color:white"
| stu || style="background:silver" | vwx || yz
|-
| stu || style="background:silver" | vwx || yz
|}
|
|
要让表格和页面背景看起来一致的话，可以用“style="background:none;"”或者“style="background:transparent;"”。（注意：“style="background:inherit;"”在某些浏览器里无法生效，包括IE6！）
要强制让单元格的颜色变得和class="wikitable"模板里的预设颜色一样的话，可以将“style="background:
f2f2f2"”用于较深色的表头文字，而较浅色的主体文字则使用“style="background:f9f9f9"”。
另见：en:Wikipedia:Background color、颜色列表、网页颜色以及Template:Coltit。
单元格设定
[编辑]参数
[编辑]在单元格的开头可以输入参数，之后要加上竖线符号，例如“style="background:red;"|”会将单元格的底色设为红色。要指定更多参数的话，记得在各参数之间留有空格。
{| style="color:white"
|-
| style="background:red;"|單元格1
| style="width:300px; background:blue;"|單元格2
| style="background:green;"|單元格3
|}
|
|
垂直对齐
[编辑]表格内容在垂直对齐方面预设为居中，于是看上去会有一点奇怪：
{| border="1" cellpadding="2" style="width:400px;"
|-
! scope="row" style="width:10%;"| 橫行表頭
| style="width:70%;"|較長的文字：本文為測試文字……
| style="width:20%;"|較短的文字
|-
! scope="row" | 橫行表頭
| 本文為測試文字……
| 較短的文字
|}
|
|
要避免这种情况的话，可以将“valign="top"”参数应用于横行（不过要逐行指定）。
{| border="1" cellpadding="2" style="width:400px;"
|- valign="top"
! scope="row" style="width:10%;" | 橫行表頭
| style="width:70%;"|較長的文字：本文為測試文字……
| style="width:20%;"|較短的文字
|- valign="top"
! scope="row" | 橫行表頭
| 本文為測試文字……
| 較短的文字
|}
|
|
内容缩进
[编辑]单元格的内容可以用CSS样式“padding-left”缩进。
{| border="1" cellpadding="2" width="300px"
|-
| 沒有縮進的單元格內容：本文為測試文字……
|-
| style="padding-left:2em" | 已縮進的內容：本文為測試文字……
|}
|
|
横行设定
[编辑]行高
[编辑]边框
[编辑]水平对齐
[编辑]直列设定
[编辑]列宽
[编辑]直列的列宽预设为该列里最宽内容的宽度，要强制指定列宽的话，可参考以下示例。留意文字会自动换行。
{| border="1" cellpadding="2"
! scope="col" style="width:50px;" | 名稱
! scope="col" style="width:225px;" | 效用
! scope="col" style="width:225px;" | 見於哪幾款遊戲？
|-
| 精靈球 || 普通精靈球 || 所有版本
|-
| 超級球 || 比普通精靈球更佳 || 所有版本
|}
|
|
要在没有直列表头的表格里指定列宽的话，可以在每列的首个单元格里设定宽度。
{| border="1" cellpadding="2"
|-
| style="width:100pt;" | 本列寬度為100點
| style="width:200pt;" | 本列寬度為200點
| style="width:300pt;" | 本列寬度為300點
|-
| blah || blih || bluh
|}
| ||||||
|
另外也可以用百分比来指定，例如要将表格分成两个均等的直列，可以把其中一个列宽指定为“width:50%”。指定列宽的其中一个用处是可以将排列在一起的表格的直列对齐：
|
防止自动换行
[编辑]在宽度横跨整个页面的表格里，一些较窄的单元格内的文字常常会自动换行。要让一整个直列都不再自动换行的话，可以在该列最宽或者内容最长的单元格里（不可以是表头单元格）用“style="white-space:nowrap"”，这样子会对整个直列都有效。
| 不使用“nowrap”时，显示如下： | 使用“nowrap”后，会显示为： | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
进阶范例
[编辑]混杂形式
[编辑] | 注意：使用与以下示例类似的表格会造成无障碍方面的问题，所以应该尽量避免。例如嵌套表格（即表格内含其他表格）应尽量分拆成不同的表格。 |
以下是个更深入的例子，展示了更多制作表格时可用的功能。不过要留意一点，使用“colspan”和“rowspan”合并单元格后，表格会无法正常地进行排序。
用户可以自行制作表格试验以下功能，看一看会得到什么效果。这些技巧并非在所有情况下都适用，举例来说，即使可以添加底色也不代表每次都应该这么做。表格代码应尽量保持简洁，方便其他也在编辑条目的人。总而言之，下面的例子说明了制作表格时可以达到何种效果。
居中表格之前的文字……
{| border="1" cellpadding="5" cellspacing="0" align="center"
|+ '''表格範例'''
|-
! style="background:#efefef;" | 表頭1
! colspan="2" style="background:#ffdead;" | 表頭2
|-
| 左上
|
| rowspan="2" style="border-bottom:3px solid grey;" valign="top" | 右邊
|-
| style="border-bottom:3px solid grey;" | 左下
| style="border-bottom:3px solid grey;" | 中下
|-
| colspan="3" align="center" | 嵌套表格之前的文字……
{| border="0"
|+ ''表格裡的表格''
|-
| align="center" width="150" | [[File:Wiki.png]]
| align="center" width="150" | [[File:Wiki zh-hans.png]]
|-
| align="center" colspan="2" style="border-top:1px solid red;<!--
--> border-right:1px solid red; border-bottom:2px solid red;<!--
--> border-left:1px solid red;" | 兩個維基百科的標誌
|}
……嵌套表格之後的文字
|}
……居中表格之後的文字
| |||||||||||||||
|
居中表格之前的文字……
……居中表格之后的文字 | |||||||||||||||
居中的浮动图片
[编辑]表格可以用来包围图片，这样的话就能向页面中间浮动（例如用“style="float:right;"”），不过表格的外边距、边框和字体大小都必须与图片的正常显示方式吻合。“File:”代码的thumb缩图参数（虽然在自动缩图时宽度会按用户设定而定）会强制性地添加颇大的左外边距，挤走周围的文字，所以可以用center参数来抑制这个左外边距制造的空白。不过有时候“center”会将图片标题挤到下一行去（在居中的框“[]”下面），所以也可以略去“thumb”，改为直接指定图片大小、添加灰色（
- BBB）边框。用准确的参数来符合其他图片的显示方式的话，可以制成以下的浮动图片表格：
{| style="float:right; border:1px solid #BBB; margin:.46em 0 0 .2em;"
|- style="font-size:86%;"
| valign="top" |[[File:DuraEuropos-TempleOfBel.jpg|180px]]<!--
--><br />（浮動的）[[柏爾 (神話)|]]神殿
|}
浮动表格里的文字字体大小指定为“style="font-size:86%;"”。这个图片表格就和正常的图片框一样，也会浮动，不过同时容许调整图片的左外边距（见下面的浮动图片示例）。
| 信息框A | |
|---|---|
| 有了这个信息框范例便可以看到旁边的浮动图片框如何向中间靠拢。 |
 （浮动的）柏尔神殿 |
|
图片标题可以略去，或者可以移除thumb参数，隐藏标题，直到鼠标游标停留在图片上时才显示。不巧的是，（用来显示图片标题的）thumb参数同时也负责自动缩图功能，会将图片缩小至用户设定的大小。要隐藏标题同时保留自动缩图功能的话，可以将“|thumb|”替换为“|frameless|right|”。
图片如果指定了left参数，就会有颇大的右外边距（即是和right参数的左外边距刚好相反），所以要向左浮动的话就需要将图片放在表格里，表格指定为“style="float:left; margin:0.46em 0.2em"”。
别忘记，在图片表格以外的时候，right参数会令图片定位在信息框上面或者下面，但就算不会在信息框旁边浮动。
谨记这条“优先法则”：首先是指定了“right|”的信息框或图片，然后是浮动图片表格，最后如果还有空位的话便是包围着这些物件的文字。假如第一个字太长，就不会有任何文字可以填补左边的空隙，所以要小心避免制造这种“锯齿状的左边空白”，即是说浮动表格旁边剩下的空位塞不下任何文字。
如果有好几个单项图片表格堆叠在一起的话，这些表格会在页面上浮动并按页面宽度定位。周围的文字会被挤压，在自动定位的情况下把这些浮动表格尽量塞进去，到最后左边还能塞下文字的话便放进去并自动换行。
……逐个塞到这一边来 |
……全都按float:right…… |
这些图片…… |
自动定位这一点可以用来建立图片的“浮动展示廊”：一组共20个浮动表格，可以像文字填塞空间般一个一个先从右至左、再从上而下地排列在页面里（留意是从右至左，和正常方向相反）。要循正常方向（即从左至右）定位的话，可以指定表格顶部的参数为“style="float:left; margin:0.46em 0.2em"”，将所有的浮动表格变为向左浮动。只要活用多个浮动图片，就能在文字周围做到更弹性的图片排版效果。
兼用colspan和rowspan
[编辑]
{| border="1" cellpadding="5" cellspacing="0"
|-
| 第1列 || 第2列 || 第3列
|-
| rowspan="2" | A
| colspan="2" style="text-align:center;" | B
|-
| C <!-- 單元格A已佔用第1列 -->
| D
|-
| E
| rowspan="2" colspan="2" style="text-align:center;" |F
|-
| G <!-- 單元格F已佔用第2和第3列 -->
|-
| colspan="3" style="text-align:center;" | H
|}
|
| ||||||||||||||||
留意对单元格G用“rowspan="2"”加上对单元格F用“rowspan="3"”并不会在G和F下面再增添一行，因为这样做的话该行所有（隐含的）单元格都是置空的。同理，如果同一直列的单元格统统都是空的，就整列都不会显示。非置空和置空的单元格之间的边框也可能不会显示（视乎浏览器而定），所以在空的单元格里要用“ ”作占位内容。
特定问题的解决方法
[编辑]对齐小数点
[编辑]下面这个方法可以让一列数字的小数点对齐：
{| cellpadding="0" cellspacing="0"
| align="right" | 432 || .1
|-
| align="right" | 43 || .21
|-
| align="right" | 4 || .321
|}
|
|
即使这一列数字是在含有单元格边距（cellpadding）或单元格间矩（cellspacing）的表格里，还是可以在对齐小数点的同时也避免中间出现碍眼的空隙。在每个数字所出现的单元格里各自再嵌入一个表格，并指定列宽，这些列宽必须全部一样。（假如用这个方法还是无法对齐小数点，最外层的表格可能是列宽太小了。如果是因为这样的话，就用参数指定将列宽加大。）
{| border="1" cellpadding="4" cellspacing="2"
|
{| cellpadding="0" cellspacing="0" style="width:100px;"
|-
| style="text-align:right; width:50%;" | 432 || .1
|}
|-
|
{| cellpadding="0" cellspacing="0" style="width:100px;"
|-
| style="text-align:right; width:50%;" | 43 || .21
|}
|-
|
{| cellpadding="0" cellspacing="0" style="width:100px;"
|-
| style="text-align:right; width:50%;" | 4 || .321
|}
|}
|
|
如果是预格式化文字的话，甚至可以摒弃表格，只需要每行用空格开头，然后用空格来排列数字：
| 代码（只是用了空格！）： | 显示为： | |
|---|---|---|
432.1 43.21 4.321 |
432.1 43.21 4.321 |
不过要留意的是，在条目里要用预格式化的文字的话最好有充分的理由。
表格居中
[编辑]类别
[编辑]在表格代码第一行的“{|”后面，除了可以直接指定样式外，还可以指定类别。这些类别同样可以用来设置样式。这些类别的样式可以用好几种方法指定：
- 在维基百科的软件里指定，不同的皮肤（界面）可以有不同的样式（例如sortable类别）
- 在MediaWiki:Common.css里，会对该特定维基的全部用户生效（例如在英文维基及其他维基计划抑或曾有过、抑或现在仍保留着的wikitable类别，这个类别后来移到shared.css）
- 在不同的皮肤（界面）里分别指定，譬如MediaWiki:Monobook.css
- 在同一个维基里每个用户在自己的用户空间子页指定
- 每个用户在自己的电脑里指定，但用于表格的类别在所有网页中均一并指定
在“{|”后面指定适当类别的话，就不用再记住要输入哪一些表格参数。这样做会让表格的样式变得统一，想修正样式问题或者同时修改使用同一类别的多个表格，只需要修改类别本身就可以。
只要套用“class="wikitable"”，便会把表格的文内CSS替换掉……
|
……变成这样 | |||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| cellpadding="2"
|+ 乘數表
|-
! scope="col" | ×
! scope="col" | 1
! scope="col" | 2
! scope="col" | 3
|-
! scope="row" | 1
| 1 || 2 || 3
|-
! scope="row" | 2
| 2 || 4 || 6
|-
! scope="row" | 3
| 3 || 6 || 9
|-
! scope="row" | 4
| 4 || 8 || 12
|-
! scope="row" | 5
| 5 || 10 || 15
|}
|
|
{|
|+ 乘數表
|-
! scope="col" | ×
! scope="col" | 1
! scope="col" | 2
! scope="col" | 3
|-
! scope="row" | 1
| 1 || 2 || 3
|-
! scope="row" | 2
| 2 || 4 || 6
|-
! scope="row" | 3
| 3 || 6 || 9
|-
! scope="row" | 4
| 4 || 8 || 12
|-
! scope="row" | 5
| 5 || 10 || 15
|}
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||
这是因为MediaWiki:Common.css里的wikitable类别含有几项名为“table.wikitable”的CSS样式规则。只要将表格指定为这个类别，这些样式规则便统统会应用于表格上。之后可以按需要再添加其他样式规则，这些规则会凌驾于类别所指定的那一批，让你可以在类别样式的基础上再随意叠加其他样式。
{| class="wikitable" style="font-style:italic; <!--
-->font-size:120%; border:3px dashed red;"
|+ 乘數表
|-
! scope="col" | ×
! scope="col" | 1
! scope="col" | 2
! scope="col" | 3
|-
! scope="row" | 1
| 1 || 2 || 3
|-
! scope="row" | 2
| 2 || 4 || 6
|-
! scope="row" | 3
| 3 || 6 || 9
|-
! scope="row" | 4
| 4 || 8 || 12
|-
! scope="row" | 5
| 5 || 10 || 15
|}
|
|
留意上面的表格虽然保留了wikitable类别的灰色底色，表头文字也仍然是粗体且居中，但是文字格式已经被表格本身的style声明优先指定了。现在表格里所有的文字都变成了斜体、字体比原来的大了20%，wikitable类别本来指定的外框也变成了红色的虚线框。
当然，这只有在支援文内CSS的浏览器里才会有效。如果要确保一定生效的话，可以用XHTML标记（例如用“<big>”代替“font-size:120%”）或者维基代码（例如用“''text''”代替“font-style:italic”）。
折叠表格
[编辑]类别也可以用来将表格折叠起来，让表格内容预设为隐藏。用collapsible类别就可以启用折叠功能。指定为“collapsible”的表格预设为张开的状态，想改作别的显示状态的话，可以再加上collapsed或者autocollapse类别（后者是指，除了这个表格之外同一页面还有超过三个折叠表格的话，这个表格就用折叠状态显示）。折叠表格必须含有表头横行，因为“显示”和“隐藏”连结会显示在这一行里。例子如下：
{| class="wikitable collapsible collapsed"
! 表頭文字
|-
| 預設為隱藏的內容
|-
| 更多會隱藏的內容
|}
|
|
mw-collapsible类别
[编辑]另外还可以用这两组代码（在MediaWiki版本号1.19rc1下可使用无误，见testwiki:User:Krinkle/CollapsingTestpageMw）：
{| class="wikitable sortable mw-collapsible"
…
|}
|
| ||||
{| class="wikitable sortable mw-collapsible mw-collapsed"
…
|}
|
|
排序
[编辑]要启用表格的排序功能，可以添加“class="sortable"”这段代码，详见Help:排序。排序功能用处极大，所以在制作表格时最好谨记这项功能有什么是可以做到和无法做到的，例如：
- 不要用横跨数行的子标题来将表格细分，而是应该将这些子标题放到另一个直列里，在每行简短地展示。
- 同样地，不要添加横跨数列的内容，而是应该在每一列简短地重复一次这些内容。
- 如果要将数字排在同一直列里的话，不要在这些数字前面或后面添加像“ca.”般的文字，因为会破坏数字排序。如果有直列采用了数字排序的话，不要在这个直列的任何一个单元格里放置文字或字母。尽量别在单元格里放置数值范围（例如“35,000–50,000”）。虽然在数字排序模式下这样做不会影响到排序结果，因为会按每个单元格内的首个数字排序，但是用完这个直列或者其他直列排序后，要是这种含非数字内容的单元格变成在最顶端的话，就会令排序模式变成字母排序。所以应该将这些文字放在另外的直列里。想更弹性地解决这个问题的话，可以添加隐藏排序索引，配合字母排序模式使用。
缩略内容可以在表格以外用索引的形式完整展示。
{| class="wikitable sortable" border="1"
|+ 可排序的表格
|-
! scope="col" | 字母排序
! scope="col" | 數字排序
! scope="col" | 日期排序
! scope="col" class="unsortable" | 不可排序
|-
| d || 20 || 2008-11-24 || 這個
|-
| b || 8 || 2004-03-01 || 直列
|-
| a || 6 || 1979-07-23 || 設定為
|-
| c || 4 || 1492-12-08 || 不可
|-
| e || 0 || 1601-08-13 || 排序
|}
|
|
数字及年份排序的问题
[编辑]参见Help:排序。
排序兼折叠
[编辑]可排序表格也可以同时设定为可折叠，只需要用“{| class="wikitable sortable collapsible"”这段代码。将上面的表格设为可折叠的话会变成下面这样：
{| class="wikitable sortable collapsible" border="1"
|+ 可排序兼可摺疊的表格
|-
! scope="col" | 字母排序
! scope="col" | 數字排序
! scope="col" | 日期排序
! scope="col" class="unsortable" | 不可排序
|-
| d || 20 || 2008-11-24 || 這個
|-
| b || 8 || 2004-03-01 || 直列
|-
| a || 6 || 1979-07-23 || 設定為
|-
| c || 4 || 1492-12-08 || 不可
|-
| e || 0 || 1601-08-13 || 排序
|}
|
|
想将表格预设为折叠状态的话，可以将“{| class="wikitable sortable collapsible collapsed"”改成“{| class="wikitable sortable collapsible"”。
指向表格中特定横行的章节连结或地图连结
[编辑]要将章节连结（或地图里的连结）指向表格中的特定横行的话，可以在该横行开头的“|-”后加上“id="section link anchor name"”这个参数，添加HTML锚：
|- id="章節連結的名稱"
注意锚的名称不能与同一页的其他锚重复（也包括各章节标题），以免得出不合规格的XHTML。
- 地图连结指向表格中特定横行的范例
在按下地图里含连结的国家名称时，例如代码为“[[#Table_row_11|斯洛文尼亞]]”的连结，因为这个连结指向表格中代码为“|- id="Table_row_11"”的锚，于是会卷动页面，将目标横行显示在最上面。
|
|
↦ |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
横行模板
[编辑]不管是用维基代码还是用HTML制作的表格也好，表格里每个横行的代码都会十分类似（有时甚至不同的表格也是这样）。相似的地方有：
- 表格横行的基本代码
- 用来指定颜色、对齐方式和排序模式的代码
- 重复出现的文字，例如量度单位
- 排序所需的特殊格式
在这种情况下，可考虑建立模板来生成表格横行所需的代码，用要列出的内容作为参数。这样做有很多好处：
- 可以轻易修改直列的次序或移除任何直列
- 可以轻易添加直列，即使这个直列有许多内容是置空的（如果添加直列时表格现有的内容都是用非命名参数指定的话，这个新的直列就要用命名参数来避免模板的许多参数值变成置空）
- 可以用其中一些参数值来计算出另一批参数值，例如从人口和面积计算出人口密度
- 可以复制表格内容并且用
<span style="display:none">标签来分别指定排序时和正常显示时用的格式 - 可以轻易对一整个直列指定统一的格式，例如颜色和对齐方式
以下例子套用了Help:表格/example row template这个模板：
{| class="wikitable sortable" border="1"
|-
! scope="col" | a
! scope="col" | b
! scope="col" | a/b
{{Help:表格/example row template| 50|200}}
{{Help:表格/example row template| 8| 11}}
{{Help:表格/example row template|1000| 81}}
|}
|
|
用解析器函数决定是否显示表格横行
[编辑]要用解析器函数决定是否显示表格中某特定横行的话，可以用像这样的代码：
| 代码 | 效果（留意第2行并没有显示） | |||||
|---|---|---|---|---|---|---|
{| class="wikitable" border="1"
<!--
第1行會顯示，因為這個“1”的邏輯值為真。
-->
{{ #if:1|{{!}}-
! scope="row" {{!}} 第1行第1列
<!--
所有的“{{!}}”都會替換為豎線符號“|”，因為Template:!這個模板的內容只是“|”。
-->
{{!}}第1行第2列}}
<!--
第2行並不會顯示，因為“:”和“|”之間的空格的邏輯值為假。
-->
{{ #if: |{{!}}-
! scope="row" {{!}} 第2行第1列
{{!}}第2行第2列}}
<!--
第3行會如常顯示。
-->
|-
! scope="row" {{!}} 第3行第1列
| 第3行第2列
|}
|
|
其他表格代码
[编辑]MediaWiki也支援用下列方法制作表格：
- XHTML
- HTML与“|”竖线符号系列代码两种混合（请勿使用）
这三种方法MediaWiki都支援，而且（现时）都会生成符合规格的HTML代码，不过竖线符号系列代码是最简单的一种。另外，HTML加“|”竖线符号系列代码这种混合用法（即是没有正确地关闭的“|”和“|-”标签），各浏览器将来不一定仍会支援，尤其是用可上网的移动装置浏览的时候。
参见HTML元素#表格。注意MediaWiki现时并不支援<thead>、<tbody>、<tfoot>、<colgroup>、<col>这几个元素。
两种表格代码的区别
[编辑]| XHTML | 维基式竖线符号系列代码 | |||||
|---|---|---|---|---|---|---|
| 表格 | <table></table> |
{|
|}
| ||||
| 表格标题 | <caption>表格標題</caption> |
|+ 表格標題 | ||||
| 横行 | <tr></tr> |
|- | ||||
| 主体单元格 | <td>單元格1</td><td>單元格2</td> <td>單元格3</td> |
| 單元格1 || 單元格2 | 單元格3 | ||||
| 表头单元格 | <th scope="col">直列表頭</th> <th scope="row">橫行表頭</th> |
! scope="col" | 直列表頭 ! scope="row" | 橫行表頭 | ||||
| 表格范例 |
| |||||
<table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> |
{|
| 1 || 2
|-
| 3 || 4
|}
| |||||
| 好处 |
|
| ||||
| 坏处 |
|
| ||||
| XHTML | 维基式竖线符号系列代码 | |||||
参见en:Template talk:For#Tables。
与竖线符号系列代码对应的HTML标签
[编辑]由马格奈斯·曼司克（Magnus Manske）开发的竖线符号系列代码用竖线符号“|”来代替HTML标签。这个网上脚本可以将HTML表格转换成用竖线符号系列代码写成的表格。
在这套代码里，竖线符号必须在新一行开头输入，除了用来将参数和内容分隔开，或者在同一行里用“||”分隔开不同单元格的时候。参数是选填的。
表格
[编辑]表格用以下代码定义：
{| 參數
|}
生成的HTML代码是“<table 参数>...</table>”。
横行
[编辑]在表格内，第一行的HTML标签<tr>会自动生成。要添加新行的话，可以用：
|-
这样会生成另一个“<tr>”标签。
参数可以这样添加：
|- 參數
生成的代码是“<tr 参数>...</tr>”。
注意：
- 在第一个等同于
<td>标签的代码出现的地方，<tr>这个开标签会自动生成。 - 在等同于
</tr>和</table>标签的代码出现的地方，</tr>这个关标签会自动生成。
单元格
[编辑]单元格可以这样生成：
|單元格1 |單元格2 |單元格3
又或者像这样：
|單元格1||單元格2||單元格3
上面两组代码都会生成“<td>单元格1</td><td>单元格2</td><td>单元格3</td>”。在这里“||”等同于换行加“|”。
单元格里的参数可以这样指定：
|參數|單元格1||參數|單元格2||參數|單元格3
这样会生成：
<td 參數>單元格1</td><td 參數>單元格2</td><td 參數>單元格3</td>
表头
[编辑]表头的代码会生成<th>，功能和<td>一样，只是样式不同。“!”取代了横行开头的“|”，“!!”则取代了“||”。参数依然用“|”与内容分隔开。例子如下：
!參數|單元格1
表格标题
[编辑]<caption>标签由以下代码生成：
|+ 表格標題
这样会生成“<caption>表格标题</caption>”这段HTML代码。
同样地，也可以在这里指定参数：
|+ 參數|表格標題
生成的代码是“<caption 参数>表格标题</caption>”。
表格概述
[编辑]只要在表格的开头添加概述属性，就可以生成表格概述。萤幕阅读器可以利用这个概述将表格的大纲提供给有视力障碍的读者，让读者不用听一遍整个表格的内容。例如这段代码：
{| summary="Artistic renderings of Germania became more triumphant and monumental."
| [[File:Philipp Veit 008.jpg|thumb|upright|alt=Robed woman, seated, with sword on her lap|Philipp Veit, ''Germania'', 1834–36]]
| [[File:Image Germania (painting).jpg|thumb|upright|alt=Robed woman, standing, holding a sword|Philipp Veit, ''Germania'', 1848]]
| [[File:Niederwald memorial 2.JPG|thumb|upright|alt=Monument of robed woman, standing, holding a crown in one hand and a partly sheathed sword in another|Johannes Schilling, ''Germania'', 1871–83]]
|}
会显示为：
 |
.jpg) |
 |
单元格模板
[编辑]{{Table cell templates}}提供了一系列的模板，可以用来统一地修改单元格的文字和颜色，例如用“yes”、“no”、“n/a”这些字词。
正方形萤幕
[编辑]要为正方形的萤幕或视窗制作表格的话，可以先用卷尺量度你的长方形萤幕的高度，然后用这个高度来量度萤幕下方，看看如果萤幕变成正方形的话会有多宽。量度时用笔或者胶带标记好这个宽度，接下来把浏览器的视窗大小调整到这个标记的位置，这样的话这个视窗就是准确的正方形了。
正方形的萤幕和视窗容纳不了专为长方形和宽阔的萤幕而设计的表格和图像廊。如果有表格或图像廊是比萤幕还要宽的话，就会令每一行文字也变得特别宽。下面这个图像廊用的像素大小是在量度了正方形视窗之后定下来的：
以下这段代码：
{| style="background: transparent; margin: auto;"
| [[File:Some window blinds.JPG|192x155px|thumb|left|各種百葉窗]]
| [[File:Vert-blinds-2145-rs.jpg|192x170px|thumb|left|垂直排列的百葉窗]]
| [[File:Gardine.jpg|192x155px|thumb|left|這個不是百葉窗]]
|}
{| style="background: transparent; margin: auto;"
| [[File:Vorhang.jpg|192x155px|thumb|left|結實的窗簾]]
| [[File:Jalousie-1.jpg|328x55px|thumb|left|橫向排列的百葉窗]]
|}
{| style="background: transparent; margin: auto;"
| [[File:Some window blinds.JPG|205px|thumb|left|窗簾、百葉窗；垂直和橫向排列的百葉窗]]
| [[File:Miniblinds detail of mechanism.jpg|388px|thumb|left|<!--
-->小型百葉窗附帶的轉桿的近攝圖]]
|}
会显示为：
 |
 |
 |
 |
 |
|
 |
直排的直列表头
[编辑]有些情况下（例如表格内容大部分是数字时），将文字从左向右或右向左的排列方式，改为上至下或下至上会比较好。现时，不同的浏览器在HTML或CSS方面对这种样式的支援程度各不相同（Internet Explorer是当中少数在CSS方面支援这种样式的浏览器之一，不过是非标准的支援）。另一种方法则在绝大部分的浏览器里都通行，就是用图片来代替文字。例如下面的表格用了SVG图片来取代文字，于是直列表头变成从下向上排列：
|
|
|
|
|
|
|
|
|
|
|---|---|---|---|---|---|---|---|---|---|
| 05/08 | 4266 | 7828 | 7282 | 1105 | 224 | 161 | 916 | 506 | 231 |
| 04/08 | 4127 | 6190 | 6487 | 1139 | 241 | 205 | 1165 | 478 | 301 |
通常这样做会有个问题，就是读者按下图片后会到不同的页面去。要解决这个问题，又或者要将读者指向其他页面的话，可以用“link”参数。直列表头可以用这段代码：
! style="width:3em;" | [[File:wpvg vg project.svg|link=xxxx]]
这样的话图片便会连结到“xxxx”指定的页面。
如果link是置空的话（例如“[[File:wpvg hd date page.svg|link=]]”），读者按下图片后并不会到任何页面去。要用图片当连结的话，或者可以将图片里的文字弄成蓝色，提示读者。还有，图片格式建议使用SVG，这样的话图片无论如何放大或缩小都不会变形。
不过更大的问题是，视障人士无法利用萤幕阅读器和类似的装置检阅这种“转动后的文字”，于是就不能“阅读”这些直行表头了。搜索引擎的自动化网络爬虫也同样无法检阅这些文字。
表格用作图像廊
[编辑]表格可以用来将图片并列展示，就像图像廊一样（用<gallery>的话），不过图片会大一点，各图片之间的空隙也比较小。
用“class="wikitable"”就可以设定好样式，生成表格里各图片周围的窄线框，制成简单的带框图像廊：
| 留意单元格带有窄线外框： | ||||||
|---|---|---|---|---|---|---|
{| class="wikitable" border="1"
|-
|<!--第1列-->[[File:Worms 01.jpg|265px]]
|<!--第2列-->[[File:Worms Wappen 2005-05-27.jpg|235px]]
|-
|<!--第1列-->跨越[[萊茵河]]並通向沃爾姆斯的[[尼伯龍根橋]]
|<!--第2列-->[[沃爾姆斯市]]及其姊妹城市
|}
|
|
使用普通的<gallery>标签的另一个问题是，2007年到2008年时，这样做会让每行可放上4张图片，超越了维基百科条目垂直显示（譬如800 × 600像素大小）时右边的页边，除非图像廊只有三张图片或以下。另一方面，表格里用的是正常的图片连结，可以自设图片大小，例如“"[[Image:XXX.jpg|130px]]”，这样的话便可以在宽度为600像素的页面里用表格的一行展示4张图片（在萤幕大小为800 × 600像素的情况下）。
{| class="wikitable" border="1"
|-
|<!--第1列-->[[File:Worms 01.jpg|130px]]
|<!--第2列-->[[File:Worms Wappen 2005-05-27.jpg|125px]]
|<!--第3列-->[[File:Liberty-statue-with-manhattan.jpg|125px]]
|<!--第4列-->[[File:New-York-Jan2005.jpg|125px]]
|-
|<!--第1列-->通向沃爾姆斯的尼伯龍根橋
|<!--第2列-->沃爾姆斯及其姊妹城市
|<!--第3列-->自由神像
|<!--第4列-->紐約市
|}
| ||||||||
|
用表格来展示图片的另一好处是，和<gallery>的样式不同，表格里的图片如果要限制在某一高度内的话，可以用参数调整。图片大小参数用两个数字指定（例如“199x95px”）的话，第二个数字便会限定高度。
{| class="wikitable" border="1"
|-
|<!--第1列-->[[File:Liberty-statue-with-manhattan.jpg|199x95px]]
|<!--第2列-->[[File:New-York-Jan2005.jpg|199x95px]]
|<!--第3列-->[[File:Gold star on blue.gif|199x95px]]
|<!--第4列-->[[File:Worms 01.jpg|100x95px]]<!--尺寸較小-->
|-
|<!--第1列-->自由神像
|<!--第2列-->紐約市
|<!--第3列-->藍色背景下的星星
|<!--第4列-->通向沃爾姆斯的橋
|}
|
留意下面三张大小指定为“199x95px”的图片显示为同一高度，都是95像素高（第四张是故意弄得比较小的）。这个“95px”限制了图片的高度，而“199x”则可以容纳不同的宽度（甚至是“999x”）：
|
即是说，指定大小参数“199x95px”（或者“999x95px”）可以达到<gallery>标签做不到的自动调校高度的效果，可以将缩图的高度扩大（像“199x105px”），甚至可以故意将某些图片弄得比其他95像素高的图片要小。高度变很小（例如“70px”）的话，表格内便可以显示更多图片：
{| class="wikitable" border="1"
|-
|<!--第1列-->[[File:Liberty-statue-with-manhattan.jpg|199x70px]]
|<!--第2列-->[[File:Gold star on blue.gif|199x70px]]
|<!--第3列-->[[File:New-York-Jan2005.jpg|199x70px]]
|<!--第4列-->[[File:Gold star on deep red.gif|199x70px]]
|<!--第5列-->[[File:Worms 01.jpg|199x70px]]<!--同一高度-->
|<!--第6列-->[[File:Gold star on blue.gif|199x70px]]
|}
|
上面的维基代码会显示为下面这个有六行的表格：
|
图片只要放到表格内，要再添加图片的时候便可以控制样式。
挪动图片或居中对齐
[编辑]要挪动表格内的图片，可以在图片连结前后添加不换行空格（“ ”），譬如“ [[Image:]]”这样。要让图片自动居中对齐的话，只需要在图片连结两边添加居中对齐的标签（“<center>[[File:…]]</center>”）。
留意在下面的示例里，第2列用了<center>，第3列则用了“ ”：
{| class="wikitable" border="1"
|-
|<!--第1列-->[[File:Domtoren vanaf Brigittenstraat.jpg|299x125px]]
|<!--第2列--><center>[[File:Utrecht 003.jpg|299x125px]]</center>
|<!--第3列--> [[File:Uitzicht vanaf de Domtoren.jpg |299x125px]]
|-
|<!--第1列-->[[布里吉頓街]]的[[多姆塔]]
|<!--第2列-->[[烏得勒支]][[多姆教堂]]內回廊包圍著的庭院
|<!--第3列--> <small>從鐘樓往下看的景觀</small>
|}
|
上面的代码会显示为下面这个表格。留意中间的庭院图片是居中对齐的（但左边的没有），而右边的图片在“从”字前有两个空格：
|
留意上面的<small>标签使图片标题变小了。字体大小还可以用百分比来指定（像“style="font-size:87%;"”），这个百分比实际显示时会因不同字体可以用的大小而异。
| style="font-size:87%;" | 從鐘樓往下看的景觀
上面这个直列参数就用了“style=”来指定图片标题的大小。“font-size:65%;”会显示很小的字体，而“font-size:87%;”则是中等大小，比<small>标签要大一些。
将表格制成图表
[编辑]用的是en:Template:Visualizer或者{{metavisualizer}}。
将试算表转换成维基式表格
[编辑]要将Gnumeric、MS Excel、OpenOffice.org Calc等类型的试算表转换为维基代码格式的表格的话，可以用这个Copy & Paste Excel-to-Wiki转换器，或者将试算表储存为.csv格式后用这个csv2wikitable转换器。
csv2wp转换器会把逗号分隔值（CSV）格式的内容转换为竖线符号系列代码，可以用来汇入Excel等的表格（详见de:Benutzer:Duesentrieb/csv2wp (en)）。
表格与所见即所得
[编辑]由于维基代码有点复杂（尤其是在制作表格方面），所以常常会有人问有没有任何视觉化编辑器可以简化制作和修改表格的工序。其中一种解决方法是先用HTML编辑器（例如Adobe Dreamweaver）制作表格，然后将生成的HTML代码复制到页面里。
2012年起维基百科开始局部试用视觉化编辑器，不过尚未全面支援编辑表格的功能。技术程度较高或勇以尝试的用户也可以试用WYSIFTW，但留意这个编辑器的使用方式不一定完全是所见即所得。
参见
[编辑]- Help:表格/入门
- Wikipedia:格式手册/表格
- mw:Help:Tables
- mw:Simplified table syntax
- m:Wiki markup tables
- m:Table background colors
- Help:排序
- m:Help:Sorting
- en:User:Dcljr/Tables
- HTML表格
- m:Help:Template#A parameter value containing a pipe character
- Category:表格模板
- 范例：
- 维基共享资源上的图表资源
- 维基共享资源：将表格和图表转换成维基代码或图片档案
外部链接
[编辑]
维基教科书中有关Editing Wikitext/Tables的文本- 维基教科书中有关Editing Wikitext/Tables Ready to Use的文本
- de:Wikipedia:Helferlein/VBA-Macro for EXCEL tableconversion，德语维基百科上的页面（含英语说明）
- HTML表格 → 维基代码转换器，来自波恩大学网站
- Wikitable Editor，使用维基代码、含预览功能的表格编辑工具
- HTML-WikiConverter，有多个版本及语言
- pywikipediabot，可以将HTML表格转换成维基代码
- CSS颜色名称及十六进制编码列表
