Help:表格:修订间差异

来自Arcaea中文维基
无编辑摘要
 
(未显示同一用户的11个中间版本)
第17行: 第17行:


==Pipe语法教程==
==Pipe语法教程==
Pipe代码功能与HTML表格标记完全相同。 如果你熟悉HTML语言,你可以跳过这一部分。
*'''表格起始'''由大括号({和})及竖线字符(|)组成。{|表示表格开始,|}表示表格结束。每个表格必须有完整的开始符与结束符。
{|
|-
|
<span style="color: #a63;">'''<nowiki>{|</nowiki>'''</span> 表格内容 <span style="color: #a63;">'''<nowiki>|}</nowiki>'''</span>
|}
*'''表格标题'''可省略。其由一个竖线和加号(+)组成(|+)。其后即添加标题内容。
{|
|-
|
<nowiki>{|</nowiki>
<span style="color: #a63;">'''<nowiki>|+</nowiki> 标题'''</span><br>
表格内容
<nowiki>|}</nowiki>
|}
*'''添加新行'''由一个竖线和连字符(-)组成(|-)。添加该代码后,表格代码将转至下一行。<!--本站发生的无数恐怖的表格bug大多由漏了|-导致。-->
{|
|-
|
<nowiki>{|</nowiki> <br>
<nowiki>|+</nowiki> 表格标题<br>
<span style="color: #a63;">'''<nowiki>|-</nowiki>'''</span><br>
第一行内容<br>
<span style="color: #a63;">'''<nowiki>|-</nowiki>'''</span><br>
第二行内容<br>
<nowiki>|}</nowiki>
|}
*'''单元格'''由竖线组成。在某一行代码后添加竖线即会在该行添加一个单元格。若各行单元格数量不等,则空出。
{|
|-
|
<nowiki>{|</nowiki><br>
<nowiki>|+</nowiki> 表格标题<br>
<nowiki>|-</nowiki><br>
<span style="color: #a63;">'''&#124;'''</span> 第一行第一个单元格<br>
<nowiki>|-</nowiki><br>
<span style="color: #a63;">'''&#124;'''</span> 第二行第一个单元格<br>
<span style="color: #a63;">'''&#124;'''</span> 第二行第二个单元格<br>
<nowiki>|}</nowiki>
|}
上述代码实际显示会是这样:
{|
|+ 表格标题
|-
| 第一行第一个单元格
|-
| 第二行第一个单元格
| 第二行第二个单元格
|}
:同一行的单元格也可通过两个竖线写于代码中的同一行中,以缩短版面。
{|
|-
|
<nowiki>{|</nowiki><br>
<nowiki>|+</nowiki> 表格标题<br>
<nowiki>|-</nowiki><br>
<span style="color: #a63;">'''&#124;单元格1 <nowiki>||</nowiki> 单元格2 <nowiki>||</nowiki> 单元格3'''</span><br>
<nowiki>|-</nowiki><br>
<span style="color: #a63;">'''&#124;单元格A'''</span><br>
<span style="color: #a63;">'''&#124;单元格B'''</span><br>
<span style="color: #a63;">'''&#124;单元格C'''</span><br>
<nowiki>|}</nowiki>
|}
上述代码实际显示会是这样:
{|
|+ 表格标题
|-
|单元格1 || 单元格2 || 单元格3
|-
|单元格A
|单元格B
|单元格C
|}
:单元格代码中的单个竖线字符是无法形成新单元格的。两个竖线字符或头一个单个竖线字符,与另一个竖线字符之间的代码可成为紧接着的一个单元格的格式设置代码,但可省略。余下竖线字符及其他均归入一个单元格中,并显示出来。
{|
|-
|
<nowiki>{| border="1"</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>|format modifier (格式设置不显示)</nowiki> <span style="color: #a63;">'''&#124;'''</span><nowiki>余下所有内容</nowiki> <span style="color: #a63;">'''&#124;'''</span><nowiki>(包括竖线)</nowiki> <span style="color: #a63;">'''&#124;'''</span><nowiki>将归入</nowiki> <span style="color: #a63;">'''&#124;'''</span><nowiki>第一个单元格||第二个单元格</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>|format </nowiki> <span style="color: #a63;">'''&#124;'''</span><nowiki>余下所有内容</nowiki> <span style="color: #a63;">'''<nowiki>||</nowiki>'''</span><nowiki>format</nowiki> <span style="color: #a63;">'''&#124;'''</span><nowiki>将归入</nowiki> <span style="color: #a63;">'''&#124;'''</span><nowiki>第二个单元格</nowiki><br>
<nowiki>|}</nowiki>
|}
上述代码实际显示会是这样:
{| border="1"
|-
|format modifier (格式设置不显示) |余下所有内容 |(包括竖线)|将归入 |第一个单元格||第二个单元格
|-
|format |余下所有内容 ||format |将归入 |第二个单元格
|}
:例如,可进行靠右,颜色等设置。
{|
|-
|
<nowiki>{| border="1"</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>| 单元格1(设置缺损)</nowiki><br>
<nowiki>|-</nowiki><br>
<span style="color: #a63;">'''<nowiki>| align="right" |</nowiki>'''</span> 单元格2(靠右) <span style="color: #a63;">'''<nowiki>|| style="background: #FFB6C1" |</nowiki>'''</span> 单元格3(红底色)<br>
<nowiki>|}</nowiki>
|}
上述代码实际显示会是这样:
{| border="1"
|-
| 单元格1(设置缺损)
|-
| align="right" | 单元格2(靠右) || style="background: #FFB6C1" | 单元格3(红底色)
|}
:即两个||之间的|不能超过1个。
*'''列标题'''通过以“! scope="col" |”取代“|”,“!! scope="col" |”取代“||”实现。列标题单元格通常与普通单元格不同,虽然会因为浏览器的不同而有所差异,但往往呈现为粗体和居中。
{|
|-
|
<nowiki>{|</nowiki><br>
<nowiki>|+</nowiki> 表格标题<br>
<span style="color: #a63;">'''<nowiki>!</nowiki> scope="col" &#124; 列标题1'''</span><br>
<span style="color: #a63;">'''<nowiki>!</nowiki> scope="col" &#124; 列标题2'''</span><br>
<span style="color: #a63;">'''<nowiki>!</nowiki> scope="col" &#124; 列标题3'''</span><br>
<nowiki>|-</nowiki><br>
<span style="color: #a63;">'''<nowiki>!</nowiki> scope="col" &#124; 列标题1 <nowiki>!!</nowiki> scope="col" &#124; 列标题2 <nowiki>!!</nowiki> scope="col" &#124; 列标题3'''</span><br>
<nowiki>|-</nowiki><br>
&#124; 单元格1 &#124;&#124; 单元格2 &#124;&#124; 单元格3<br>
<nowiki>|}</nowiki>
|}
上述代码实际显示会是这样:
{|
|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="col" | 列标题1 !! scope="col" | 列标题2 !! scope="col" | 列标题3
|-
| 单元格1 || 单元格2 || 单元格3
|}
*'''行标题'''通过将每行代码第一个单元格代码的第一个“|”取代为“! scope="row" |”实现。
{|
|-
|
<nowiki>{|</nowiki>
<nowiki>|+</nowiki> 表格标题<br>
<nowiki>!</nowiki> scope="col" &#124; 列标题1<br>
<nowiki>!</nowiki> scope="col" &#124; 列标题2<br>
<nowiki>!</nowiki> scope="col" &#124; 列标题3<br>
<nowiki>|-</nowiki><br>
<span style="color: #a63;">'''! scope="row" &#124; 行标题1'''</span><br>
&#124; 单元格2 <nowiki>||</nowiki> 单元格3<br>
<nowiki>|-</nowiki><br>
<span style="color: #a63;">'''! scope="row" &#124; 行标题A'''</span><br>
&#124; 单元格B<br>
&#124; 单元格C<br>
<nowiki>|}</nowiki>
|}
上述代码实际显示会是这样:
{|
|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1
| 单元格2 || 单元格3
|-
! scope="row" | 行标题A
| 单元格B
| 单元格C
|}
*'''可选参数'''可设置单元格、行或整个表格。在表格未使用可选参数时是没有边框的,可使用border代码添加边框。
{|
|-
|
<nowiki>{|</nowiki> <span style="color: #a63;">'''border="1"'''</span>
<nowiki>|+</nowiki> 表格标题<br>
<nowiki>!</nowiki> scope="col" &#124; 列标题1<br>
<nowiki>!</nowiki> scope="col" &#124; 列标题2<br>
<nowiki>!</nowiki> scope="col" &#124; 列标题3<br>
<nowiki>|-</nowiki><br>
<nowiki>!</nowiki> scope="row" &#124; 行标题1<br>
&#124; 单元格2 <nowiki>||</nowiki> 单元格3<br>
<nowiki>|-</nowiki><br>
<nowiki>!</nowiki> scope="row" &#124; 行标题A<br>
&#124; 单元格B<br>
&#124; 单元格C<br>
<nowiki>|}</nowiki>
|}
上述代码实际显示会是这样:
{| border="1"
|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1
| 单元格2 || 单元格3
|-
! scope="row" | 行标题A
| 单元格B
| 单元格C
|}
<br>
:但通常使用的表格并不使用边框,而直接使用维基样式“wikitable”。
{|
|-
|
<nowiki>{|</nowiki> <span style="color: #a63;">'''class="wikitable"'''</span>
<nowiki>|+</nowiki> 表格标题<br>
<nowiki>!</nowiki> scope="col" &#124; 列标题1<br>
<nowiki>!</nowiki> scope="col" &#124; 列标题2<br>
<nowiki>!</nowiki> scope="col" &#124; 列标题3<br>
<nowiki>|-</nowiki><br>
<nowiki>!</nowiki> scope="row" &#124; 行标题1<br>
&#124; 单元格2 <nowiki>||</nowiki> 单元格3<br>
<nowiki>|-</nowiki><br>
<nowiki>!</nowiki> scope="row" &#124; 行标题A<br>
&#124; 单元格B<br>
&#124; 单元格C<br>
<nowiki>|}</nowiki>
|}
:所以,一般使用的典型表格如下:
<center>
{| class="wikitable"
|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1
| 单元格2 || 单元格3
|-
! scope="row" | 行标题A
| 单元格B
| 单元格C
|}
</center>
===表格样式===
另外,维基表格的class参数可以添加不同的参数用于实现不同类型的表格,已知的有''wikitable''(通常的表格), ''sortable'' (附加排序功能,行标题会出现排序按钮),''mw-collapsible''(附加折叠功能,生成没折叠的表格)、''mw-collapsed''(附加折叠功能,与前一个参数同时使用,生成已折叠的表格)。在没class参数时,会生成没边框的表格。
{|
|-
|<pre>
<nowiki>
{| class=" wikitable mw-collapsible "
!A!!B!!C
|-
| abc || def || ghi
|-
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}
</nowiki>
</pre>||<pre>
<nowiki>
{| class="wikitable sortable"
!A!!B!!C
|-
|data-sort-value=abc|abc || def || ghi
|-
|data-sort-value=jkl|jkl ||  mno || pqr
|-
|data-sort-value=stu|stu || vwx || yz
|}
</nowiki>
</pre>||<pre>
<nowiki>
{| class=" wikitable mw-collapsible "
!A!!B!!C
|-
| abc || def || ghi
|-
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}
</nowiki>
</pre>||<pre>
<nowiki>
{| class="wikitable mw-collapsible  mw-collapsed"
!A!!B!!C
|-
| abc || def || ghi
|-
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}
</nowiki>
</pre> 
|}
上述代码实际显示会是这样:
{| class="wikitable"
!A!!B!!C
|-
| abc || def || ghi
|-
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}
{| class="wikitable sortable"
!A!!B!!C
|-
|data-sort-value=abc|abc || def || ghi
|-
|data-sort-value=jkl|jkl ||  mno || pqr
|-
|data-sort-value=stu|stu || vwx || yz
|}
{| class="wikitable mw-collapsible "
!A!!B!!C
|-
| abc || def || ghi
|-
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}
{| class="wikitable mw-collapsible  mw-collapsed"
!A!!B!!C
|-
| abc || def || ghi
|-
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}
=== 宽高 ===
可对整个表格的宽度与高度,及某行的高度进行设置。要设置某列的宽度可通过设置该列的某个单元格的宽度实现。若表格的宽度不足以显示所有的列,或高度不足以显示所有的行,表格的部分内容可能会缺失,其结果取决于浏览器的不同。
设置于{|后,为整个表格;设置于|-后,为该行;设置于|或||后,并与该单元格内容之间以|分隔,则为该单元格。
整个表格的高度一般都设定为固定值(单位为px、em等),某行的高度设定可以设为固定值也可以为一个变量。
#高度为固定值

2020年8月19日 (三) 11:36的最新版本

(待填坑)
你瞧瞧如果你直接把维百的页面复制过来会出多少红链

使用工具栏

在编辑源代码状态下,点击上方工具栏内高级-->“插入”右侧第三个按钮可快速插入表格。默认情况下快速插入表格如下所示:

标题文字 标题文字 标题文字
示例 示例 示例
示例 示例 示例
示例 示例 示例

调整快速插入的表格参数,并调整表格内内容与源代码,你就可以获得一个有意义的表格。

Pipe语法教程

Pipe代码功能与HTML表格标记完全相同。 如果你熟悉HTML语言,你可以跳过这一部分。

  • 表格起始由大括号({和})及竖线字符(|)组成。{|表示表格开始,|}表示表格结束。每个表格必须有完整的开始符与结束符。

{| 表格内容 |}

  • 表格标题可省略。其由一个竖线和加号(+)组成(|+)。其后即添加标题内容。

{| |+ 标题
表格内容 |}

  • 添加新行由一个竖线和连字符(-)组成(|-)。添加该代码后,表格代码将转至下一行。

{|
|+ 表格标题
|-
第一行内容
|-
第二行内容
|}

  • 单元格由竖线组成。在某一行代码后添加竖线即会在该行添加一个单元格。若各行单元格数量不等,则空出。

{|
|+ 表格标题
|-
| 第一行第一个单元格
|-
| 第二行第一个单元格
| 第二行第二个单元格
|}

上述代码实际显示会是这样:

表格标题
第一行第一个单元格
第二行第一个单元格 第二行第二个单元格


同一行的单元格也可通过两个竖线写于代码中的同一行中,以缩短版面。

{|
|+ 表格标题
|-
|单元格1 || 单元格2 || 单元格3
|-
|单元格A
|单元格B
|单元格C
|}

上述代码实际显示会是这样:

表格标题
单元格1 单元格2 单元格3
单元格A 单元格B 单元格C


单元格代码中的单个竖线字符是无法形成新单元格的。两个竖线字符或头一个单个竖线字符,与另一个竖线字符之间的代码可成为紧接着的一个单元格的格式设置代码,但可省略。余下竖线字符及其他均归入一个单元格中,并显示出来。

{| border="1"
|-
|format modifier (格式设置不显示) |余下所有内容 |(包括竖线) |将归入 |第一个单元格||第二个单元格
|-
|format |余下所有内容 ||format |将归入 |第二个单元格
|}

上述代码实际显示会是这样:

余下所有内容 |(包括竖线)|将归入 |第一个单元格 第二个单元格
余下所有内容 将归入 |第二个单元格


例如,可进行靠右,颜色等设置。

{| border="1"
|-
| 单元格1(设置缺损)
|-
| align="right" | 单元格2(靠右) || style="background: #FFB6C1" | 单元格3(红底色)
|}

上述代码实际显示会是这样:

单元格1(设置缺损)
单元格2(靠右) 单元格3(红底色)


即两个||之间的|不能超过1个。
  • 列标题通过以“! scope="col" |”取代“|”,“!! scope="col" |”取代“||”实现。列标题单元格通常与普通单元格不同,虽然会因为浏览器的不同而有所差异,但往往呈现为粗体和居中。

{|
|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="col" | 列标题1 !! scope="col" | 列标题2 !! scope="col" | 列标题3
|-
| 单元格1 || 单元格2 || 单元格3
|}

上述代码实际显示会是这样:

表格标题
列标题1 列标题2 列标题3
列标题1 列标题2 列标题3
单元格1 单元格2 单元格3
  • 行标题通过将每行代码第一个单元格代码的第一个“|”取代为“! scope="row" |”实现。

{| |+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1
| 单元格2 || 单元格3
|-
! scope="row" | 行标题A
| 单元格B
| 单元格C
|}

上述代码实际显示会是这样:

表格标题
列标题1 列标题2 列标题3
行标题1 单元格2 单元格3
行标题A 单元格B 单元格C
  • 可选参数可设置单元格、行或整个表格。在表格未使用可选参数时是没有边框的,可使用border代码添加边框。

{| border="1" |+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1
| 单元格2 || 单元格3
|-
! scope="row" | 行标题A
| 单元格B
| 单元格C
|}

上述代码实际显示会是这样:

表格标题
列标题1 列标题2 列标题3
行标题1 单元格2 单元格3
行标题A 单元格B 单元格C


但通常使用的表格并不使用边框,而直接使用维基样式“wikitable”。

{| class="wikitable" |+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1
| 单元格2 || 单元格3
|-
! scope="row" | 行标题A
| 单元格B
| 单元格C
|}

所以,一般使用的典型表格如下:
表格标题
列标题1 列标题2 列标题3
行标题1 单元格2 单元格3
行标题A 单元格B 单元格C

表格样式

另外,维基表格的class参数可以添加不同的参数用于实现不同类型的表格,已知的有wikitable(通常的表格), sortable (附加排序功能,行标题会出现排序按钮),mw-collapsible(附加折叠功能,生成没折叠的表格)、mw-collapsed(附加折叠功能,与前一个参数同时使用,生成已折叠的表格)。在没class参数时,会生成没边框的表格。

 

{| class=" wikitable mw-collapsible "
!A!!B!!C 
|-
| abc || def || ghi
|- 
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|} 

 

{| class="wikitable sortable"
!A!!B!!C 
|-
|data-sort-value=abc|abc || def || ghi
|- 
|data-sort-value=jkl|jkl ||  mno || pqr
|-
|data-sort-value=stu|stu || vwx || yz
|} 

 

{| class=" wikitable mw-collapsible "
!A!!B!!C 
|-
| abc || def || ghi
|- 
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|} 

 

{| class="wikitable mw-collapsible  mw-collapsed"
!A!!B!!C 
|-
| abc || def || ghi
|- 
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|} 

上述代码实际显示会是这样:

A B C
abc def ghi
jkl mno pqr
stu vwx yz
A B C
abc def ghi
jkl mno pqr
stu vwx yz
A B C
abc def ghi
jkl mno pqr
stu vwx yz
A B C
abc def ghi
jkl mno pqr
stu vwx yz

宽高

可对整个表格的宽度与高度,及某行的高度进行设置。要设置某列的宽度可通过设置该列的某个单元格的宽度实现。若表格的宽度不足以显示所有的列,或高度不足以显示所有的行,表格的部分内容可能会缺失,其结果取决于浏览器的不同。

设置于{|后,为整个表格;设置于|-后,为该行;设置于|或||后,并与该单元格内容之间以|分隔,则为该单元格。

整个表格的高度一般都设定为固定值(单位为px、em等),某行的高度设定可以设为固定值也可以为一个变量。

  1. 高度为固定值