表格语法
表格语法
无边框表格
介绍
无边框表格在默认情况下无论有多少个表头都会直接铺满整个页面。
效果展示：
| 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 |
复合表格
充分利用|-的换行效果可以实现一些复杂的表格。
| 列表头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
|-
|}
