Open In App

Pure CSS Stripped Table

Improve
Improve
Like Article
Like
Save
Share
Report

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:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
        integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
        crossorigin="anonymous">
</head>
 
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
 
        <h3>Pure CSS Stripped Table</h3>
 
        <table class="pure-table">
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Name</th>
                    <th>Runs</th>
                    <th>Centuries</th>
                    <th>Strike Rate</th>
                    <th>Avg</th>
                </tr>
            </thead>
 
            <tbody>
                <tr class="pure-table-odd">
                    <td>1</td>
                    <td>Rohit</td>
                    <td>10000</td>
                    <td>29</td>
                    <td>97</td>
                    <td>55</td>
                </tr>
 
                <tr>
                    <td>2</td>
                    <td>Virat</td>
                    <td>12000</td>
                    <td>40</td>
                    <td>91</td>
                    <td>49</td>
                </tr>
 
                <tr class="pure-table-odd">
                    <td>3</td>
                    <td>Rahul</td>
                    <td>5000</td>
                    <td>8</td>
                    <td>85</td>
                    <td>45</td>
                </tr>
 
                <tr>
                    <td>4</td>
                    <td>Rishabh</td>
                    <td>4000</td>
                    <td>2</td>
                    <td>89</td>
                    <td>39</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
 
</html>


Output:

Pure CSS Striped Table

Pure CSS Stripped Table

Example 2:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
        integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
        crossorigin="anonymous">
</head>
 
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
 
        <h3>Pure CSS Stripped Table</h3>
 
        <table class="pure-table pure-table-stripped">
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Name</th>
                    <th>Runs</th>
                    <th>Centuries</th>
                    <th>Strike Rate</th>
                    <th>Avg</th>
                </tr>
            </thead>
 
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Rohit</td>
                    <td>10000</td>
                    <td>29</td>
                    <td>97</td>
                    <td>55</td>
                </tr>
 
                <tr>
                    <td>2</td>
                    <td>Virat</td>
                    <td>12000</td>
                    <td>40</td>
                    <td>91</td>
                    <td>49</td>
                </tr>
 
                <tr>
                    <td>3</td>
                    <td>Rahul</td>
                    <td>5000</td>
                    <td>8</td>
                    <td>85</td>
                    <td>45</td>
                </tr>
 
                <tr>
                    <td>4</td>
                    <td>Rishabh</td>
                    <td>4000</td>
                    <td>2</td>
                    <td>89</td>
                    <td>39</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
 
</html>


Output:

Pure CSS Striped Table

Pure CSS Stripped Table

Reference: https://purecss.io/tables/#stripped-table



Last Updated : 04 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads