制作更好的HTML表格

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

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

  • 文字包装错误
  • 理由错误
  • 表渲染屏幕
  • 滚动问题
  • 行高错误
  • 列宽错误
  • 一般的丑陋或不整洁

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

要避免的规避策略

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

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

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

框架是你的朋友

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

看起来不是一切

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

这也有助于提醒您,良好的桌面构造需要的不仅仅是使桌子看起来很好。 它也应该是一个有用的信息传递系统。 如果表的目标不是传达信息,那么你不应该使用表来处理你正在做的事情。

瞄准可访问性

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

考虑为表组件提供ID值

为了最大限度地控制表的每个部分(行,单元格),您可以考虑为它们提供单独的ID值。 添加类值也会为您提供更大的灵活性。

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

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

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

紧凑的桌子是最好的

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

Bootstrap的开发人员使用响应式表进行了实验,但是表和响应性并不能很好地结合在一起。 从一开始就设计你的桌子,这样他们就可以在纵向模式下适应移动屏幕,这是一个聪明的举动。

表应始终可滚动

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

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

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

如果你需要,请打电话给重击手

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

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

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

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

自动转换工具通常不会产生最佳效果

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

然而,你自己的自产自动化很好

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

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

适当使用表格,他们会奖励你

设计好桌子,它们不仅仅是设计。 在设计信息传递系统时,您希望它高效且有效。 确保您的表格设计恰到好处,并且您的网站将从其包含中获得最大收益。

标题图片由...提供

波格丹兰萨

Bogdan是Inspired Mag的创始成员,在此期间积累了近6年的经验。 在业余时间,他喜欢学习古典音乐和探索视觉艺术。 他也非常着迷于修复工具。 他已拥有5。