guide高级表格格式

# 概述

高级表格格式是一项功能,它使您能够根据表格单元格在表格中的位置有条件地修改某些表格单元格的外观。例如,您可以更改偶数行的背景颜色或使最上面一行中的文本变为粗体。这可以极大地提高表格的可读性,并引起人们对表格的某些部分的注意。

Advanced formatting applied to a table in Microsoft Word.

Advanced formatting applied to a table in CKEditor 5.

# 用法

# 内置样式

可以使用表格样式将高级表格格式添加到表格中。您可以选择众多内置样式之一,也可以创建自己的样式。为此,请切换到**表格设计**选项卡。在图库中,将显示一些可用的表格样式。当您将鼠标悬停在图库上时,箭头将显示在底部。单击它以展开视图并查看所有表格样式。

The expanded gallery with table styles.

# 自定义格式

要创建自定义表格样式,请从展开的图库视图中选择**新建表格样式…**选项

The Create New Style from Formatting dialog box.

表格有几个区域可以应用格式

  • 标题行
  • 总计行
  • 第一列
  • 最后一列
  • 带状行和列
  • 角部表格单元格

您可以使用**格式**部分中的第一个下拉菜单选择要设置样式的区域。

Region styling using dropdown in Formatting section.

此外,每个表格都可以使用**表格设计**选项卡中的复选框切换特定区域的格式是否应应用于它。

Location of the checkboxes that toggle Advanced Table Formatting.

默认情况下,以下区域的格式已启用

  • 标题行
  • 第一列
  • 带状行

# 带状行和列

在 Word 中,每个表格都包含带状,它们代表连续的行和列的组。带状可以是奇数或偶数,具体取决于它们在一系列兄弟带状中的位置。这意味着,例如,我们可以使用它们来创建一个具有交替行颜色的表格。

A table where even rows have a light blue background color.

默认情况下,Word 将带状的大小设置为 1,但可以修改它。以上一张图片中的表格为例,当我们将它的行带状大小更改为 2 时,它的行被分成两组,而浅色背景颜色只应用于每隔一组

A table with the band size of rows changed to 2.

您可以在用于创建新表格样式的同一个对话框中修改带状大小。从位于底部的**格式**下拉菜单中,选择**带状…**选项。

The Create New Style from Formatting dialog box with the Format dropdown expanded.

这将打开**条纹**对话框,您可以在其中分别更改行和列带状的大小。

Bind size modifying window.

# 转换输出

为高级表格格式生成的 HTML 独立于 Word 应用程序和 HTML 使用者。表格格式与 HTML 内联,并且可以由现代浏览器或支持表格格式的富文本编辑器(如 CKEditor 5)显示。这种方法消除了 HTML 使用者需要实现任何特定逻辑来理解“从 Word 导入”功能生成的 HTML 的需求。

让我们考虑一个表格,其中最上面的行具有蓝色背景,其中文本为白色。所有其他行都有白色背景,其中文本为黑色。

A table with the top row formatting applied.

转换后第一个表格行的 HTML 标记如下

<tr>
    <td style="background-color: #1f4e79">
        <p>
            <span style="color: #ffffff"><strong>Lorem</strong></span>
        </p>
    </td>
    <td style="background-color: #1f4e79">
        <p>
            <span style="color: #ffffff"><strong>Ipsum</strong></span>
        </p>
    </td>
    <td style="background-color: #1f4e79">
        <p>
            <span style="color: #ffffff"><strong>Dolor</strong></span>
        </p>
    </td>
</tr>

请注意,格式已内联到整个表格、每个表格行和每个表格单元格中。转换器不使用 CSS 伪类(如 :nth-child())来表示高级表格格式。