Pure CSS Bordered Table

Table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In Pure CSS, we will add "pure-table" class to add styles on table. This class adds the padding and borders to table elements, and emphasizes the header.

Bordered Table is a table that has horizontal and vertical border to the cell. To make the bordered table, we will add "pure-table-bordered" class.

Pure CSS Bordered Table Class:

• pure-table-bordered: This class is used to created the bordered table. This class is used with pure-table class.

Syntax:

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

Example:

Output:

👁 Pure CSS Bordered Table

Reference: https://pure-css.github.io/#bordered-table