VOOZH about

URL: https://www.geeksforgeeks.org/css/pure-css-bordered-table/

⇱ Pure CSS Bordered Table - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Pure CSS Bordered Table

Last Updated : 23 Jul, 2025

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
Pure CSS Bordered Table

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

Comment
Article Tags: