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:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css"
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:
Example 2:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css"
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:
Reference: https://pure-css.github.io/#stripped-table