Pure CSS Stripped Table

A 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 a "pure-table" class to add styles to the table. This class adds padding and borders to table elements and emphasizes the header.

Pure CSS Stripped Table Class:

• pure-table-odd: This class is used with <tr> tag to change the background of the row and create a zebra-styled effect.
• pure-table-stripped: This class is used with table tag to create stripped table. This class is used with "pure-table" class.

Syntax:

<table class="pure-table">
 <thead>
 <tr>
 <td></td>
 . . .
 </tr>
 </thead>
 <tbody>
 <tr class="Stripped Table Classd">
 <td></td>
 . . .
 </tr>
 . . .
 </tbody>
</table>

Example 1:

Output:

👁 Pure CSS Striped Table

Example 2:

Output:

👁 Pure CSS Striped Table

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