表格语法

表格语法

无边框表格

介绍

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

效果展示：

A	B
C	D

A	B	C	D	E	F	G
H	I	G	K	L	M	N

表格格式

概述

该表格格式主要由表壳、表头、表体和分隔符组成，除此之外还有标题与样式。

该表格的空表壳如下：

{| class="mdtSideTable"
|}

需要注意的是，该表格需要在<div class="mdtLayout mdtLight">下才会显示网格线，用法如下：

<div class="mdtLayout mdtLight">
{| class="mdtSideTable"
|}
</div>

表头格式为!，两表头间分隔符为!!，表头内分隔符为|。

表体格式为|，两表体间分隔符为||。

标题格式为|+。

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

表格宽度可以使用style="width:"进行限制， 具体用法如下：

{| class="mdtSideTable" style="width:300px"
|}

横向表格

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

表头1	表头2	表头3
内容1	内容2	内容3

其用法之一如下：

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

另一用法如下：

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

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

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

表头1	表头2	表头3	表头4
内容1	内容2	内容3	内容4

其用法如下：

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

纵向表格

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

表头1	内容1
表头2	内容2
表头3	内容3

其用法如下：

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

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

表头1	内容1
表头2	内容2
表头3	内容3
表头4	内容4

其用法如下：

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

交叉表格

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

列表头/行表头	行表头1	行表头2	行表头3
列表头1	内容1	内容2	内容3
列表头2	内容4	内容5	内容6
列表头3	内容7	内容8	内容9

其用法为：

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

空表头与空表体

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

	表头1		表头2
内容1		内容2

其用法为：

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

复合表格

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

列表头1	内容1
列表头2	内容2
	列表头/行表头	行表头1	行表头2
	列表头3	内容3	内容4
	列表头4	内容5	内容6

其用法如下：

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

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

列表头1	内容1
列表头2	内容2

该纵向表格用法如下：

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

	列表头/行表头	行表头1	行表头2
	列表头3	内容3	内容4
	列表头4	内容5	内容6

该交叉表格用法如下：

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

跨行与跨列表头

跨列表头或表体用法为colspan=""。

跨行表头或表体用法为rowspan=""。

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

表头1	表头2
内容1	内容2	内容3

其用法为：

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

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

表头1	内容1
	内容2
表头3	内容3
表头4	内容4

其用法如下：

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

带标题表格

标题格式为|+，默认居中。

含标题表格示例如下：

标题

表头1	内容1
表头2	内容2

其用法如下：

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

标题默认是居中的，如果想将标题左对齐可以使用style="text-align: left;"，例如下表：

标题

表头1	内容1
表头2	内容2

其用法如下：

{| class="mdtSideTable"
|+ style="text-align: left;" | 标题
! 表头1
| 内容1
|-
! 表头2
| 内容2
|}

可折叠表格

可折叠表格的空表壳为：

{| class="mdtSideTable mw-collapsible mw-collapsed"
|}

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

标题

表头1	内容1
表头2	内容2

其用法如下：

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

左对齐与右对齐表格

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

表格右对齐示例如下：

表头1	内容1
表头2	内容2

其用法如下：

{| class="mdtSideTable" style="float: right; width:300px"
! 表头1
| 内容1
|-
! 表头2
| 内容2
|}

表格内文本语法

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

左对齐与右对齐

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

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

含表头文本右对齐表格示例如下：

表头1	内容1

用法如下：

{| class="mdtSideTable"
!  style="text-align: right;" |  表头1
| 内容1
|-
|}

含表体文本右对齐表格示例如下：

表头1	内容1

用法如下：

{| class="mdtSideTable"
! 表头1
| style="text-align: right !important;" | 内容1
|-
|}