Help:表格：修订间差异

'''表格'''（{{lang-en|'''table'''}}）是一种在页面中非常常见的内容形式，用于呈现以二维形式组织的数据。表格有专门的HTML语法，在MediaWiki中，wikitext也可以用来产生表格。在编辑源代码时，编辑工具栏中的[[File:OOjs UI icon table.svg|alt=]]表格按钮可以很方便地创建表格，你也可以手动输入wikitext语法来创建表格。可视化编辑器也可以创建表格，并且能够很方便地合并单元格、插入或删除行列。本页主要介绍表格的wikitext语法，不多介绍在可视化编辑器中的用法。

下面这个表格的宽度为80%，这是一个相对值，意味着表格将占用容器宽度的80%。其中，第一列的宽度为2em，这是一个绝对值，无论容器的大小是多少，第1列的宽度都是3em。不难推断出，第2列将占用表格的剩余的空间。

| <mark>style="width:3em" |</mark> 1行1列

| style="width:3em" | 1行1列

-{}-{| class="wikitable" <mark>style="width: calc(100% - 2em)"</mark>

{| class="wikitable" style="width: calc(100% - 2em)"

==== 表格相对外部的对齐 ====

表格相对外部元素的对齐的方式是不确定的，会取决于不同的皮肤。<code>margin</code>样式可以指定表格在页面中应该如何对齐，例如下面这个例子中，表格是右对齐的：

-{}-{| class="wikitable" <mark>style="margin-left: auto; margin-right: 0"</mark>

|+ 右对齐的表格

! 标题1 !! 标题2 !! 标题3

{| class="wikitable" style="margin-left: auto; margin-right: 0"

|+ 右对齐的表格

! 标题1 !! 标题2 !! 标题3

如果指定<code>margin-left: 0</code>、<code>margin-right: 0</code>，或者直接指定<code>margin: 0</code>，那么表格会向居中对齐：

-{}-{| class="wikitable" <mark>style="margin: auto"</mark>

|+ 右对齐的表格

! 标题1 !! 标题2 !! 标题3

|-

| 内容1 || 内容2 || 内容3

|-

| 内容4 || 内容5 || 内容6

|}

{| class="wikitable" style="margin: auto"

|+ 右对齐的表格

! 标题1 !! 标题2 !! 标题3

|-

| 内容1 || 内容2 || 内容3

|-

| 内容4 || 内容5 || 内容6

|}

==== 表格内的文本的对齐 ====

<code>text-align</code>样式可以指定表格内部的文本应该如何对齐。它的值通常是<code>left</code>、<code>center</code>和<code>right</code>。例如：

! 表格水平对齐演示

! 表格水平对齐演示

<code>text-align</code>也支持一些特殊的值，例如<code>start</code>和<code>end</code>，意思是文本书写方向的开始方向和结束方向。在中文环境下，它们分别相当于<code>left</code>和<code>right</code>，而在一些从右往左书写的文本中，则是相反的。

<code>vertical-align</code>属性可以设置单元格的垂直对齐：

<code>float</code>属性可以让表格与文字浮动。例如，将属性<code>float: right</code>应用于整个表格，就会有下面这样的效果：

<blockquote>

{| class="wikitable" style="float: right"

|+ 拥有<code>float: right</code>样式的表格

! 标题 !! 标题 !! 标题

{{#invoke:string|rep|求闻百科，共笔求闻。|40}}

</blockquote>

需要注意的是，表格浮动有个很明显的负面效果，如果屏幕本身就是比较窄的，那么浮动后留下给正方的空间就不多了，甚至没有留下空间，导致排版的问题。可以使用<code>floatleft</code>和<code>floatright</code>类，拥有此类的元素默认是会浮动的，但是如果屏幕空间比较小，则也不会浮动，从而避免影响对内容的显示。使用桌面版浏览器的读者可以尝试调整窗口大小以检查在不同大小下的显示情况。

<blockquote>

{| class="wikitable floatright"

|+ 拥有<code>floatright</code>类的表格

! 标题 !! 标题 !! 标题

|-

| 单元格 || 单元格 || 单元格

|}

{{#invoke:string|rep|求闻百科，共笔求闻。|40}}

</blockquote>

{{notice|有的皮肤可能会对浮动内容的显示进行优化，当屏幕较小时强制覆盖掉<code>float: right</code>的属性，使其也是显示为非浮动的形式。}}

=== 边框 ===

CSS的<code>border</code>属性可以设置表格的边框。定义边框的时候，需要设置边框的类型、颜色和宽度。

{{notice|<code>wikitable</code>类的表格的每个单元格都会自动拥有灰色的边框。}}

==== 简单边框用法 ====

下面这个是一个最简单的用法，它给整个表格添加了一个红色的、2像素宽的实线边框：

-{}-{| class="wikitable" <mark>style="border: 2px red solid"</mark>

! 标题文本 !! 标题文本

| 示例 || 示例

|-

| 示例 || 示例

{| class="wikitable" style="border: 2px red solid"

! 标题文本 !! 标题文本

| 示例 || 示例

|-

| 示例 || 示例

在这个例子中，<code>border: 2px red solid</code>相当于<code>border-width: 2px; border-color: red; border-style: solid</code>。

此外，你也可以给单个单元格添加边框，例如在这个例子中，只给最后一个单元格添加了绿色、虚线的边框：

-{}-{| class="wikitable"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || <mark>style="border: 2px green dashed" |</mark> 示例

|}

{| class="wikitable"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || style="border: 2px green dashed" | 示例

|}

==== 移除边框 ====

使用<code>border: none</code>可以给一个已经有边框的单元格移除边框。默认情况下，表格是没有边框的，但是<code>wikitable</code>类会自动给每个单元格添加边框。如果我们使用<code>border: none</code>，就可以移除掉单元格的边框。

-{}-{| class="wikitable"

! 标题文本 !! 标题文本

|-

| <mark>style="border: none" |</mark> 示例 || <mark>style="border: none" |</mark> 示例

|-

| <mark>style="border: none" |</mark> 示例 || <mark>style="border: none" |</mark> 示例

|}

{| class="wikitable"

! 标题文本 !! 标题文本

|-

| style="border: none" | 示例 || style="border: none" | 示例

|-

| style="border: none" | 示例 || style="border: none" | 示例

|}

==== 为不同方向设置边框 ====

表格和单元格的边框并非只能为各个方向同时设置，可以为不同的方向设置边框，甚至可以为不同的方向的边框设置属性。

<code>border-left</code>表示左侧的边框，它包括了<code>border-left-color</code>、<code>border-left-width</code>、<code>border-left-style</code>等属性。同样地，还有<code>border-top</code>、<code>border-right</code>和<code>border-bottom</code>，分别表示上侧、右侧和下侧的边框。

此外，也可以使用<code>border-block</code>（包含<code>border-block-start</code>和<code>border-block-end</code>）和<code>border-inline</code>（包含<code>border-inline-start</code>、<code>border-inline-end</code>），表示当前书写方向的块状或者行内元素的开始或者结束方向的边框。在默认的书写模式下，块状元素是从上到下，行内元素是从左到右，因此<code>border-block-start</code>相当于<code>border-top</code>，<code>border-block-end</code>相当于<code>border-bottom</code>，<code>border-inline-start</code>相当于<code>border-left</code>，<code>border-inline-end</code>相当于<code>border-right</code>。

这个例子分别为表格定义了四个方向上的边框，上、右、下、左方向的边框分别为红色、绿色、蓝色和黑色，粗细和边框类似各不相同。

-{}-{| class="wikitable" <mark>style="border-top: 2px red solid; border-right: 3px green dashed; border-bottom: 4px blue double; border-left: 5px black inset"</mark>

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

{| class="wikitable" style="border-top: 2px red solid; border-right: 3px green dashed; border-bottom: 4px blue double; border-left: 5px black inset"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

下面这个例子类似，但是使用的是<code>border-block</code>和<code>border-inline</code>，因此在不同的书写模式下，其边框所应用的方向也是不同的。

-{}-{| class="wikitable" <mark>style="border-block-start: 2px red solid; border-inline-end: 3px green dashed; border-block-end: 4px blue double; border-inline-start: 5px black inset"</mark>

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

为了便于演示，这里以水平文本（默认情况）和垂直文本的形式分别展示这个表格：

<div style="display: flex; place-content: space-evenly">

{| class="wikitable" style="border-block-start: 2px red solid; border-inline-end: 3px green dashed; border-block-end: 4px blue double; border-inline-start: 5px black inset"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

{| class="wikitable" style="writing-mode: tb; border-block-start: 2px red solid; border-inline-end: 3px green dashed; border-block-end: 4px blue double; border-inline-start: 5px black inset"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

</div>

你还可以指定不同方向的边框的同一种属性。和大多数CSS属性一样，遵循“上、右、下、左”的顺序。在下面这个例子中，表格的所有方向的边框都是2px宽的实线，但是各个方向的颜色均不相同：

-{}-{| class="wikitable" <mark>style="border: 2px solid; border-color: orange greenyellow navy magenta"</mark>

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

{| class="wikitable" style="border: 2px solid; border-color: orange greenyellow navy magenta"

! 标题文本 !! 标题文本

|-

| 示例 || 示例

|-

| 示例 || 示例

|}

==== 留意边框与宽度 ====

通常情况下，表格等块状元素的宽度和高度可能''不包括''边框，因此如果添加了边框，其实际的宽度和高度可能会超过指定的值。如果块状元素的宽度和高度超过的指定的值，可以设置<code>box-sizing</code>属性，以指定其宽度和高度是否包括了边框。

<div style="display: flex; flex-direction: column; text-align: center; align-items: center; gap: 0.5em">

<div style="background: wheat; overflow: visible; width: 15em">15em宽度参考，无边框</div>

<div style="background: wheat; overflow: visible; width: 15em; border: 15px cyan solid">15em + 15px边框，box-sizing为默认</div>

<div style="background: wheat; overflow: visible; width: 15em; border: 15px cyan solid; box-sizing: content-box">15em + 15px边框，box-sizing = content-box</div>

<div style="background: wheat; overflow: visible; width: 15em; border: 15px cyan solid; box-sizing: border-box">15em + 15px边框，box-sizing = border-box</div>

</div>

=== 背景 ===

<code>background-color</code>样式可以设置表格的填充，<code>background</code>是一系列样式的简写。有两个单元格添加了背景颜色，分别是浅绿色和青色。

-{}-{| class="wikitable"

|-

! 标题文本 !! 标题文本

|-

| <mark>style="background-color: lime" |</mark> 示例 || 示例

|-

| 示例 || <mark>style="background-color: cyan" |</mark> 示例

|}

{| class="wikitable"

|-

! 标题文本 !! 标题文本

|-

| style="background-color: lime" | 示例 || 示例

|-

| 示例 || style="background-color: cyan" | 示例

|}

# 使用边框和填充时，必须考虑[[Qiuwen:无障碍|无障碍]]，确保色觉不佳、使用黑白输出或辨别能力不强的阅读者也能阅读表格内容。

# 不要使用<code>bgcolor</code>等HTML属性来为表格设置背景颜色。

== 无障碍考虑 ==

{{参见|Qiuwen:无障碍访问}}

在使用表格时，须考虑表格的无障碍（{{lang-en|accessibility}}），确保表格在不同的显示设备上也能够正常地显示，同时在辅助技术（例如盲文）中也可以正常地呈现。

=== 良好的表格标题语义 ===

表示表格标题时，应该使用专门的表格标题（以<code>!</code>开头的内容），而不是使用手动加粗的方式来使它看上去像个标题。这是因为，表格标题除了具有显示样式之外，还能够表示这是一个表格标题，从样式上能够做到形式统一，同时也有助于辅助技术对表格的解析。

'''错误使用表格标题的例子：'''

-{}-{| class="wikitable"

|- <mark>style="text-align: center"</mark>

<mark>| <nowiki>'''</nowiki>标题文本<nowiki>''' || '''</nowiki>标题文本<nowiki>''' || '''</nowiki>标题文本<nowiki>'''</nowiki></mark>

|-

| 示例 || 示例 || 示例

|-

| 示例 || 示例 || 示例

|}

'''正确使用表格标题的例子：'''

-{}-{| class="wikitable"

|-

<mark>! 标题文本 !! 标题文本 !! 标题文本</mark>

|-

| 示例 || 示例 || 示例

|-

| 示例 || 示例 || 示例

|}

此外，还可以添加<code>scope="col"</code>或<code>scope="row"</code>属性来表示这是一个列标题或者行标题，这样辅助技术在使用表格时，能够更好的理解。

-{}-{| class="wikitable"

|-

!

! <mark>scope=col</mark> | 列标题1

! <mark>scope=col</mark> | 列标题2

|-

! <mark>scope=row</mark> | 行标题1

| 示例

| 示例

|-

! <mark>scope=row</mark> | 行标题2

| 示例

| 示例

|}

{| class="wikitable"

|-

!

! scope=col | 列标题1

! scope=col | 列标题2

|-

! scope=row | 行标题1

| 示例

| 示例

|-

! scope=row | 行标题2

| 示例

| 示例

|}

=== 合适的内容 ===

{{参见|Qiuwen:格式手册/表格}}

表格通常是用来呈现数据的，并不适合用来去呈现大量的内容。如果需要呈现大量内容的，最好的办法是直接使用文字来表述。而且，如果表格的列数比较多，而单元格的内容也比较多的话，那么每个单元格需要显示大量的内容但又分配了很少的空间，这对于内容的显示也是不利的。

=== 表格并非用来排版的 ===

很多人可能会喜欢使用表格来对内容进行排版。例如，如果要显示左右两侧的内容，那么他可能会这么写：

{{编辑演示|result=

-{}-{{(!}}

{{!}} {{#invoke:string|rep|左边的内容。|4}}

{{!}} {{#invoke:string|rep|右边的内容。|7}}

{{!)}}

}}

这样做的缺点就是：表格自身已经预设有边距、衬距等属性，这会对内容的排版造成不利的影响。此外，表格会对辅助工具呈现为表格，对于使用辅助工具的用户来说，这就有可能造成困惑。对内容进行排版的最好的方式，是使用CSS的flex和grid布局，这两种布局都非常强大且非常灵活。使用CSS来模拟表格也是一种选择，但是这样子也存在一些限制。

{{编辑演示|result=-{}-

<div style="display: flex">

<div style="flex: 1">{{#invoke:string|rep|左边的内容。|4}}</div>

<div style="flex: 1">{{#invoke:string|rep|右边的内容。|7}}</div>

</div>}}

{{编辑演示|result=-{}-

<div style="display: grid; grid-auto-flow: column">

<div>{{#invoke:string|rep|左边的内容。|4}}</div>

<div>{{#invoke:string|rep|右边的内容。|7}}</div>

</div>}}

{{编辑演示|result=-{}-

<div style="display: table-row">

<div style="display: table-cell">{{#invoke:string|rep|左边的内容。|4}}</div>

<div style="display: table-cell">{{#invoke:string|rep|右边的内容。|7}}</div>

</div>}}

如果确实需要用来排版，请给表格元素添加<code>role="presentation"</code>，使得辅助工具将其识别为普通的内容，而非将其作为表格看待。从外观上，这个和前面的例子没有区别，但是如果启用辅助工具，例如屏幕阅读器，那么这些内容就会被直接阅读，而非作为表格阅读。

{{编辑演示|result=

-{}-{{(!}} role="presentation"

{{!}} {{#invoke:string|rep|左边的内容。|4}}

{{!}} {{#invoke:string|rep|右边的内容。|7}}

{{!)}}

}}

=== 不使用过时的属性 ===

在旧版本的HTML中，表格支持一些HTML属性，以支持控制内容的格式。在当前版本的HTML规范中，这种方式虽然仍支持，但是已经是过时了。因此，请不要再使用任何过时的语法。所有的样式都应该使用<code>style</code>属性来控制。请看这个示例：

<div style="display: flex; gap: 1em">

<div style="flex: 1">'''错误的写法：'''

-{}-{| class="wikitable"

! 标题文本 !! <mark>width="250"</mark> 标题文本

|- <mark>bgcolor="red"</mark>

| <mark>align="center" valign="top"</mark> | 示例 || 示例

|-

| 示例 || <mark>border="2" bordercolor="navy" bgcolor="cyan"</mark> | 示例

|}

</div>

<div style="flex: 1">'''正确的写法：'''

-{}-{| class="wikitable"

! 标题文本 !! <mark>style="width:250px"</mark> 标题文本

|- <mark>style="background-color: red"</mark>

| <mark>style="text-align: center; vertical-align: top"</mark> | 示例 || 示例

|-

| 示例 || <mark>border: 2px navy solid; background-color: cyan</mark> | 示例

|}

</div>

</div>

以下表格列举了各过时HTML属性与CSS属性之间的关系，请在编辑时，将表格中的过时属性替换为符合HTML规范的CSS属性（有点属性虽然有效，但事实上是没有必要使用的，可以直接移除）。

{| class="wikitable"

|+ 对照表

! 过时的HTML属性 !! 规范的CSS属性 !! 过时HTML属性示例 !! 规范CSS属性示例 !! 说明

|-

| <code>width</code><br><code>height</code>

| <code>width</code><br><code>height</code>

| <code>width="200" height="80"</code>

| <code>style="width: 200px; height: 80px</code>

| {{NoteTag|name=length|HTML属性中的单位默认为像素（px），而在CSS属性中，长度值除了零值外必须指定单位，否则为无效值。}}

|-

| <code>align</code><br><code>valign</code>

| <code>text-align</code><br><code>vertical-align</code>

| <code>align="left" valign="top"</code>

| <code>style="text-align: left; vertical-align: top"</code>

|

|-

| <code>bgcolor</code>

| <code>background-color</code>

| <code>bgcolor="red"</code><br><code>bgcolor="FF0000"</code>

| <code>style="background-color: red"</code><br><code>style="background-color: #FF0000"</code>

| {{NoteTag|name=color|CSS属性中的十六进制颜色值必须带有井号，否则无效。}}

|-

| <code>border</code><br><code>bordercolor</code>

| <code>border-width</code><br><code>border-color</code>

| <code>border="1" bordercolor="red"</code>

| <code>style="border: 1px red solid"</code>

| {{NoteTag|name=length}}{{NoteTag|name=color}}{{NoteTag|name=cell|需要将属性添加在各个单元格上才能实现完整效果，而非应用在表格本身或者应用在行上。}}

|-

| <code>cellspacing</code>

| <code>border-spacing</code>

| <code>cellspacing="3"</code>

| <code>style="border-spacing: 3px</code>

| {{NoteTag|name=length}}

|-

| <code>cellpadding</code>

| <code>padding</code>

| <code>cellpadding="3"</code>

| <code>style="padding: 3px"</code>

| {{NoteTag|name=length}}{{NoteTag|name=cell}}

|-

| <code>frame</code>

| <code>border-style</code>和<code>border-width</code>

|

|

|

|-

| <code>rules</code>

| <code>border-style</code>和<code>border-width</code>

|

|

|

|}

==== 注释 ====

{{NoteFoot}}