帮助:Table2
出自Full Circle 中文项目主页
 |
这是一篇从英文翻译成中文的翻译文章 若您愿意参与本文的简体中文翻译工作，或者认为此條目的翻译需要修订或进一步增补，请勇于更新页面，作出您的贡献。如果您不知道如何开始，请参看编辑指南。（为避免翻译冲突，请务必先参看本页面讨论页上的翻译状态） 如果发生编辑冲突，请将您的翻译先保存在本机，稍后查看变更之处再更新。 |
目录 |
文章第一部分
例子
简单的例子
二者会给出同样的输出. 根据每行单元格数和单元格中的文本内容选择一个风格。
您所输入的:
{|
| A
| B
|-
| C
| D
|}
{|
| A || B
|-
| C || D
|}
您将看到的:
A B C D
乘法表
您所输入的:
{| class="wikitable" style="text-align:center"
|+乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 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
| bgcolor="red" | <font color="white"> ghi </font>
| 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" or style="background:transparent". (注意:
一部分浏览器不支持style="background:inherit",包括 IE6!)
为使单元格与class="wikitable" 模版匹配, 令style="background:#f2f2f2" 以生成深色标题, 令 style="background:#f9f9f9" 以生成浅色正文. 参见: 风格,背景, 颜色列表, 页面颜色
设置宽和高
像编辑行高一样，也可以编辑整张表的宽和高. 为编辑整张表的列宽可以表中编辑任意单元格的宽。如果宽度不是针对所有列，或者高度不是针对所有行，那么生成的效果可能不止一种，会因浏览器而不同。
您所输入的:
{| style="width:75%; height:200px" border="1"
|-
| abc || def || ghi
|- style="height:100px"
| jkl || style="width:200px" |mno || pqr
|-
| stu || vwx || yz
|}
您将看到的:
abc def ghi jkl mno pqr stu vwx yz
注意 一些浏览器不支持 style="inline CSS". 考虑到兼容性问题, 多采用大多数浏览器支持的等效设置，比如 width="75%".
列宽设置
如果您不想迁就根据一列中最长文本宽度而产生的默认列宽的话，可以按照以下步骤设置您自己所期望的列宽。注意，文字重叠是强制性的。
您所输入的:
{| border="1" cellpadding="2"
!width="50"|Name
!width="225"|Effect
!width="225"|Games Found In
|-
|Poké Ball || Regular Poké Ball || All Versions
|-
|Great Ball || Better than a Poké Ball || All Versions
|}
您将看到的:
Name Effect Games Found In Poké Ball Regular Poké Ball All Versions Great Ball Better than a Poké Ball All Versions
要设置列宽并不带标题, 只需编辑每列的第一个单元格就可以 比如:
{| border="1" cellpadding="2"
|-
|width="100pt"|本列宽100 points
|width="200pt"|本列宽200 points
|width="300pt"|本列宽300 points
|-
|blah || blih || bluh
|}
本列宽100 points 本列宽200 points 本列宽300 points blah blih bluh
设置列宽的一个典型应用是连续表格中的列对齐:
| 国家 | 首都 |
|---|---|
| 中国 | 北京 |
| 国家 | 首都 |
|---|---|
| 荷兰 | 阿姆斯特丹 |
| 国家 | 首都 |
|---|---|
| 法国 | 巴黎 |
文章第二部分
设置边界
表格边界默认为有复杂阴影的双线（HTML中的默认形式），然而也可以通过样式参数(style="border:1px solid darkgray")将边界设为细实线，如下所示：
{| cellpadding="2" style="border:1px solid darkgray;"
!width="140"|Left
!width="150"|Middle
!width="130"|Right
|- border=0
| [[Image:StarIconBronze.png|120px]]
| [[Image:StarIconGold.png|120px|Caption when mouse-over image]]
| [[Image:StarIconGreen.png|120px|Green stellar icon]]
|- align=center
|Bronze star || Gold star || Green star
|}
Note the bottom-row texts are centered by "align=center" while star-images were not centered.
| Left | Middle | Right |
|---|---|---|
| 120px | Caption when mouse-over image | Green stellar icon |
| Bronze star | Gold star | Green star |
只要"Image:"忽略了"thumb|"参数，表格中不会显示标题行（只在鼠标经过时）。边界颜色"darkgray"符合常规表格和信息盒；但是你还可以使用任何名字（比如style="border:1px solid darkgreen;"）活使用16进制颜色（例如：#DDCCBB）。
列格式定义（包含在"|...|"中）可以使用一个参数设定每个单元格的边界，比如：
{| cellpadding="2" style="border:1px solid darkgray;"
!width="140"|Left
!width="150"|Middle
!width="130"|Right
|- align=center
| style="border:1px solid blue;"|
[[Image:StarIconBronze.png|120px]]
| style="border:1px solid #777777;"|
[[Image:StarIconGold.png|120px|Caption when mouse-over image]]
| style="border:1px solid #22AA55;"|<!--greenish border-->
[[Image:StarIconGreen.png|120px|Green stellar icon]]
|- align=center
|Bronze star || Gold star || Green star
|}
注意只有图像单元格在这里可以有单独边界，文本单元格没有。
| Left | Middle | Right |
|---|---|---|
| Bronze star | Gold star | Green star |
较小的16进制颜色（颜色：#616161）更接近黑色。通常来说，表格中所有边界都使用同一种颜色。
垂直方向对齐
默认表格中数据在垂直方向是居中对齐的，不过这样看起来效果很差：
| Row heading | A longer piece of 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. | short text |
| Row heading | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Imagine someone scrolling down the page, seeing the tops of "empty" columns, and wondering why they're empty. Use "valign=top" to align text at the top of columns. | short text |
要改变这个，在行中（很不幸似乎需要对每行都加上这个参数）使用valign="top"参数。例如：
{| border="1" cellpadding="2" width=400px
|-valign="top"
|width="10%"|'''Row heading'''
|width="70%"|A longer piece of text. Lorem ipsum...
|width="20%"|short text
|-valign="top"
|'''Row heading'''
|Excepteur sint occaecat...
|short text
|}
| Row heading | A longer piece of 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. | short text |
| Row heading | Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Imagine someone scrolling down the page, seeing the tops of "empty" columns, and wondering why they're empty. Use "valign=top" to align text at the top of columns. | short text |
定位
你可以对表格进行定位，将所有内容放在一行中、一个单元格中，而不用对表格中的所有内容使用一个参数，参看M:Template talk:Table demo。在任何情况下都不要使用"float"来定位表格，那样会在字体较大是破坏页面渲染效果。
Mélange
这里有更高阶的例子为你展示制作表格的更多选项。注意在和跨行标记和和并列sorting一起不能正常工作。
你可以自建表格测试这些设置看看都会出现什么效果。这些技术不一定在每种情况下都有效；因为你可以添加彩色背景的时候这就不是什么好主意。尽量保持表格标记简单——记住，后面还会有人编辑这些内容。下面的例子可以给你一个答题印象：
wiki标记代码:
{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''An example table'''
|-
! style="background:#efefef;" | First header
! colspan="2" style="background:#ffdead;" | Second header
|-
| upper left
|
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
right side
|-
| style="border-bottom:3px solid grey;" | lower left
| style="border-bottom:3px solid grey;" | lower middle
|-
| colspan="3" align="center" |
{| border="0"
|+''A table in a table''
|-
| align="center" width="150px" | [[Image:Wiki.png]]
| align="center" width="150px" | [[Image:Wiki.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;" |
Two Wikimedia logos
|}
|}
在你浏览器中的样子是:
An example table First header Second header upper left right side
lower left lower middle
A table in a table 
Two Wikimedia logos
文章第三部分
浮动表格
The wiki markup coding:
维基标记代码如下
This paragraph is before the table. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod...
{| align="right" border="1"
| 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 "rowspan=2" so there
is no coding for "Col 2" in the 2nd row, just: Col 1 & Col 3.
What it looks like in your browser:
浏览器显示如下
This paragraph is before the table. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...
Col 1, row 1 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 "rowspan=2" so there is no coding for "Col 2" in the 2nd row, just: Col 1 & Col 3.
中心浮动图像
表格可能用于围绕图像，以及它能浮动在页面中心（例如使用 style="float: right;"）。因此，表格的边距，边框和字体大小必须精确设置来匹配典型的图像显示。图像规格参数 "thumb|"（尽管会自动缩图到用户参数设置的宽度）强制设置成足够宽的左边距以致挤压附近的文本，因此参数"center|"被添加来抑制左边距的填充。但是"center"有时会将标题推倒第二行（中心方框"[]"之下），因此"thumb|"常被被省略和对图像尺寸进行硬编码，并加入灰色(#CCC)边框。为了使用精确的参数来匹配其他图像，一个浮动图像的表格编码如下：
{| style="float:right; border:1px solid #CCC;margin:.46em 0 0 .2em"
|- style="font-size:86%"
| valign="top" |[[Image:DuraEuropos-TempleOfBel.jpg|180px]]<!--
--><br> Temple of [[Bel (mythology)|Bel]] (floating).
|}
浮动表格中文本大小由 style="font-size:86%"来设置。浮动图像表浮动在一个标准的图像框中，并且允许适应图像的左边距（请看如下浮动的范例）。
| Infobox A | |
|---|---|
| This sample infobox shows how the floating image-box aligns toward the center. |
| 180px Temple of Bel (floating). |
标题文本可以被省略，或删除参数"thumb|"，以致标题只有在鼠标悬停时显示。不幸的是参数"thumb|"（用于显示标题）也可以控制自动缩略到由用户参数设置重定义大小的图像。在2009四月之前，是不可能自动缩略大小的同时也能隐藏标题的。如今，参数"thumb|"能同时触发这两个动作和强制显示标题。
一张图像使用参数"left|"设置时将会增加很宽的左边距（参数"right|"产生相反的边距），因此左浮动要求在设置为style="float:left;margin:0.46em 0.2em"的表格中将图像设置为"center|"
回忆下，在图像表之外，参数"right|"可以调整图片在infobox之上或之下，但不能浮动在infobox旁边.
注意优先权的顺序：首先是使用 参数"right|"的infobox或图像；然后是浮动表格；最后是任何以适应的文本。如果第一文本词太长了，则没有文本完全匹配左手边，因此当没有足够空间是文本匹配浮动表格式应小心创建一个排齐的左边距。
如果多个单一的图像表重叠了，他们根据页面宽度浮动以调整匹配页面。文本将别压缩以允许尽可能多的浮动表格，自动调整，然后从左边被文本围绕。
| 105px ...by float:right |
| 105px ...images wrap... |
| 105px All these... |
自动调整功能将被用于创建浮动画廊：一套20个浮动表格缠绕着（反向，从右到左）正如每个表格是一个文本词一样缠绕整个页面。按标准方向缠绕（从左往右缠绕）来界定所有的浮动表格，来代替使用顶端参数 style="float:left; margin:0.46em 0.2em" 的居左表格。复合浮动图像允许多种围绕文本的排版方式。
嵌套表
五个不同的（蓝色）表格来展示嵌套表格。两个表格|A| 和 |B|B| 自动水平调整来而不是通常的文本并排排列。浮动用来调整表格|C| 和 |D|'在单元格的位置。它可以被用于图表和计划表中。嵌套表必须另起一行。
Wiki markup
维基标记
{| border="1"
| α
| align="center" | cell2
{| border="2" style="background:#ABCDEF;" <!-- The nested table must be on a new line -->
| NESTED
|-
| TABLE
|}
| valign="bottom" | the original table again
| 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
|}
|} What it looks like in your browser
浏览器显示如下
| α | cell2
| the original table again |
|
|
文章第四部分
跨列标记和跨行标记的使用
Wiki 标记的使用
{| border="1" cellpadding="5" cellspacing="0"
|-
| Column 1 || Column 2 || Column 3
|-
| rowspan="2"| A
| colspan="2" align="center"| B
|-
| C <!-- column 1 occupied by cell A -->
| D
|-
| E
| rowspan="2" colspan="2" align="center"| F
|-
| G <!-- column 2+3 occupied by cell F -->
|-
| colspan="3" align="center"| H
|}
浏览器效果预览
| Column 1 | Column 2 | Column 3 |
| A | B | |
| C | D | |
| E | F | |
| G | ||
| H | ||
Note that using rowspan="2" for cell G combined with rowspan="3" for cell F to get another row below G and F won't work, because all (implicit) cells would be empty. Likewise complete columns are not displayed if all their cells are empty. Borders between non-empty and empty cells might be also not displayed (depending on the browser), use to fill an empty cell with dummy content.
居中表格
可以实现非浮动的居中表格，也就是说所有文字都不会再同一边。方法是：{| style="margin: 1em auto 1em auto"
wiki标记
{| class="wikitable" style="margin: 1em auto 1em auto"
|+ '''Cells left-aligned, table centered'''
! Duis || aute || 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. |
设置参数
在单元格开头，在单管道符号后接参数。例如 width="300"|将单元格宽度设为300像素。多个参数之间使用空格，像下面这样：
{| style="color:white"
|-
| bgcolor="red"|cell1 || width="300" bgcolor="blue"|cell2
| bgcolor="green"|cell3
|}
浏览器中的样子就是:
| cell1 | cell2 | cell3 |
小数点对齐
让列中内容按照小数点对齐可以使用下面方法：
{| cellpadding="0" cellspacing="0"
|align="right"| 432 || .1
|-
|align="right"| 43 || .21
|-
|align="right"| 4 || .321
|}
浏览器中的样子就是:
432 .1 43 .21 4 .321
表格列中数字单元格使用了填充的话，你仍然可以在间隙不可见的情况下实现小数点对齐。在每个数字单元格中嵌入表格。将嵌入表格的列宽设为和单元格列宽相同。（这样之后小数点仍然不能对齐的话，原因可能是主表的列宽太小。你需要增加住标的列宽）。wiki标记如下：
{|border="1" cellpadding="4" cellspacing="2"
|
{|cellpadding="0" cellspacing="0" width="100px"
|align="right" width="50%"| 432 ||width="50%"| .1
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100px"
|align="right" width="50%"| 43 ||width="50%"| .21
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100px"
|align="right" width="50%"| 4 ||width="50%"| .321
|}
|}
浏览器中是这样:
432 .1
43 .21
4 .321
简单情况下免除这个表格特性而只需要以空格开始即可，并使用空格来定位数字：
432.1 43.21 4.321
