Skip to content
Related Articles

Related Articles

Pure CSS Tables
  • Last Updated : 23 Feb, 2021
GeeksforGeeks - Summer Carnival Banner

Tables are essential in websites to arrange data, text, links, forms, images etc into rows and columns. With the help of Pure CSS we can design different types of forms. 

In Pure CSS, we use some classes to style the tables that are listed below:

  • pure-table: This class is used to add some styles on table like – padding and border added to table elements and with emphasized header.
  • pure-table-bordered: This class is used to add borders on 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 striped table with zebra-styled effect which is more visible and attractive for the users.

1. Default Table: These tables are just like the normal HTML tables, but with padding and border added to table elements and with emphasized header. To create a default table add class “pure-table” to the <table> element .

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
        crossorigin="anonymous">
  
    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content
        "width=device-width, initial-scale=1.0" />    
</head>
  
<body>
    <h2>Default Table: </h2>
  
    <!-- Add class "pure-table" -->
    <table class="pure-table">  
        <thead>  
            <tr>  
                <th>Sr no.</th>  
                <th>Employee Name</th>  
                <th>Age</th>  
                <th>Salary</th>  
            </tr>  
        </thead>  
        
        <tbody>  
            <tr>  
                <td>1</td>  
                <td>John</td>  
                <td>27</td>  
                <td>45000</td>  
            </tr>  
        
            <tr>  
                <td>2</td>  
                <td>Mike</td>  
                <td>29</td>  
                <td>36000</td>  
            </tr>  
        
            <tr>  
                <td>3</td>  
                <td>Miara</td>  
                <td>25</td>  
                <td>50000</td>  
            </tr>  
        </tbody>  
    </table>
</body>
  
</html>

Output:



2. Bordered Table: To create a bordered table add class “pure-table-bordered” alongside pure-table to the <table> element. This will add vertical and horizontal borders to all the cells of the table.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Import Pure CSS files -->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
        crossorigin="anonymous">
  
    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content
        "width=device-width, initial-scale=1.0" />
</head>
  
<body>
    <h2>Bordered Table: </h2>
      
    <!-- Add class "pure-table-bordered" -->
    <table class="pure-table pure-table-bordered">  
        <thead>  
            <tr>  
                <th>Sr no.</th>  
                <th>Employee Name</th>  
                <th>Age</th>  
                <th>Salary</th>  
            </tr>  
        </thead>  
        
        <tbody>  
            <tr>  
                <td>1</td>  
                <td>John</td>  
                <td>27</td>  
                <td>45000</td>  
            </tr>  
        
            <tr>  
                <td>2</td>  
                <td>Mike</td>  
                <td>29</td>  
                <td>36000</td>  
            </tr>  
            
            <tr>  
                <td>3</td>  
                <td>Miara</td>  
                <td>25</td>  
                <td>50000</td>  
            </tr>  
        </tbody>  
    </table>
</body>
  
</html>

Output:

3. Table with Horizontal Borders: To create this type of table add class “pure-table-horizontal” alongside pure-table to the <table> element. This will create a table with horizontal lines only.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
        crossorigin="anonymous">
  
    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content
        "width=device-width, initial-scale=1.0" />    
  
</head>
  
<body>
    <h2>Table with Horizontal Borders: </h2>
      
    <!-- Add class "pure-table-horizontal" -->
    <table class="pure-table pure-table-horizontal">  
        <thead>  
            <tr>  
                <th>Sr no.</th>  
                <th>Employee Name</th>  
                <th>Age</th>  
                <th>Salary</th>  
            </tr>  
        </thead>  
        
        <tbody>  
            <tr>  
                <td>1</td>  
                <td>John</td>  
                <td>27</td>  
                <td>45000</td>  
            </tr>  
        
            <tr>  
                <td>2</td>  
                <td>Mike</td>  
                <td>29</td>  
                <td>36000</td>  
            </tr>  
            
            <tr>  
                <td>3</td>  
                <td>Miara</td>  
                <td>25</td>  
                <td>50000</td>  
            </tr>  
        </tbody>  
    </table>  
</body>
  
</html>

Output:

4. Striped Table: Large tables can be easily visualized if the rows are easily distinguishable. Add the class “pure-table-odd” to every other <tr> element to change the background of the row. This creates a striped table with zebra-styled effect which is more visible and attractive for the users.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Import Pure CSS files -->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
        integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
        crossorigin="anonymous">
  
    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content
        "width=device-width, initial-scale=1.0" />    
</head>
  
<body>
    <h2>Striped Table: </h2>
  
    <table class="pure-table">  
        <thead>  
            <tr>  
                <th>Sr no.</th>  
                <th>Employee Name</th>  
                <th>Age</th>  
                <th>Salary</th>  
            </tr>  
        </thead>  
        
        <tbody>  
            <!--Add class "pure-table-odd" 
            to change background of row-->
            <tr class="pure-table-odd">  
                <td>1</td>  
                <td>John</td>  
                <td>27</td>  
                <td>45000</td>  
            </tr>  
        
            <tr>  
                <td>2</td>  
                <td>Mike</td>  
                <td>29</td>  
                <td>36000</td>  
            </tr>  
            
            <tr class="pure-table-odd">  
                <td>3</td>  
                <td>Miara</td>  
                <td>25</td>  
                <td>50000</td>  
            </tr>
              
            <tr>  
                <td>4</td>  
                <td>Jasmin</td>  
                <td>22</td>  
                <td>22000</td>  
            </tr>
              
            <tr class="pure-table-odd">  
                <td>5</td>  
                <td>Anderson</td>  
                <td>24</td>  
                <td>27000</td>  
            </tr>
        </tbody>  
    </table>  
</body>
  
</html>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :