Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Pure CSS Tables

  • Difficulty Level : Hard
  • Last Updated : 28 Sep, 2021

Introduction: Before starting with Pure we must know the basics of plain CSS. Basically, Pure CSS is a Cascading Style Sheet framework developed by YAHOO. The main reason for developing Pure CSS is used to develop responsive and reactive websites like Bootstrap which is also compatible with mobile devices and it is an open-source CSS framework and free to use. It can be the best alternative to Materialize CSS.

In this article, we will understand what is Pure CSS Table is? and learn how to use it in our project.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

As we think of creating web pages, we know that tables are a nice and easy way to organize a lot of data in websites into the form of rows and columns. By using the Pure CSS framework, we will be able to design different types of tables.

Pure CSS provides a number of utility classes to style tables, there basically 5 main classes as listed below:



  • pure-table: This class is used to style the table with default padding and border assign to table elements with an emphasized header.
  • pure-table-bordered: This class is used to draw borders on the table vertical and horizontal to all the table cells.
  • pure-table-horizontal: This class is used to draw the table with only horizontal lines.
  • pure-table-odd: This class is used to create a striped table with the zebra-styled effect which is more visible and attractive for the users.
  • pure-table-striped: Basically it is used to display striped tables. It Automatically Striped a table after pass to the <table> element alongside the pure-table class.
     

Examples: Now here we learn how to use table classes in HTML.

1. Default Table: The pure-table class is used in <table> tag to create a basic table with some basic CSS styling, these tables are just like the normal HTML tables with some padding and border added to table elements with the header. 

HTML




<!DOCTYPE html>
<html>
  <head>
    <!-- Import Pure CSS -->
    <link rel="stylesheet"
          integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
          crossorigin="anonymous"
          origin="anonymous"
    />
 
    <!-- Used to optimized Website for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <style>
      .container {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      h1 {
        color: green;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>GeeksforGeeks</h1>
      <h2>Default Table</h2>
       
      <!-- Here pure-table class is used -->
      <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>
            <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>
    </div>
  </body>
</html>

Output:

2. Bordered Table: Here we use the pure-table-bordered class is used to create a bordered table. This class will add vertical and horizontal borders to all the cells of the table.

HTML




<!DOCTYPE html>
<html>
  <head>
    <!-- Import Pure CSS -->
    <link rel="stylesheet"
          integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
          crossorigin="anonymous"
          origin="anonymous"
    />
 
    <!-- Used to optimized Website for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <style>
      .container {
        margin-top: 20px;
        display: flex;
        align-items: center;
 
        justify-content: center;
        flex-direction: column;
      }
      h1 {
        color: green;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>GeeksforGeeks</h1>
      <h2>Bordered Table</h2>
      <!-- Here pure-table and pure-table-bordered class is used -->
 
      <table class="pure-table pure-table-bordered">
        <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>
    </div>
  </body>
</html>

Output:

3. Table with Horizontal Borders: Here we used the pure-table-horizontal class to create this type of table. This will create a table with horizontal lines only.

HTML




<!DOCTYPE html>
<html>
  <head>
    <!-- Import Pure CSS -->
    <link rel="stylesheet"
          integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
          crossorigin="anonymous"
          origin="anonymous"
    />
 
    <!-- Used to optimized Website for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <style>
      .container {
        margin-top: 20px;
        display: flex;
        align-items: center;
 
        justify-content: center;
        flex-direction: column;
      }
      h1 {
        color: green;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>GeeksforGeeks</h1>
      <h2>Horizontal Bordered Table</h2>
 
      <!-- Here pure-table and pure-table-horizontal class is used -->
      <table class="pure-table pure-table-horizontal">
        <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>
    </div>
  </body>
</html>

Output:

4. Striped Table: For better visualization of large-size tables we can use striped cells. For a striped table here we used the pure-table-odd Pure CSS class in the every <tr> element tag to change the background of the odd rows. This will create a striped table with the zebra-styled effect which is more visible and attractive for a large number of data to the user.

HTML




<!DOCTYPE html>
<html>
  <head>
    <!-- Import Pure CSS -->
    <link rel="stylesheet"
          integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
          crossorigin="anonymous"
          origin="anonymous"
    />
 
    <!-- Used to optimized Website for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <style>
      .container {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      h1 {
        color: green;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>GeeksforGeeks</h1>
      <h2>Horizontal Bordered Table</h2>
 
      <!-- Here pure-table class is used -->
      <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>
            <td>1</td>
            <td>Rohit</td>
            <td>10000</td>
            <td>29</td>
            <td>97</td>
            <td>55</td>
          </tr>
 
          <!--Here pure-table-odd class used
            to change background of row-->
          <tr class="pure-table-odd">
            <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 class="pure-table-odd">
            <td>4</td>
            <td>Rishabh</td>
            <td>4000</td>
            <td>2</td>
            <td>89</td>
            <td>39</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Output:

In this article, we learn what is Pure CSS Table is, its classes, and how to use it in various tables.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!