帮助:表格
一个 表格 是一个用于组织和定位数据的列和行的排列。表格对于这个目的非常有用，并且存在许多不同的样式和技巧，可以用来定制每个表格。本页面提供有关如何在维基教科书中构建表格的语法的信息。
使用工具栏
要自动插入表格，请点击 
在 编辑工具栏 上。
点击按钮并接受默认值后，将插入以下文本
{| class="wikitable"
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}
| 标题文本 | 标题文本 | 标题文本 |
|---|---|---|
| 示例 | 示例 | 示例 |
| 示例 | 示例 | 示例 |
| 示例 | 示例 | 示例 |
示例文本（“标题文本”或“示例”）将被替换为实际数据。在点击“插入表格”按钮后出现的初始对话框中，可以自定义列数和行数。
语法教程
|
| ||||||||||||||||||||||||||||||||||||||||||
如果你使用单竖线，那么看起来像第一个单元格的实际上是应用于单元格的格式修饰符，其余的“单元格”将合并成一个
{| style="border:1px;"
|-
|format modifier (not displayed) |These all |(including the pipes) |go into |the first cell
|}
这可能不是你想要的
| 所有这些 |（包括管道）| 都进入 | 第一个单元格 |
但是，格式修饰符很有用
{| style="border:1px;"
|-
| Cell 1 (no modifier—not aligned)
|-
| style="text-align: right;" | Cell 2 (right aligned)
|}
| 单元格 1（无修饰符 - 不对齐） |
| 单元格 2（右对齐） |
请记住：一行中不超过 2 个单竖线！
一行 列标题 通过使用 “! scope="col" |" 而不是 "|" 来标识，并且使用 "!! scope="col" |" 而不是 "||"。标题单元格通常以与常规单元格不同的方式呈现，具体取决于浏览器。它们通常以粗体字并居中呈现。
{|
|+ The table's caption
! scope="col" | Column heading 1
! scope="col" | Column heading 2
! scope="col" | Column heading 3
|-
| Cell 1 || Cell 2 || Cell 3
|-
| Cell A
| Cell B
| Cell C
|}
一行中的第一个单元格通过以 “! scope="row" |" 而不是 "|" 开头来标识为 行标题，并在新行上开始后续数据单元格。
{|
|+ The table's caption
! scope="col" | Column heading 1
! scope="col" | Column heading 2
! scope="col" | Column heading 3
|-
! scope="row" | Row heading 1
| Cell 2 || Cell 3
|-
! scope="row" | Row heading A
| Cell B
| Cell C
|}
可选 参数 可以修改单元格、行或整个表格的行为。例如，可以向表格添加边框
{| border="1"
|+ The table's caption
! scope="col" | Column heading 1
! scope="col" | Column heading 2
! scope="col" | Column heading 3
|-
! scope="row" | Row heading 1
| Cell 2 || Cell 3
|-
! scope="row" | Row heading A
| Cell B
| Cell C
|}
最终的表格将显示如下
| 列标题 1 | 列标题 2 | 列标题 3 |
|---|---|---|
| 行标题 1 | 单元格 2 | 单元格 3 |
| 行标题 A | 单元格 B | 单元格 C |
每行必须与其他行具有相同数量的单元格，以便表格中的列数保持一致。对于空单元格，请使用不间断空格 作为内容以确保单元格显示。要显示单元格中可见的管道，请使用<nowiki>|</nowiki>或者|.
简单示例
这两个都生成相同的输出。根据每行中的单元格数量和每个单元格内的总文本选择样式。
维基标记代码
{|
| A
| B
|-
| C
| D
|}
{|
| A || B
|-
| C || D
|}
它在浏览器中显示的样子
| A | B |
| C | D |
标准格式
你可以添加class="wikitable"在{|表格开始处，以便应用标准格式，该格式将背景颜色应用于表格标题，并在单元格之间以及表格周围添加边框。
{| class="wikitable" style="text-align: center; width: 200px; height: 200px;"
|+ Multiplication table
|-
! 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
|}
以及它在浏览器中的显示方式
| × | 1 | 2 | 3 |
|---|---|---|---|
| 1 | 1 | 2 | 3 |
| 2 | 2 | 4 | 6 |
| 3 | 3 | 6 | 9 |
| 4 | 4 | 8 | 12 |
| 5 | 5 | 10 | 15 |
颜色
为单个单元格指定文本和背景颜色的方法如下。
维基标记代码
{|
| style="background: red; color: white" | abc
| def
| style="background: red; color: white" | ghi
| jkl
|}
它在浏览器中显示的样子
| abc | def | ghi | jkl |
与其他参数一样，也可以为整行或整个表格指定颜色；行的参数会覆盖表格的值，单元格的参数会覆盖行的参数。（请注意，没有简单的方法可以为整列指定颜色 - 必须单独指定列中每个单元格的颜色。）
维基标记代码
{| style="background: yellow; color: green"
|-
| abc || def || ghi
|- style="background: red; color: white"
| jkl || mno || pqr
|-
| stu || style="background: silver" | vwx || yz
|}
它在浏览器中显示的样子
| abc | def | ghi |
| jkl | mno | pqr |
| stu | vwx | yz |
要使表格与背景融合，请使用 style="background: none;" 或 style="background: transparent;"。
要强制单元格与 class="wikitable" 的默认颜色之一匹配，请对较暗的标题使用 style="background: #f2f2f2"，对较亮的正文使用 style="background: #f9f9f9"。
宽度，高度
可以指定整个表格的宽度和高度，以及行的高度。要指定列的宽度，可以指定其中任意单元格的宽度。如果未为所有列指定宽度，或未为所有行指定高度，则会存在一些歧义，结果取决于浏览器。
维基标记代码
{| style="width: 75%; height: 200px;" class="wikitable"
|-
| abc || def || ghi
|- style="height:100px;"
| jkl || style="width:200px;" | mno || pqr
|-
| stu || vwx || yz
|}
它在浏览器中显示的样子
| abc | def | ghi |
| jkl | mno | pqr |
| stu | vwx | yz |
设置列宽
要强制列宽符合特定要求，而不是接受列中单元格中最宽文本元素的宽度，请遵循以下示例。请注意，文本环绕 将被强制。
维基标记代码
{| class="wikitable"
! scope="col" style="width:50px;" | Name
! scope="col" style="width:225px;" | Effect
! scope="col" style="width:225px;" | Games Found In
|-
| Poké Ball || Regular Poké Ball || All Versions
|-
| Great Ball || Better than a Poké Ball || All Versions
|}
| 名称 | 效果 | 发现的游戏 |
|---|---|---|
| 精灵球 | 普通精灵球 | 所有版本 |
| 高级球 | 比精灵球更好 | 所有版本 |
要在没有标题的表格中设置列宽，请在每列的第一个单元格中指定宽度，如下所示
{| class="wikitable"
|-
| style="width:100px;" | This column is 100 pixels wide
| style="width:200px;" | This column is 200 pixels wide
| style="width:300px;" | This column is 300 pixels wide
|-
| blah || blih || bluh
|}
| 此列宽为 100 像素 | 此列宽为 200 像素 | 此列宽为 300 像素 |
| blah | blih | bluh |
设置边框
表格边框默认为复杂阴影双线（HTML 中的默认值）；但是，可以通过使用样式参数（style="border: 1px solid darkgray"）将这些边框设置为细实线，如以下所示（注意：如果你打算将 'cellpadding' 或 'cellspacing' 选项与边框一起使用，则必须使用此格式）
{| cellpadding="2" style="border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Middle
! style="width: 130px;" | Right
|- style="border:none;"
| [[File:StarIconBronze.png|120px]]
| [[File:StarIconGold.png|120px|Caption when mouse-over image]]
| [[File:StarIconGreen.png|120px|Green stellar icon]]
|- style="text-align:center;"
| Bronze star || Gold star || Green star
|}
请注意，底行文本通过style="text-align: center;"居中，而星形图像没有居中。
| 左 | 中 | 右 |
|---|---|---|
|
|
|
| 青铜星 | 金星 | 绿星 |
只要 文件 省略参数 "thumb"，它们就不会显示边框。边框颜色 "darkgray" 与使用class="wikitable"上面显示的颜色匹配；但是，它可以是任何颜色名称（例如style="border: 1px solid darkgreen;"）或使用十六进制颜色（例如：#DDCCBB）。有关十六进制颜色的信息，请参阅 网页颜色，它们允许你指定任何你喜欢的色调。
列格式说明符（用 "|...|" 括起来）可以具有样式参数，以设置每个单元格的边框，如下所示
{| cellpadding="2" style="border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Middle
! style="width: 130px;"| Right
|- style="text-align: center;"
| style="border: 1px solid blue;"|
[[File:StarIconBronze.png|120px]]
| style="border: 1px solid #777777;"|
[[File:StarIconGold.png|120px|Caption when mouse-over image]]
| style="border: 1px solid #22AA55;"|
[[File:StarIconGreen.png|120px|Green stellar icon]]
|- style="text-align: center;"
|Bronze star || Gold star || Green star
|}
请注意，只有图像单元格在这里具有单独的边框，文本没有。
| 左 | 中 | 右 |
|---|---|---|
|
|
|
|
| 青铜星 | 金星 | 绿星 |
较低的十六进制颜色（例如：#616161）更接近黑色。通常，表格中的所有边框都将是相同的颜色。
垂直对齐
默认情况下，表格中的数据垂直对齐到单元格的中间，这会导致如下布局
| 行标题 | 更长的文本段落。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | 短文本 |
|---|
要解决此问题，请将style="vertical-align: top;"应用于行（不幸的是，需要单独将其应用于每行）。例如
{| class="wikitable" style="width: 400px;"
|- style="vertical-align: top;"
! scope="row" style="width: 10%;" | Row heading
| style="width: 70%;" | A longer piece of text. Lorem ipsum...
| style="width: 20%;" | short text
|- style="vertical-align: top"
! scope="row" | Row heading
| Excepteur sint occaecat...
| short text
|}
| 行标题 | 更长的文本段落。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | 短文本 |
|---|
浮动表格
维基标记编码
This paragraph is before the table. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod...
{| style="float: right;" class="wikitable"
| Col 1, row 1
| rowspan="2" | Col 2, row 1 (and 2)
| Col 3, row 1
|-
| Col 1, row 2
| Col 3, row 2
|}
Note the floating-table to the right.
This paragraph is after the table. The text in column 2
will span both rows due to format specifier <tt>"rowspan=2"</tt> so there
is no coding for "Col 2" in the 2nd row, just: Col 1 & Col 3.
它在浏览器中显示的样子
本段位于表格之前。Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...
| 列 1，行 1 | 列 2，行 1（和 2） | 列 3，行 1 |
| 列 1，行 2 | 列 3，行 2 |
请注意右侧的浮动表格。
本段位于表格之后。列 2 中的文本将跨越两行，因为格式说明符为“rowspan=2”，因此在第二行中没有“列 2”的编码，只有：列 1 和列 3。
表格居中
可以实现居中表格，但它们不会“浮动”；也就是说，表格两侧不会出现任何文字。诀窍是{| style="margin: 1em auto 1em auto;"
维基标记
{| class="wikitable" style="margin: 1em auto 1em auto;"
|+ '''Cells left-aligned, table centered'''
! scope="col" | Duis
! scope="col" | aute
! scope="col" | irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
它在浏览器中显示的样子
| Duis | aute | irure |
|---|---|---|
| dolor | in reprehenderit | in voluptate velit |
| esse cillum dolore | eu fugiat nulla | pariatur. |
可折叠表格
您可以创建一个可以折叠隐藏的表格。添加class="collapsible"到表格顶部或在 "wikitable" 之后添加 "collapsible" 以启用折叠行为。默认情况下，可折叠表格将从折叠状态开始。要更改此行为，请包含附加的类 'selected'。您必须包含一个标题行，其中将显示展开和折叠的控件。示例
{| class="wikitable collapsible selected"
! Header
|-
| Content which starts shown
|-
| Click the header row to collapse
|}
给予
| 标题 |
|---|
| 显示的初始内容 |
| 单击标题行以折叠 |
可排序表格
可以通过添加class="sortable"来使表格可排序。由于这非常有用，因此在设计表格时，明智的做法是牢记此功能的可能性和局限性。例如
- 不要通过跨越多行的子标题将表格划分为多个部分。相反，可以添加一列，以简短形式显示这些标题的每个行的内容。
- 不要使用跨越多个列的元素；同样，再次以简短形式在每行中重复内容。
- 在数字列中，不要在数字前面添加 "ca." 等文本 - 它将被排序为零。不要在数字之后添加文本，也不要添加数字范围。相反，将这些文本放在单独的列中。
可以将缩写内容的完整形式放在表格外部作为图例。
维基标记
{| class="wikitable sortable"
|+ Sortable table
|-
! scope="col" | Alphabetic
! scope="col" | Numeric
! scope="col" | Date
! scope="col" class="unsortable" | Unsortable
|-
| d || 20 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}
它在浏览器中显示的样子
| 字母顺序 | 数字顺序 | 日期顺序 | 不可排序 |
|---|---|---|---|
| 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 | 排序。 |