如何在WordPress帖子中创建和插入表格

WordPress的的表

很少有Wordpress网站在其帖子中使用表格。

有几个原因,但是我认为其中大多数是“创建表很痛苦”和“我担心正确创建表的知识”。可能有些组织会说:“由于帖子编辑者需要一些技巧,因此表创建本身是被禁止的。”

顺便说一句,通过这次不常用的“ Wordpress”和“ Table”的组合,在学习如何在Wordpress帖子中插入表格的同时,它作为一个具有非常重要的网站可维护性和可访问性的表格完成。我想解释如何去。

参考:[HTML]表格标签基础知识!如何制作表格・如何使用tr,th,td [提供样品]

首先,让我们将表格插入Wordpress帖子中

首先,我们现在将表格插入Wordpress帖子中。

最好利用Tiny MCE Advanced插件

微型MCE高级
微型MCE高级插件是一个插件,可让您向后屏幕视觉编辑器添加更多功能。

附加功能之一是默认情况下内置的表/表插入功能,它使您可以直观地创建漂亮的表,而无需任何html或css知识。由于可以快速,准确地完成包括单元格合并/拆分在内的表格创建,因此,我们这次建议使用此插件插入表格。

如何配置Tiny MCE Advanced插件

首先,请确保帖子编辑屏幕的可视编辑器中有表格选项卡或图标。

如何显示Tiny MCE Advanced的表格

例如,单击表格选项卡会弹出几个菜单。只需在此处指定几行和几列,就会在您的帖子中插入一个空表。

查看Tiny MCE Advanced表

单击插入表的每个单元格,然后输入字符和数字(如Excel)以完成表!

如果要添加边框或单元格背景色之类的装饰,也可以通过单击“表”选项卡中的“表属性”或“单元格属性”来进行设置。

微型MCE高级装饰

顺便说一句,当您安装Tiny MCE Advanced插件时,将在“管理”屏幕的“设置”中添加一个名为Tiny MCE Advanced的项目。单击它会弹出下面的屏幕,您可以在其中添加默认情况下隐藏的功能(如字体大小),因此,如果要进一步装饰表格,请尝试添加功能。

微型MCE高级的高级设置

通过这种方法插入一个表/表的优缺点如下。

微型MCE高级插件的好处

  • 可以在不了解HTML的情况下制作
  • 可以使用视觉编辑器进行编辑
  • 您可以直观,快速地制作一张桌子
  • 其他附加功能也可用

微型MCE高级插件的缺点

  • 样式在html标签中描述
  • 需要单独调整以使其更易于在智能手机或平板电脑上查看
  • 表格不易访问

[单击此处以获取推荐的WordPress插件]
[最新版本] 11个推荐的WordPress插件!我们仅精心选择了您真正需要的东西

加强表的可维护性

简而言之,可维护性意味着以后可以轻松修改或修改它。如果您打算长期运营Wordpress网站,则可能需要进行一些更改。在有一天可能会进行更正和修改的情况下,提高表的可维护性非常重要。

微型MCE高级插件的缺点之一是“样式是用html标记编写的”,这会导致问题,导致在翻新或更新站点时很难装饰表格。在整个站点中浏览时,此问题还会导致设计一致性问题。

预先设计桌子并分开装饰

消除Tiny MCE Advanced插件的缺点之一

  • 设置表创建(表设计)的某些规则
  • 仅在样式表上装饰

是最好的选择。

通过设置表创建规则,可以将表的单元格结构限制为几种模式,并且在装修站点设计时不会被结构不规则的表所困扰。另外,由于您无需在帖子中进行装饰,因此您不必每次都花时间在装饰上,因此它是两只鸟和一块石头。

同时提高移动设备的可用性

相关地,我们讨论了用样式表装饰桌子的方法,因此让我们解决另一个缺点,即“针对智能手机和平板电脑的其他调整”。关键字是overflow-x。

表布局考虑了CSS可以完成的响应式支持我认为在考虑表格中的智能手机/平板电脑兼容性时会很有帮助,因此请尝试一下。

如果到此为止,您将获得一个具有出色可维护性的表格。

增强表的可访问性

使用Tiny MCE Advanced插件创建的表没有任何可访问性注意事项,例如语音浏览器支持。同样,表中数据的结构对于人类来说是可以理解的,但是计算机不清楚该结构。因此,增强可访问性表结构是必须的。

整理表格

表结构意味着数据表按原样只是数据列表,是“表头部分(标题单元格组)”,“表主体部分”和“表脚部分(表的最后一列)”。通过将表分为三个区域来澄清表的结构。

例如,考虑下表显示了按主题的得分数据。

表样本

在此表中,主题的第一行对应于页眉,第二至第四行对应于正文,第五行对应于页脚的平均行。您可以将页眉视为表的头行,将正文视为包含表主数据的整个行,将页脚视为表摘要的行。

如果您以此为基础构造该表,

 

学科 英语(点) 数学(分) 社会(点) 科学(点)
A 100 90 80 100
B 80 100 90 80
C 90 80 100 90
平均 90 90 90 90

 

您可以这样写。 (请检查源代码。)在这里使用thead标签身体标签脚标签是用于指示每个表的结构的标签。

实际上,您可以更严格地构造表,并且html还具有范围属性和标头属性以显示标题和数据之间的关系。但是,它可能不适合Wordpress帖子,因为创建表以应用这些帖子也将花费大量时间和精力。我认为仅在创建了非常复杂的表后才添加它就足够了。

给一个标题

除了表的结构外,还需要标题以增强表的可访问性。

表格标题表示表格的标题。要将标题添加到表中,请在表开始标记后立即插入标题标记并描述表的标题。 (

-HTML5标签参考)

如果到目前为止,您将拥有一个具有增强的可访问性的表,至少应这样做。

最后

如果您不使用Tiny MCE Advanced插件

  • 使用文本编辑器直接编写表
  • 嵌入来自Google电子表格的表格
  • 将表格图片粘贴到页面上

您可以通过三种方式将表格插入帖子。但是,考虑到SEO,该表应标记为html。您可能想知道是否可以将表格粘贴为图像,“是否可以使用html创建表格?”同样,在表设计方面,使表设计尽可能简单也很重要,因为用户很难直观地理解经常合并和划分单元格的表。

包含数据的页面使阅读器具有可靠性和说服力。从现在开始,您为什么不积极使用表格来吸引Wordpress的读者呢?

撰写本文的人

ケイタ

潜伏在东京的一位网络工程师。我做各种各样的事情,例如生产/运营/数据分析。 応援は@keitaoriginal请从。