Help:表格：修订间差异

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

需要注意的是，不要滥用表格。表格一般不应当用来排版，更不应该添加花里胡哨的样式。在求闻百科中使用表格时，须遵守[[Qiuwen:无障碍访问]]方针。

效果如下：

在这个例子中，<code>{|</code>表示一个表格的开始，必须位于一行的开头。每个wikitext表格都是以这个符号开头的，其后接表格的基本属性。大多数表格都需要wikitable类以实现基本的格式化，因此添加<code>class="wikitable"</code>。

其后以<code>|+</code>开头的是表格标题（{{lang-en|caption}}），标题会显示在表格的最顶部，宽度不会超过表格自身的宽度。标题是可选的，通常包含对这个表格的基本描述。

<code>|-</code>将表格分成了多行。每一行则是由相等数量的单元格组成。在上面的例子中，以<code>|</code>开头的是普通的单元格（{{lang-en|table cell}}）；以<code>!</code>开头的是表头（{{lang-en|table heading}}），从屏幕显示中可以看出表头的背景颜色比普通的单元格略深一些，且默认会显示为居中、加粗。表头也是可选的，但通常情况下一个表格应该要有一个表头。单元格按照先分行（{{lang-en|row}}）后分列（{{lang-en|column}}）的顺序排列。

在代码的同一行内，多个单元格可以使用<code>!!</code>和<code>||</code>分开，如果每个单元格一行，则单元格可以直接以<code>!</code>或<code>|</code>开头。

你可以为表格的各个元素添加'''属性'''（{{lang-en|'''attribute'''}}），这些属性包括表格属性、单元格属性、行属性和表格标题属性。属性通常用来设置表格的样式，有时也可以使用其他的属性。

表格属性添加在表格最开头的<code>{|</code>后面，将应用于整个表格。我们通常所添加的<code>class="wikitable"</code>就是应用于整个表格的。下面这个例子中，我们不添加wikitable类，而是为整个表格设置文本颜色，并添加边框。在这个例子中，整个表格都是绿色文字、蓝色边框的。

单元格属性应用于单个单元格。单元格属性应用在单元格内容与单元格分隔符之间，并用<code>|</code>隔开。例如，在这个例子中，将左下角的单元格设置文本颜色并添加边框，而不影响其他的单元格：

'''样式'''（{{lang-en|'''style'''}}）是表格内容最常见的一种属性，它主要包括了表格的各种显示方式。例如，表格如何排版布局，显示为什么颜色，这些都属性样式。定义表格样式所使用的是[[CSS|<abbr title="层叠样式表">CSS</abbr>]]。

CSS的<code>width</code>和<code>height</code>属性可以设置表格的宽度和高度。宽度和高度的类型都属于长度，其值可以是相对值，也可以是绝对值。除非值为0，否则必须要有单位。

宽度和高度可以应用于整个表格，也可以应用于单个单元格。当应用于单元格时，其同一行或同一列的单元格的相应尺寸也会受到影响。

=== 简单的宽度和高度 ===

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

! 标题1

! 标题2

|-

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

! 标题1

! 标题2

|-

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

此外，宽度也可以用来指定单元格的大小分配。在下面这个例子中，三个列所占的宽度分别为整个表格的宽度的20%、20%、60%。尽管第1列的文本比其他列的文本多，但是由于指定了宽度，因此内容的数量不会影响宽度。

! 标题1

! 标题2

! 标题3

|-

! 标题1

! 标题2

! 标题3

|-

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

==== 复杂的宽度与高度 ====

在一些情况下，绝对宽度和相对宽度或高度可能都没有办法满足需求。在这种情况下，可以使用复杂的表格宽度和高度。这里仅作参考，事实上并不推荐使用过于复杂的宽度和高度。

下面这个表格的宽度为<code>min(max(70%, 20em), 100%)</code>。意思是，当20em的长度小于容器宽度的70%时，这个表格的宽度是20em，否则为容器宽度的70%。但是，如果容器宽度本身小比较小，以至于小于20em，那么表格的宽度就是容器宽度的100%，以免超出容器宽度。

-{}-{| class="wikitable" <mark>style="width: min(max(70%, 20em), 100%)"</mark>

|+ 标题文本

|-

! 标题文本 !! 标题文本 !! 标题文本

|-

| 示例 || 示例 || 示例

|-

| 示例 || 示例 || 示例

|}

{| class="wikitable" style="width: min(max(70%, 20em), 100%)"

|+ 标题文本

|-

! 标题文本 !! 标题文本 !! 标题文本

|-

| 示例 || 示例 || 示例

|-

| 示例 || 示例 || 示例

|}

下面这个表格的宽度为<code>calc(100% - 2em)</code>。这个很好理解，这个宽度是相对宽度和绝对宽度的混合，其宽度是容器宽度减去2em。

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

|+ 标题文本

|-

! 标题文本 !! 标题文本 !! 标题文本

|-

| 示例 || 示例 || 示例

|-

| 示例 || 示例 || 示例

|}

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

|+ 标题文本

|-

! 标题文本 !! 标题文本 !! 标题文本

|-

| 示例 || 示例 || 示例

|-

| 示例 || 示例 || 示例

|}

==== 表格内容的自动排版 ====

一般情况下，如果不指定宽度，那么表格的宽度以及各单元格的宽度是自动调整的，会根据内容来进行分配。如果指定了整个表格的宽度和高度，但是没有指定单元格的宽度和高度，那么这个单元格的宽度和高度也会自动分配。

在下面这个例子中，表格的宽度不会超过40个字符的宽度，字符多的单元格会分配更宽的宽度。

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

|+ 自动排版的表格

|-

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

|-

| 这是一个很多文本的单元格，内容非常非常多，需要占用比较多的空间，以便呈现其内容。

| 内容很少的单元格

| 这个单元格的内容也比较少。

|-

| 这个内容很少。

| 内容很少的单元格。

| 这个单元格的内容也是比较少的。

|}

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

|+ 自动排版的表格

|-

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

|-

| 这是一个很多文本的单元格，内容非常非常多，需要占用比较多的空间，以便呈现其内容。

| 内容很少的单元格

| 这个单元格的内容也比较少。

|-

| 这个内容很少。

| 内容很少的单元格。

| 这个单元格的内容也是比较少的。

|}

=== 表格对齐 ===

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

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

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

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

|+ 右对齐的表格

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

|-

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

|-

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

|}

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

|+ 右对齐的表格

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

|-

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

|-

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

|}

如果指定<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>。例如：

-{}-{| 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" | 右对齐

|}

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

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

-{}-{| 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>应用于整个表格，就会有下面这样的效果：

<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>的属性，使其也是显示为非浮动的形式。}}

=== 单元格衬距 ===

<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>padding:1em 2em 3em 4em</code>是<code>padding-top:1em; padding-right:2em; padding-bottom:3em; padding-left:4em</code>的缩写，显然，将四个方向的衬距写在一个属性里面更简洁。记住这个顺序：上、右、下、左。若只有三个值，则分别表示上、左右、下；两个值则分别表示上下和左右。若只有一个值，例如上面的例子中的<code>padding:2em</code>，则表示上下左右四个方向均应用相同大小的衬距。}}

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

|}

{{mbox|text=

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

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

# 使用边框和填充时，必须考虑[[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}}