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:
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 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 Stripped Table
Reference: https://purecss.io/tables/#stripped-table
Please Login to comment...