Pure.CSS 带边框表格

2025 年 1 月 20 日 | 阅读需 6 分钟

表格是以行和列形式收集的数据集合，有时也采用更详细的配置。它经常用于数据分析、研究和沟通。在 Pure CSS 中将添加“pure-table”类来设置表格的样式。此类突出显示表头，并为表格元素提供内边距和边框。

带边框的表格是指每个单元格周围都有垂直和水平边框的表格。我们将添加“pure-table-bordered”类来创建带边框的表格。

“pure-table-bordered”类名用于 <table> 元素，以将水平和垂直边框添加到所有单元格。

语法

给定的语法用于 pure.CSS 创建带边框的表格。

<table class = "pure-table pure-table-bordered">
<thead>
// Table heading information
</thead>
<tbody>
// Table body information
</tbody>
</table>

描述

此类别已添加到表格中，用于自动设置所有单元格之间的边框。
默认情况下，边框是分隔的，并用于创建浅灰色实线的边框。
pure-table-bordered 类提供即时的视觉增强效果。
它对于显示大型数据集，使其更易于管理和更便于操作者使用尤其有帮助。

“pure-table-bordered”类的过程是什么？

pure-table-bordered 类用于使用 CSS 样式在表格单元格周围应用边框。pure.css border 类包括边框属性，例如边框内边距、边框折叠和边框的浅色框架。让我们检查一下 CSS 类、其属性及其操作。

CSS 边框属性： border CSS 属性用于创建表格单元格的边界。此属性用于操作边缘的粗细、边框线的样式和颜色。默认情况下，我们可以在此属性中设置细、浅灰色和实线边框线。
边框折叠： “border-collapse: collapse;”属性用于将相邻单元格之间的边框合并为单个边框。折叠边框用于设置更干净、更简单的表格边框。
单元格内边距： 应用内边距属性以在表格单元格中设置一些空间。它用于在内容和表格边框之间创建相等的空间，以提高表格的可读性。

因此，使用 pure.css 边框属性，表格中的数据变得更易于理解和使用。它清晰地分成表头和表体中的行和列，以读取数据。

pure-table-bordered 类的主要优点

pure CSS 带边框类在表格中提供以下优点。

1. 提高可读性

此类用于为所有表格单元格绘制边框。它有助于轻松读取所有数据，并将数据单元格与列和行进行比较。此类用于显示具有多个属性的复杂数据集或表格数据。

2. 简单实现

PureCSS 类旨在实现最小配置。 “pure-table-bordered”类应用于 <table> 标记，以便在规定时间内完成项目。

3. 所有设备的一致性

PureCSS 通过设计对所有设备（如手机、笔记本电脑、台式机等）具有响应性。 pure-table-bordered 类与其响应式布局一起用于表格中。它用于适应不同的屏幕尺寸并正确显示数据（在笔记本电脑、台式机和移动设备上看起来都不错）。

4. 干净现代的 UI

PureCSS 的极简方法确保使用 pure-table-bordered 设置样式的表格看起来很现代。边框简单有效，有助于内容表格上的复杂设计。

5. 与其他样式标签兼容

我们可以将 pure-table-bordered 与其他 CSS 元素或类结合使用，而不会出现任何冲突或 UI 不匹配。对于开发人员来说，将 PureCSS 与现有样式或第三方 UI 库集成是一个简单的选择。

pure-table-bordered 类的缺点

以下缺点会进入 pure-table-bordered 类。

1. 缺乏高级功能

Pure-tables-border 提供了一个基本的边框，具有浅灰色、细和实线。我们无法使用不同的颜色、宽度和样式自定义边框。表格边框需要一个 css 元素来实现表格的其他边框样式。

2. 交互性有限

Pure-tables 和 pure-table-bordered 类在 html 表格中是静态的。如果我们需要更动态的实现或高级样式结构，则可以使用第三方库或高级 CSS 标签。

3. 视觉限制

它不用于为表格提供高级视觉或动画边框。它在网站上看起来基本、简单或优雅。 pure css 边框类未提供高级 UI，否则，我们必须使用复杂的表格库。

示例

这些示例描述了整个表格以及表头部分和表体部分的 pure CSS 边框。

示例 1

该示例显示了使用 <table> 标签中的 pure-table-bordered 类为表格标签绘制的基本边框线。

<!DOCTYPE html>
<html>
<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
crossorigin="anonymous">

<table class="pure-table pure-table-bordered">
    <thead>
        <tr>
            <th>Roll no.</th>
            <th>Name</th>
            <th>Age</th>
            <th>Grade</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Rahul</td>
            <td>22</td>
            <td>A</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Rishi</td>
            <td>21</td>
            <td>A</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Ariana</td>
            <td>20</td>
            <td>C</td>
        </tr>
    </tbody>
</table>
</html>

输出

输出显示了使用表格边框属性的表格边框。

说明

我们可以在 <table> 标签中设置“pure-table-bordered”类。
边框显示表格的细、浅灰色和实线边缘。

示例 2

该示例显示了使用 <head> 标签中的 pure-table-bordered 类为表头绘制的基本边框线。边框仅显示标题及其单元格。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width = device-width, initial-scale=1.0">
<link rel = "stylesheet"
href = "https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity = "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin = "anonymous">
<style>
body {
background-color: beige;
margin-left:10px;
}
</style>
<title>  Pure CSS border table </title>
</head>
<body>
<h2> Pure CSS border table </h2>
<p id = "demo"> the pure css border apply to the head section </p>
<table>
<thead class = "pure-table pure-table-bordered">
<tr>
<th>Roll no.</th>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1</td>
<td> Rahul</td>
<td> 22</td>
<td> A</td>
</tr>
<tr>
<td> 2</td>
<td> Rishi</td>
<td> 21</td>
<td> A</td>
</tr>
<tr>
<td> 3</td>
<td> Ariana</td>
<td> 20</td>
<td> C</td>
</tr>
<tr>
<td> 4 </td>
<td> Rama </td>
<td> 24 </td>
<td> B </td>
</tr>
</tbody>
</table>
</body>
</html>

输出

输出显示了使用表格边框属性的表头边框。

说明

边框显示在标题部分及其单元格上。
我们可以在 <thead> 标签中设置“pure-table-bordered”类。

示例 3

该示例显示了使用 <head> 标签中的 pure-table-bordered 类为表头绘制的基本边框线。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0">
<link rel = "stylesheet"
href = "https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity = "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin = "anonymous">
<style>
body {
background-color: beige;
margin-left:10px;
}
</style>
<title>  Pure CSS border table </title>
</head>

<body>

<h2> Pure CSS border table </h2>
<p id = "demo"> the pure css border apply to the body section </p>
<table>
<thead>
<tr>
<th>Roll no.</th>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
</thead>
<tbody class = "pure-table pure-table-bordered">
<tr>
<td> 1</td>
<td> Rahul</td>
<td> 22</td>
<td> A</td>
</tr>
<tr>
<td> 2 </td>
<td> Rishi </td>
<td> 21</td>
<td> A</td>
</tr>
<tr>
<td> 3</td>
<td> Ariana </td>
<td> 20 </td>
<td> C </td>
</tr>
<tr>
<td> 4 </td>
<td> Rama </td>
<td> 24 </td>
<td> B </td>
</tr>
</tbody>
</table>
</body>
</html>

输出

输出显示了使用表格边框属性的表体边框。