表格是显示数据的好方法。WordPress提供了简单的方法来通过一些格式和设计选项在表格内的内容。在本文中,我们将展示如何在不使用插件或任何HTML代码的情况下在WordPress文章和页面中创建表格。我们还将介绍如何在WordPress中创建具有排序和搜索功能的高级表格。
在WordPress块编辑器中创建表
WordPress使得使用默认的WordPress块编辑器添加表格变得非常容易。
只需创建一个新的文章或页面,或编辑现有的帖子或页面。进入内容编辑器后,单击“+”符号以添加新块,然后选择表块。
可以在“文本”部分下找到它,也可以在搜索栏中输入“Table表格”。
![Add table block 添加表块](https://img.itaoda.cn/wp-content/uploads/2023/07/add-table-block-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
接下来,系统将提示选择要为表添加多少列和多少行。两个数字都默认为 2。
如果不是 100% 确定确切的数字,以后可以随时添加/删除表列和行。
![Table columns and rows 表列和行](https://img.itaoda.cn/wp-content/uploads/2023/07/tablecolsrows-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
只需输入行数和列数,然后单击“创建表”按钮。
然后,该块将生成表格并将其显示在屏幕上。
![Table preview 表预览](https://img.itaoda.cn/wp-content/uploads/2023/07/table-preview-editor-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
可以在表格单元格中键入内容,它们将根据每个单元格中的内容量自动调整大小。
如果希望单元格为固定宽度,则可以在右侧设置此选项。在这里,还可以添加表格页眉或页脚部分。
![Table options panel “表选项”面板](https://img.itaoda.cn/wp-content/uploads/2023/07/table-options-panel.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
在设置面板中,还可以切换到样式选项卡。
WordPress 主题可能会为表格块提供一堆样式,或者可以选择背景和文本颜色。
![Table style and colors 表格样式和颜色](https://img.itaoda.cn/wp-content/uploads/2023/07/table-styles-colors-panel.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如果要添加新行或新列,只需单击表中要添加它的点的单元格。接下来,单击“编辑表”按钮。
这将显示一堆用于在表中添加或删除行和列的选项。
![Add or remove table rows and columns 添加或删除表行和列](https://img.itaoda.cn/wp-content/uploads/2023/07/table-rows-columns-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
默认情况下,表格列中的文本向左对齐。
可以通过单击列内然后单击“更改列对齐方式”按钮来更改此设置:
![Align table columns 对齐表列](https://img.itaoda.cn/wp-content/uploads/2023/07/aligncolumns-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
还可以更改帖子或页面中整个表格的对齐方式。
只需单击“更改对齐方式”按钮,然后从列表中选择一个选项。
![Table alignment 表对齐方式](https://img.itaoda.cn/wp-content/uploads/2023/07/table-alignment-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
请注意,这些选项可能会使您的表格显示超出帖子区域的正常边界。
有些可能在WordPress网站上看起来很奇怪,可以保存直接预览页面以检查表格的显示方式。
以下是我们的表格设置为“宽”,因为它出现在我们的演示网站上:
![Table live preview 表实时预览](https://img.itaoda.cn/wp-content/uploads/2023/07/table-live-preview-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
古腾堡编辑器中内置的表格工具在如何显示表格方面提供了很大的灵活性。可以使用表块以易于理解的格式向读者显示数据。
但是,该块没有搜索过滤、自定义排序等高级功能。它也不能让网站的多个区域(例如侧边栏小部件或其他页面)有效地使用相同的表格。
要创建高级表格,需要使用 WordPress 表格插件。
使用 TablePress 插件创建表
TablePress 是市场上最好的 WordPress 表格插件之一。它是一个免费插件,可让轻松创建和管理表。另外,可以单独编辑表格,甚至可以添加大量行。
如果使用的是较旧的经典WordPress编辑器,则TablePress也变得必要,该编辑器不附带表格功能。
首先,需要安装并激活 TablePress 插件。
然后,将在WordPress仪表板中看到TablePress菜单项。转到 TablePress » 新增以创建新表。
![Tablepress add new 台式推送新增](https://img.itaoda.cn/wp-content/uploads/2023/07/tablpress-add-new-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
需要为表键入名称,并确定所需的行数和列数。也可以在以后添加/删除表行和列。
添加表名称、行和列后,请继续并单击“添加表”按钮以创建表。
接下来,将看到一个包含表格信息的屏幕以及一个可以添加内容的区域。
![TablePress Edit Table 表按编辑表](https://img.itaoda.cn/wp-content/uploads/2023/07/tablepress-edit-table.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
只需在表格的单元格中键入所需的数据即可。
要添加或删除行和列或执行排序操作,只需在表内单击鼠标右键即可。这将显示一个选项菜单,可以在其中进行更多更改。
![Right click table options 右键单击表格选项](https://img.itaoda.cn/wp-content/uploads/2023/07/right-click-tableoptions.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
“表格内容”区域下方有高级选项,例如“表格操作”。
从这里,可以执行添加、删除和复制行等操作。
![Table manipulation options 表操作选项](https://img.itaoda.cn/wp-content/uploads/2023/07/table-manipulation.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
在“表格选项”中,您可以添加页眉和/或页脚行,这些行不会与数据一起排序。
还可以决定在何处显示表名称和说明:
![Advanced table options 高级表格选项](https://img.itaoda.cn/wp-content/uploads/2023/07/table-options-more.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
最后,可以在“网站访问者的表格功能”部分中设置各种选项。
这些设置允许创建可由读者筛选、搜索和排序的响应式表。
![Table features site visitors 表功能网站访问者](https://img.itaoda.cn/wp-content/uploads/2023/07/table-features-site-visitors.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
对表格满意后,只需单击“保存更改”。
之后,复制 表短代码.在下一步中将需要它。
现在,编辑要显示表格的帖子或页面,并将简码块添加到编辑器中。
![Add shortcode 添加简码](https://img.itaoda.cn/wp-content/uploads/2023/07/addshortcode.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
之后,将之前复制的简码添加到短代码块中。
不要忘记更新或保存更改。
另一方面,如果使用的是经典编辑器,则只需将短代码直接添加到您的帖子中:
![Shortcode in classic editor 经典编辑器中的简码](https://img.itaoda.cn/wp-content/uploads/2023/07/shortcode-classic-editor.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
如果想以后更改表格,可以返回到仪表板中的 TablePress 并进行更改。表格将在使用过的任何帖子和页面中自动更新。
TablePress 还允许从电子表格和 CSV 文件中导入数据。同样,也可以将TablePress表格数据导出为CSV文件,然后可以使用任何电子表格程序(如Microsoft Excel或Google表格)打开该文件。
我们希望本文能帮助您了解如何在不使用HTML的情况下在WordPress帖子和页面中添加表格。想了解更多关于wordpress如何安装,可以参考wordpress安装教程
原文链接:https://www.itaoda.cn/blog/13118.html,转载请注明出处。
评论0