为现代开发中的表格和浮动元素辩护

二十多年前，表格是 HTML 中创建网页的主要方式。 它使网页构建者能够一致地控制使用某些“设计”构建页面。 网站不再只需要以线性方式从上到下排列——它们可以设置为具有左右和上下对齐的列。 当时，这被视为一项巨大的突破。

然而，表格从未被设计用于页面布局，事实上，当今天以这种方式使用时，它们存在各种各样的问题。 这是一个方便的技巧，但在当时，它非常受欢迎，特别是对于那些试图实现以前方法无法处理的超特定布局的人。

快进到今天，现在很明显表格布局方法存在大量问题。 可访问性是一个主要问题。<table>、<th>、<tr> 和 <td> 元素并非完全可访问，尤其是在它们嵌套多层时。 屏幕阅读器——读取网页内容并作为可访问性合规性衡量标准的设备——难以将其解析为连贯的内容块。 这并不是说表格不好；它们只是从未被设计为布局机制。

查看此表格布局。 随意通过 VoiceOver 或您可访问的任何屏幕阅读器软件运行它。

是的，此示例看起来非常像典型的网站布局，但它是仅使用表格制作的。 您可以看到，当我们开始将其用于表格数据以外的任何用途时，它变得多么臃肿且难以访问。

因此，在经历了 20 多年的考验之后，您可能会认为我们应该完全避免使用表格。 如果您从未发布过基于表格的布局，那么您无疑听过我们这些发布过的人讲的故事，而这些故事从来都不友好。 就好像我们已经将表格变成了“HTML 元素中的 Internet Explorer”。

但这并不完全公平，因为表格确实在网络上发挥着作用，并且在正确使用时确实可以访问。

表格旨在处理语义相关的并且最好以线性格式呈现的数据。 因此，是的，我们可以在 2020 年今天使用表格，并且在未来许多年里可能仍将如此。

这是一个用于显示其预期用途的表格：**表格数据**！

随着 21 世纪初对 Web 标准的推动，表格作为布局解决方案被推到了一边，转而采用其他方法，最值得注意的是 CSS float 属性。 设计师和开发人员都欢欣鼓舞，因为我们第一次有了真正的关注点分离，它可以让标记执行其需要执行的标记任务，而 CSS 执行其需要执行的可视化任务。 这使得代码既更简洁又更容易维护，因此，我们实际上可以专注于真正的标准，例如可访问性，甚至其他实践，例如 SEO。

看看（或者更确切地说听听）此示例中的区别？

我们中的许多人在过去都使用过浮动元素。 它们最初旨在允许内容围绕浮动到左侧或右侧的图像流动，并且仍然在文档流中。 现在我们已经获得了更新的布局功能——同样，例如网格和弹性盒——浮动元素也逐渐被淘汰，也许是因为有更好的方法来完成它们的工作，或者因为在被（滥）用很长时间后，它们也获得了与表格相同的坏名声。

但浮动元素仍然有用且相关！ 事实上，我们必须使用它们才能使shape-outside 属性起作用。

一个合法的float 使用案例可能是为了围绕带样式的<blockquote> 包装内容。

网格、弹性盒和多列布局等 CSS 功能是我们如今可以使用的绝佳工具。 凭借更多布局可能性、更简洁和更易访问的代码，它们将在未来许多年内仍然是我们首选的布局方法。

在此弹性盒示例中，我们无需在本文中查看的相同布局中使用任何技巧或额外代码

---

因此，下次您考虑使用表格或浮动元素时，请充满信心地使用它们！ 嗯，当您知道情况与它们的预期用途一致时。 我并不指望您离开这里后会对表格和浮动元素产生新的热情；只是，当正确使用时，它们是完全有效的技术，甚至仍然是我们整体工具集中不可或缺的一部分。