Pure.CSS 默认表格

在开始使用 Pure 之前，我们必须了解 Plain CSS 的基础知识。 YAHOO 创建了 Pure CSS，它本质上是一个层叠样式表的基础。 创建 Pure CSS 的主要目标是创建响应式和反应式网站，例如 Bootstrap，它可免费使用，是一个与移动设备兼容的开源 CSS 框架。 它可能是 Materialize CSS 的最佳替代品。

我们将通过文章的方式学习 Pure CSS 表格，并熟练地使用它来完成我们的工作。 当涉及到构建网页时，我们知道表格是将大量数据排列成行和列的一种方便而简单的方法。

概述

“pure-table”类名用于在 Pure.CSS 中创建一个默认表格。

默认情况下，此类别将填充和边框添加到表格元素，并强调标题。

Pure CSS 框架将允许我们创建各种表格设计。 Pure CSS 中有几个用于设置表格样式的实用程序类。 五个主要类别如下，以及默认表格类别

• pure-table: 此类别通过为表格元素分配边框，并强调标题和使用默认填充来设置表格样式。
• pure-table-bordered: 此类别用于为每个表格单元格提供垂直和水平边框。
• pure-table-horizontal: 使用此类绘制仅包含水平线的表格。
• pure-table-odd: 此类别用于生成斑马风格的条纹表格，这对于用户来说更具美感和引人注目。
• Pure-table-striped: 这种显示方式主要用于条纹表格。 在将表格传递给具有 pure-table 类的元素之后，它会自动剥离表格。

语法

以下语法显示了使用 pure css 类的默认表格。

示例

多个示例显示了带有不同表格类及其 UI 类的默认表格。

示例 1

该示例显示了使用 pure css 类的默认表格。

输出

输出显示默认表格。

说明

• 使用纯表格类在标签中创建一个带有基本 CSS 样式的简单表格。
• 这些表格与标准 HTML 表格相同，只是标题已更新以包含一些填充和边框。

示例 2

该示例显示了使用带有默认边框的纯表格类的默认表格。

输出

输出显示带有边框的默认表格。

说明

• 我们使用 pure-table-bordered 类创建一个带边框的表格。
• 此类别将为表格的所有单元格添加垂直和水平边框。

示例 3

该示例显示了使用带有水平边框的纯表格类的默认表格。

输出

输出显示带有水平边框的默认表格。

说明

• 我们使用 pure-table-horizontal 创建一个水平带边框的表格
• 水平表格边框类需要默认表格。

示例 4

该示例显示了使用纯表格类和条纹表格的默认表格。

输出

输出显示带有水平边框的默认表格。

说明

• 条纹单元格可用于改善大型表格的视觉效果。
• 我们通过在每个元素标记中使用 pure-table odd Pure CSS 类来更改条纹表格中奇数行的背景。
• 这将创建一个具有斑马风格外观的条纹表格，在显示大量数据时，对用户来说更可见且更具吸引力。

结论

pure css 中需要默认表格类来创建表格。 我们可以使用 pure-table 类更新表格 UI。