介绍 CSS 布局

HTML 表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的 CSS 之前——web 开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。

一个标签之所以能够像表格那样展示，是由于 css 默认给标签设置了一组 table 布局属性。当这些属性被应用于排列非元素时，这种用法被称为“使用 CSS 表格”。

下面这个例子展示了一个这样的用法。使用 CSS 表格来进行布局，在现在这个时间点应该被认为是一种传统方法，它通常会被用于兼容一些不支持 Flexbox 和 Grid 的浏览器。

让我们来看一个例子。首先，创建 HTML 表单的一些简单标记。每个输入元素都有一个标签，我们还在一个段落中包含了一个标题。为了进行布局，每个标签/输入对都封装在中。

现在，我们例子中的 CSS。除了使用 display 属性外，大多数 CSS 都是相当普通的。 , , 和被告知要分别显示表、表行和表单元——基本上，它们会像 HTML 表格标记一样，导致标签和输入在默认情况下排列整齐。我们所要做的就是添加一些大小、边缘等等，让一切看起来都好一点，我们就完成了。

你会注意到标题段落已经给出了 display: table-caption;——这使得它看起来就像一个表格 ——同时出于设计需要，我们通过 caption-side: bottom; 告诉标题应该展示在表格的底部，即使这个

标记在源码中是在 之前。这就能让你有一点灵活的弹性。

结果如下：

你可以在 css-tables-example.html 看到预览版 (也可以见源码)