制作更好的HTML表格

奇怪的是，掌握最困难的网络技术之一是在纯文本和图像之后最早可用于浏览器的技术之一。今天的问题更加严重，需要考虑许多不同的设备类型。

完美的表几乎不可能创建，除非它们包含的项目很少，不会触发任何问题。可能出现的错误类型包括：

在本文中，我们将介绍如何避免这样的问题，因此您的表格最有可能产生良好的印象。

由于表格难以正确使用，因此有些人会尽量避免使用它们。一些常见的策略是使用CSS创建假表，并使用数据表的图像而不在代码中实现它。

这两种避免策略都有缺陷，应该避免。使用CSS模仿表缺少表中固有的语义结构，这可能会产生可用性和可访问性问题。

表的图像不会遇到引言中列出的问题，但会降低您的SEO潜力，如果您的数据需要更新，则无法轻易修改。它还介绍了可用性和可访问性问题。

诸如Bootstrap和Foundation之类的通用框架包含许多省时工具，表也不例外。在Bootstrap中构建一个优雅的表格并不困难，但是如果你只是在没有为你的工作添加一些定制的剪裁的情况下构建机架，那么它会带来一些限制。

因为内容和样式应该始终是独立的，所以首先用纯HTML构建表是有意义的，只是为了确保在应用任何特殊的表样式之前它看起来很好。

这也有助于提醒您，良好的桌子结构需要的不仅仅是让桌子看起来不错。它也应该是有用的format离子输送系统。如果表格的目标不是传达format离子，那么你不应该使用桌子来做任何事情。

有些人难以查看和阅读印刷文本，因此最好让表格可供他们使用。您可以找到有关使表格更易于访问的所有信息 WebAIM.

为了最大程度地控制表格的每个部分（行，单元格），可以考虑将它们放在divi双ID值。同时添加类值将为您提供更大的灵活性。

做这些事情会为你创造更多的工作，所以当你需要能够通过引用微调任何项目时它才是实用的。如果您决定这样做，您将能够使用JavaScript和CSS直接操作任何表项。

表制作的一个复杂性是我们声明行而不是列。这些列是动态创建的，根据您在每行上放置的数据项计算。这就是表格添加到页面加载时间的原因。

实际上，这意味着在呈现页面之前，列仅以抽象的意义存在，因此您不能为它们提供任何类型的引用。通过为行中的第一个TD项目提供例如“ firstCol”的类，您可以提供一种直接引用列的方法。

使用大型，高可视性组件构建一切已成为时尚。从可访问性的角度来看，这很棒。然而，就可用性而言，它并不总是最佳方式，因为它可能导致问题。

Bootstrap 的开发者尝试了 responsive 表，但表和 responsive相处不好。从一开始就设计您的表格，使其适合纵向模式的移动屏幕是明智之举。

始终将表的溢出值设置为auto是一种很好的做法，但不能在表本身上设置。相反，将表包装在div中，如下所示：

然后有很多构建表体的PHP代码，用这个结束：

使表可滚动的工作部分位于第一行，其中table-wrap div被赋予固定高度并且其溢出值设置为auto。如果对表本身执行此操作，而不是对表的包装器执行此操作，则可能会产生意外影响。

对于简单的表，这是过度的，但是当你有一个真正需要诸如可调列宽和列排序等优点的表时，有一些强大的jQuery应用程序可以帮助完成构建复杂表的任务。

您想要的WordPress网站最令人印象深刻的选择是 wpDataTables, 一个 WordPress 表格 plugin 这使您可以轻松地使用表格、图表和数据管理。有了它，您可以创建 responsive WordPress 表格和图表。

数据表 plugin

新的 plugin 处理大型表格非常快，多达数百万行，但您也可以对表格进行大量自定义和过滤，就像您在 Excel 或 Google 电子表格中一样。

最大和最可能最好的是 Flexigrid。它具有与Java Swing表类似的外观，并以类似的方式工作。

Flexigrid的功能甚至可能超出您的需求，因此在这种情况下您可以考虑的tablesorter，这是相当简单的。

虽然这些工具的功能令人兴奋，但重要的是它们会为您的页面加载时间增加更多。当你真的必须拥有它时，最好保存这种东西。

有一些CMS插件可用于将文档表转换为HTML表。这些并不像手动构建表那么好，所以如果你想获得更好的结果，那么这种自动化就不是可行的了。

使用 PHP 从数据库中构建表formation 总是一个好主意，绝对比手动输入所有内容更可取。这里的不同之处在于您可以完全控制自动化的工作方式。

当您使用第三方自动化时，第三方作者必须对您的表做出假设。这意味着，与自己创建表格相比，您最终会得到一个可能缺少许多功能的通用表格。