您网站上的那个表格可能有问题。它在我的手机上看起来或功能不佳。这听起来像是一个简单的问题（应该有一个简单的解决方案），但可能并不像您想象的那么简单。

导致这个问题的原因有很多——缺乏响应能力、将表格创建为图像、奇怪的数据格式弄得一团糟——但也有可行的设计解决方案。

让我们通过一些方法重新思考表格设计，以便您的数据和信息在手机上看起来就像在任何其他更大的设备上一样令人惊叹。

屏幕宽度

如果您创建了一个网站表格并且用户不从左向右滑动就无法看到手机上的所有列，那么内容是否还在那里？

现实情况是，即使您允许水平滚动，也不太可能看到内容。在大多数情况下，表格应该适合可用的视口。这就是设计响应式表格如此重要的原因。

但是响应性不是解决过宽表格的方法，因为除非有一种合乎逻辑的方式来堆叠内容，否则所有内容都会缩小到无法读取的大小。

这里更好的解决方案是考虑在表格中显示哪些信息真正重要，并仅显示该数据。虽然这是总体上的最佳实践，但它在较小的屏幕上变得至关重要。大桌子笨重且难以使用。只有您最忠实的读者或关注者才会深入研究这些信息。

评估数据。表格真的是突出信息的最佳方式吗？表格最适合需要分组到逻辑和有组织的框内的信息，以提高可读性。

滚动

与移动设备上的大多数其他内容一样，滚动是完全可以接受的……在合理范围内。不要让用户滚动太深以获取表格中的所有信息。

长滚动表有一些可用性问题：

标签会发生什么？

比较信息变得困难，影响理解

滚动期间可能会无意中激活单击/点击元素

如果您需要使用滚动，请考虑使信息更易于管理的方法。例如，用户是否需要比较产品？允许他们选择要比较的项目，并在没有滚动的新表格中打开它们。

数据排序

这是在移动设备的表格中管理复杂数据的真正技巧——使用智能排序和过滤。

通过允许用户使用过滤器选择与他们相关的信息，表格将缩小到更易于管理的大小。允许额外的数据排序然后将最相关的信息带到表格的顶部。

这种做法非常适用于数值或比较数据。当您将表用于其他类型的信息（例如地址或双列数据表）时，它就不会那么好用。

当您进行了硬编辑后仍有大量信息需要管理时，排序和过滤最有意义。

图标和视觉元素

使用视觉元素使表格更易于消化和浏览。使用图标、颜色和线条来帮助区分文本元素并使内容一目了然。

小图标可以帮助视觉理解并使用户更容易浏览内容。

考虑一个列出联系信息的表格。电话或电子邮件的图标可以提供视觉提示，并用作呼叫/文本或电子邮件的点击元素。

用复选或 x 图标表示是和否选项。与一遍又一遍地“是”或“否”相比，扫描要快得多，而且宽度要小得多。当视觉效果更有意义时，就去做吧。

表格中的颜色可以使信息井井有条。考虑每隔一列或每行着色以提高可读性。对代表信息读取方式的列或行使用阴影，例如从上到下最好理解的列以这种方式使用阴影；相反，最好通过屏幕阅读来理解的信息应该使用行阴影。对于全部或完全包含完整数据集的元素，请考虑使用粗体文本。

最后，使用线条（垂直或水平）分隔内容元素。在大多数情况下，如果同时使用，线条和阴影会彼此相反（例如垂直阴影和列之间的线条）。

文字和缩写

您不必在表格中拼出所有内容。使用易于理解的缩写是一种可接受的做法。

您更愿意使用缩写还是缩小文本，或者必须消除更多信息？在适当的时候，这个选项最有意义。这里的关键是它必须有意义。

如果缩写改变了信息的含义或引起混淆，那么它就不是正确的选择。许多测量单位都有常见的缩写，例如像素的 px。

在考虑缩写时，不要忽视图标或表情符号。这些常见元素有很多含义，可以用一个字符替换整个单词。

结合

对齐是另一个可以使大量信息更容易扫描和阅读的小东西。

为了充分利用可读性，请按以下方式对齐文本元素：

行应该垂直顶部对齐。其他任何东西都会在屏幕上产生锯齿状的阅读体验。

包含多个单词或短语的文本块通常最好左对齐（从右到左阅读的语言除外）。也要避免对齐的文本元素。

行标签应该左对齐，除非它们特别短。

数字右对齐通常最有意义，因为您可以直观地看到更大的数字，并且它将逗号和小数等元素保持在一行中以帮助扫描。

列标签可以左对齐或居中，但所有标签应具有相同的对齐方式。

中心内容对齐仅适用于单个单词或短语；避免使用较长的 tet 元素居中。

结论

不可否认——桌子很硬。表格在移动设备上能否正常运行的决定性因素通常归结为您尝试呈现的数据。

如果信息可以在单个屏幕上或通过滚动来包含和阅读，则表格效果很好。当表格需要在屏幕上从左到右来回移动时，它们很难理解。这对于数据来说不是一个好的选择，你可能会更好地尝试一种更具叙事性的格式。

但是，虽然桌子设计可能具有挑战性，但它也很有趣。如果做得好，这种有组织的信息呈现方式有助于提高参与度和理解力。