查看“表格语法”的源代码

__NOTOC__
<div class="mdtLayout mdtLight mdtWrapRail">

<div class="mdtMain">
=表格语法=

<h2 class="mdtFoldHeading" style="margin:0 0 8px 0;">无边框表格<span class="mdtFold"></span></h2>
===介绍===

无边框表格在默认情况下无论有多少个表头都会直接铺满整个页面。

效果展示：

{| class="mdtSideTable"
! A !! B
|-
| C || D
|}

<br/>
{| class="mdtSideTable"
! A !! B !! C  !! D !! E !! F !! G
|-
| H || I || G || K || L || M || N
|}

===表格格式===

<h4 class="mdtFoldHeading" style="margin:0 0 8px 0;">概述<span class="mdtFold"></span></h4>
该表格格式主要由'''表壳'''、'''表头'''、'''表体'''和'''分隔符'''组成，除此之外还有'''标题'''与'''样式'''。

该表格的空表壳如下：
<pre>
{| class="mdtSideTable"
|}
</pre>

需要注意的是，该表格需要在<code><nowiki><div class="mdtLayout mdtLight"></nowiki></code>下才会显示网格线，用法如下：
<pre>
<div class="mdtLayout mdtLight">
{| class="mdtSideTable"
|}
</div>
</pre>

表头格式为<code>!</code>，两表头间分隔符为<code>!!</code>，表头内分隔符为<code>|</code>。

表体格式为<code>|</code>，两表体间分隔符为<code>||</code>。

标题格式为<code>|+</code>。

换行分隔符为<code>|-</code>，换行分隔符会使表格的后续内容进入到下一行。

表格宽度可以使用<code>style="width:"</code>进行限制， 具体用法如下：
<pre>
{| class="mdtSideTable" style="width:300px"
|}
</pre>

<br/>
<h4 class="mdtFoldHeading" style="margin:0 0 8px 0;">横向表格<span class="mdtFold"></span></h4>

横向表格的表头为横向排列，一般列多行少。

{| class="mdtSideTable"
! 表头1 !! 表头2 !! 表头3
|-
| 内容1 || 内容2 || 内容3
|}

其用法之一如下：
<pre>
{| class="mdtSideTable"
! 表头1 !! 表头2 !! 表头3
|-
| 内容1 || 内容2 || 内容3
|}
</pre>

另一用法如下：
<pre>
{| class="mdtSideTable"
! 表头1
! 表头2
! 表头3
|-
| 内容1 
| 内容2
| 内容3
|}
</pre>

这两种用法可以混合使用，不会影响实际效果。不过在表头或表体较短时推荐使用第一个格式，即通过分隔符隔开，这样的可读性更高。

如果想要扩展表格可以增加<code>!</code>或<code>!!</code>，这样可以扩展表头从而扩展表格，例如下表：

{| class="mdtSideTable"
! 表头1 !! 表头2 !! 表头3 !! 表头4
|-
| 内容1 || 内容2 || 内容3 || 内容4
|}

其用法如下：
<pre>
{| class="mdtSideTable"
! 表头1 !! 表头2 !! 表头3 !! 表头4
|-
| 内容1 || 内容2 || 内容3 || 内容4
|}
</pre>

<br/>
<h4 class="mdtFoldHeading" style="margin:0 0 8px 0;">纵向表格<span class="mdtFold"></span></h4>

纵向表格的表头为纵向排列，一般行多列少。

{| class="mdtSideTable"
! 表头1
| 内容1
|-
! 表头2
| 内容2
|-
! 表头3
| 内容3
|}

其用法如下：
<pre>
{| class="mdtSideTable"
! 表头1
| 内容1
|-
! 表头2
| 内容2
|-
! 表头3
| 内容3
|}
</pre>

如果想要扩展表格可以增加<code>!</code>，这样可以扩展表头从而扩展表格，例如下表：

{| class="mdtSideTable"
! 表头1
| 内容1
|-
! 表头2
| 内容2
|-
! 表头3
| 内容3
|-
! 表头4
| 内容4
|}

其用法如下：
<pre>
{| class="mdtSideTable"
! 表头1
| 内容1
|-
! 表头2
| 内容2
|-
! 表头3
| 内容3
|-
! 表头4
| 内容4
|}
</pre>

<br/>
<h4 class="mdtFoldHeading" style="margin:0 0 8px 0;">交叉表格<span class="mdtFold"></span></h4>

交叉表格的行与列上都有表头。

{| class="mdtSideTable"
! 列表头/行表头 !! 行表头1 !! 行表头2 !! 行表头3
|-
! 列表头1
| 内容1 || 内容2 || 内容3
|-
! 列表头2
| 内容4 || 内容5 || 内容6
|-
! 列表头3
| 内容7 || 内容8 || 内容9
|}

其用法为：
<pre>
{| class="mdtSideTable"
! 列表头/行表头 !! 行表头1 !! 行表头2 !! 行表头3
|-
! 列表头1
| 内容1 || 内容2 || 内容3
|-
! 列表头2
| 内容4 || 内容5 || 内容6
|-
! 列表头3
| 内容7 || 内容8 || 内容9
|}
</pre>

<br/>
<h4 class="mdtFoldHeading" style="margin:0 0 8px 0;">空表头与空表体<span class="mdtFold"></span></h4>

表头与表体并不一定要填入内容，这两个是可以为空的，例如下表：

{| class="mdtSideTable"
! !! 表头1 !! !! 表头2
|-
| 内容1 || || 内容2 ||
|}

其用法为：
<pre>
{| class="mdtSideTable"
! !! 表头1 !! !! 表头2
|-
| 内容1 || || 内容2 ||
|}
</pre>

<br/>
<h4 class="mdtFoldHeading" style="margin:0 0 8px 0;">复合表格<span class="mdtFold"></span></h4>

充分利用<code>|-</code>的换行效果可以实现一些复杂的表格。

{| class="mdtSideTable"
! 列表头1
| 内容1
|-
! 列表头2
| 内容2
|-
! !! 列表头/行表头 !! 行表头1 !! 行表头2
|-
! !! 列表头3
| 内容3 || 内容4
|-
! !! 列表头4
| 内容5 || 内容6
|}

其用法如下：
<pre>
{| class="mdtSideTable"
! 列表头1
| 内容1
|-
! 列表头2
| 内容2
|-
! !! 列表头/行表头 !! 行表头1 !! 行表头2
|-
! !! 列表头3
| 内容3 || 内容4
|-
! !! 列表头4
| 内容5 || 内容6
|}
</pre>

该表格本质为如下两个表格拼接而成，一个为纵向表格，另一个为交叉表格。

{| class="mdtSideTable"
! 列表头1
| 内容1
|-
! 列表头2
| 内容2
|}

该纵向表格用法如下：
<pre>
{| class="mdtSideTable"
! 列表头1
| 内容1
|-
! 列表头2
| 内容2
|}
</pre>

{| class="mdtSideTable"
! !! 列表头/行表头 !! 行表头1 !! 行表头2
|-
! !! 列表头3
| 内容3 || 内容4
|-
! !! 列表头4
| 内容5 || 内容6
|}

该交叉表格用法如下：
<pre>
{| class="mdtSideTable"
! !! 列表头/行表头 !! 行表头1 !! 行表头2
|-
! !! 列表头3
| 内容3 || 内容4
|-
! !! 列表头4
| 内容5 || 内容6
|}
</pre>

<br/>
<h4 class="mdtFoldHeading" style="margin:0 0 8px 0;">跨行与跨列表头<span class="mdtFold"></span></h4>
跨列表头或表体用法为<code>colspan=""</code>。

跨行表头或表体用法为<code>rowspan=""</code>。

含跨列表头表格示例如下：

{| class="mdtSideTable"
! 表头1 !! colspan="2" | 表头2 
|-
| 内容1 || 内容2 || 内容3
|}

其用法为：
<pre>
{| class="mdtSideTable"
! 表头1 !! colspan="2" | 表头2 
|-
| 内容1 || 内容2 || 内容3
|}
</pre>

含跨行表头表格示例如下：

{| class="mdtSideTable"
! rowspan="2"  | 表头1
| 内容1
|-
| 内容2
|-
! 表头3
| 内容3
|-
! 表头4
| 内容4
|}

其用法如下：
<pre>
{| class="mdtSideTable"
! rowspan="2"  | 表头1
| 内容1
|-
| 内容2
|-
! 表头3
| 内容3
|-
! 表头4
| 内容4
|}
</pre>

<br/>
<h4 class="mdtFoldHeading" style="margin:0 0 8px 0;">带标题表格<span class="mdtFold"></span></h4>

标题格式为<code>|+</code>，默认居中。

含标题表格示例如下：
{| class="mdtSideTable"
|+ 标题
! 表头1
| 内容1
|-
! 表头2
| 内容2
|}

其用法如下：
<pre>
{| class="mdtSideTable"
|+ 标题
! 表头1
| 内容1
|-
! 表头2
| 内容2
|}
</pre>

标题默认是居中的，如果想将标题左对齐可以使用<code>style="text-align: left;"</code>，例如下表：
{| class="mdtSideTable"
|+ style="text-align: left;" | 标题
! 表头1
| 内容1
|-
! 表头2
| 内容2
|}

其用法如下：
<pre>
{| class="mdtSideTable"
|+ style="text-align: left;" | 标题
! 表头1
| 内容1
|-
! 表头2
| 内容2
|}
</pre>

<br/>
<h4 class="mdtFoldHeading" style="margin:0 0 8px 0;">可折叠表格<span class="mdtFold"></span></h4>

可折叠表格的空表壳为：
<pre>
{| class="mdtSideTable mw-collapsible mw-collapsed"
|}
</pre>

除了需要使用可折叠表格的空表壳外，还需要使用标题，例如下表：

{| class="mdtSideTable mw-collapsible mw-collapsed"
|+ 标题
! 表头1
| 内容1
|-
! 表头2
| 内容2
|}

其用法如下：
<pre>
{| class="mdtSideTable mw-collapsible mw-collapsed"
|+ 标题
! 表头1
| 内容1
|-
! 表头2
| 内容2
|}
</pre>

<br/>
<h4 class="mdtFoldHeading" style="margin:0 0 8px 0;">左对齐与右对齐表格<span class="mdtFold"></span></h4>

表格左对齐格式为<code>style="float: left;"</code>，右对齐格式为<code>style="float: right;"</code>。

表格右对齐示例如下：
{| class="mdtSideTable" style="float: right; width:300px"
! 表头1
| 内容1
|-
! 表头2
| 内容2
|}

<br/><br/><br/>
其用法如下：
<pre>
{| class="mdtSideTable" style="float: right; width:300px"
! 表头1
| 内容1
|-
! 表头2
| 内容2
|}
</pre>

<br/>

<h2 class="mdtFoldHeading" style="margin:0 0 8px 0;">表格内文本语法<span class="mdtFold"></span></h2>

在表格外就能使用的文本语法大都能在表格内使用，所以此处就不再提及。

<br/>
<h3 class="mdtFoldHeading" style="margin:0 0 8px 0;">左对齐与右对齐<span class="mdtFold"></span></h3>

表头或标题文本左对齐格式为<code>style="text-align: left;"</code>，右对齐格式为<code>style="text-align: right;"</code>，居中格式为<code>style="text-align: center;"</code>。

表体文本左对齐格式为<code>style="text-align: left !important;"</code>，右对齐格式为<code>style="text-align: right !important;"</code>，居中格式为<code>style="text-align: center !important;"</code>。

含表头文本右对齐表格示例如下：
{| class="mdtSideTable"
!  style="text-align: right;" |  表头1
| 内容1
|-
|}

用法如下：
<pre>
{| class="mdtSideTable"
!  style="text-align: right;" |  表头1
| 内容1
|-
|}
</pre>

含表体文本右对齐表格示例如下：
{| class="mdtSideTable"
! 表头1
| style="text-align: right !important;" | 内容1
|-
|}

用法如下：
<pre>
{| class="mdtSideTable"
! 表头1
| style="text-align: right !important;" | 内容1
|-
|}
</pre>

</div>

</div>