Help:表格：修订间差异

{{mbox|text=注意，设置宽度和高度使用的是<code>style</code>中的<code>width</code>和<code>height</code>CSS属性，如<code>style="width=80%"</code>而不是直接设置像<code>width="80%"</code>这样的节点属性。}}

=== 表格对齐 ===

一般来说，表格对齐的方式取决于皮肤默认设置，表格内部文本对齐的方式取决于其外部元素。你也可以手动定义。

<code>margin</code>样式可以指定表格在页面中应该如何对齐，例如下面这个例子中，表格是右对齐的：

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

! 标题 !! 标题 !! 标题

|-

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

|-

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

|}

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

! 标题 !! 标题 !! 标题

|-

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

|-

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

|}

<code>text-align</code>样式可以指定表格内部的文本应该如何对齐。例如：

-{}-{| class="wikitable" style="min-width: min(15em, 100%)"

|-

! 表格对齐演示

|-

| <mark>style="text-align:left"</mark> | 左对齐

|-

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

|-

| <mark>style="text-align:right"</mark> | 右对齐

|}

{| class="wikitable" style="min-width: min(15em, 100%)"

|-

! 表格对齐演示

|-

| style="text-align:left" | 左对齐

|-

| style="text-align:center" | 居中

|-

| style="text-align:right" | 右对齐

|}

此外，还可以设置单元格的垂直对齐：

-{}-{| class="wikitable"

! colspan="3" | 表格垂直对齐演示

|- style="height:5em"

| <mark>style="vertical-align:top"</mark> | 顶端对齐

| <mark>style="vertical-align:middle"</mark> | 中间对齐

| <mark>style="vertical-align:bottom"</mark> | 底端对齐

|}

{| class="wikitable"

! colspan="3" | 表格垂直对齐演示

|- style="height:5em"

| style="vertical-align:top" | 顶端对齐

| style="vertical-align:middle" | 中间对齐

| style="vertical-align:bottom" | 底端对齐

|}

{{mbox|text=请不要使用诸如<code>align="left"</code>或<code>valign="top"</code>这样的属性。}}

=== 表格浮动 ===

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

----

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

! colspan=3 | 拥有float:right样式的表格

|-

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

|}

{{#invoke:RailSystems|lineStationList|system=SHMetro|line_id=14|showInterchange=false|isStyled=false}}

{{#invoke:RailSystems|lineStationList|system=SuzhouRT|line_id=S1|showInterchange=false|isStyled=false}}

{{#invoke:RailSystems|lineStationList|system=SHMetro|line_id=18|showInterchange=false|isStyled=false}}

----

{{mbox|text=一般来说，没有必要设置表格浮动，尤其对移动版视图不友好。}}

=== 单元格衬距 ===

<code>padding</code>属性可以设置单元格内容与其边界的距离。例如：

-{}-{| class="wikitable"

! colspan=2 | 单元格衬距演示

|-

| <mark>style="padding:2em"</mark> | 距离四周2em

| <mark>style="padding-top:3em"</mark> | 距离顶部3em

|-

| <mark>style="padding:0"</mark> | 与四周没有距离

| <mark>style="padding:1em 2em 3em 4em"</mark> | 与四周距离各不相同

|}

{| class="wikitable"

! colspan=2 | 单元格衬距演示

|-

| style="padding:2em" | 距离四周2em

| style="padding-top:3em" | 距离顶部3em

|-

| style="padding:0" | 与四周没有距离

| style="padding:1em 2em 3em 4em" | 与四周距离各不相同

|}

注意衬距与间距的区别：间距是单元格之间的距离，单元格本身不会占用任何间距的位置，而衬距是单元格内部的文字与单元格边距的距离，其仍属于单元格自身所占的位置。也就是说，间距在边框之外，边框在衬距之外，而衬距则在内容之外。

{{mbox|text=一般来说，除非必要，否则没必要手动指定单元格的衬距。此外，不要使用<code>cellpadding</code>。}}

=== 边框和填充 ===

CSS的<code>border</code>和<code>background</code>样式可以设置表格的边框和填充。关于这些CSS属性的具体用法，这里不做阐述，仅举一个例子。

-{}-{| class="wikitable" <mark>style="border:6px gray double"</mark>

|+ 灰色双重边框的表格

|-

| <mark>style="background-color: lime"</mark> | 这个单元格的背景是绿色的

| <mark>style="background-color: yellow"</mark> | 这个单元格的背景是黄色的

|- <mark>style="background: linear-gradient(cyan, white)</mark>

| 这一行的背景是渐变色

| 由青色渐变至白色

|}

{| class="wikitable" style="border:6px gray double"

|+ 灰色双重边框的表格

|-

| style="background-color: lime" | 这个单元格的背景是绿色的

| style="background-color: yellow" | 这个单元格的背景是黄色的

|- style="background: linear-gradient(cyan, white)

| 这一行的背景是渐变色

| 由青色渐变至白色

|}

注意：上面的例子中，使用了一些CSS的简写。例如<code>border:6px gray double</code>本质上相当于<code>border-width:6px; border-color:gray; border-style:double</code>，同时也相当于分别设置4条边的宽度、颜色和样式。显然，写到一个属性里面要更加简洁。<code>background: linear-gradient(cyan, white)</code>本质上是在设置<code>background-image</code>，同样地<code>background-color</code>也可以直接通过<code>background</code>设置。上面表格的第二行，由于该行的单元格没有设置填充，因此直接使用了为行设置的填充，这个填充覆盖了wikitable类为整个表设置的淡灰色填充。

{{mbox|text=

设置表格的边框和填充时，需要注意：

# 不要滥用这个功能。一般来说，<code>wikitext</code>类已经可以完成基本的格式化，无需再单独设置边框和填充。

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

# 不要使用<code>border</code>、<code>bordercolor</code>、<code>bgcolor</code>等HTML属性来实现表格样式。

}}