Pure CSS Table

Pure CSS table is used to represent data in tabular form. ?Pure CSS provides different predefined table classes that are used over pure tables to create an attractive table layout.

Pure CSS tables have followings predefined classes that are used to create different table styles.

  • .pure-table -It adds padding and borders to the table elements & also emphasizes the headers.
  • .pure-table-bordered - It is used to create bordered table.
  • .pure-table-horizontal - It is used to add a horizontal line in the table only.
  • .pure-table-striped - It is used to make pure table-striped. If the browser supports CSS3 then it will be shown stripped table.
  • .pure-table-odd -To create a zebra-styled table, simply add the .pure-table-odd class to every other <tr> element.

Default Table

If you want to create a default table in Pure CSS, add the pure-table class to the table element. This class adds padding and borders to <table> elements, and also highlights the table header.

General Syntax

      <table class = "pure-table"></table>
    
Try it now

Source Code

          
            <table class="pure-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Job</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>Web Designer</td>
    </tr>

    <tr></tr>
    <tr>
      <td>Smith Jain</td>
      <td>Graphics Designer</td>
    </tr>

    <tr></tr>
  </tbody>
</table>          
        
Try it now

Source Code: Output

Name Job
Smith Web Designer
Smith Jain Graphics Designer

Bordered Table

This table has horizontal and vertical borders for all the cells. Add the pure-table-bordered class, followed by the pure-table classes, to the table element to create a bordered <table> with pure CSS.

General Syntax

      <table class="pure-table pure-table-bordered"></table>
    
Try it now

Source Code

          
            <table class="pure-table pure-table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Smith</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Doe</td>
      <td>26</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John Smith</td>
      <td>32</td>
    </tr>
  </tbody>
</table>          
        
Try it now

Source Code: Output

# Name Age
1 Smith 25
2 Jane Doe 26
3 John Smith 32

Table with Horizontal Borders

This table has only horizontal line. It does not contain any vertical lines. If you want to create a table with only horizontal lines, then add the pure-table-horizontal class to the <table> element base class.

General Syntax

      <table class="pure-table pure-table-horizontal"></table>
    
Try it now

Source Code

          
            <table class="pure-table pure-table-horizontal">
  <thead>
    <tr>
      <th>Name</th>
      <th>Job</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>Web Designer</td>
    </tr>
    <tr>
      <td>Smith Jain</td>
      <td>Graphics Designer</td>
    </tr>
  </tbody>
</table>          
        
Try it now

Source Code: Output

Name Job
Smith Web Designer
Smith Jain Graphics Designer

Striped Table

To create a pure CSS striped table, simply add the pure-table-odd class to the <tr> tag alternately. It changes the background of the row and creates a zebra-style effect.

General Syntax

      <table class="pure-table">
  <tr class="pure-table-odd"></tr>
</table>
    
Try it now

Source Code

          
            <table class="pure-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Job</th>
    </tr>
  </thead>
  <tbody>
    <tr class="pure-table-odd">
      <td>Smith</td>
      <td>Web Designer</td>
    </tr>
    <tr>
      <td>Smith Jain</td>
      <td>Graphics Designer</td>
    </tr>
    <tr class="pure-table-odd">
      <td>Abhishek Verma</td>
      <td>App Designer</td>
    </tr>
  </tbody>
</table>          
        
Try it now

Source Code: Output

Name Job
Smith Web Designer
Smith Jain Graphics Designer
Abhishek Verma App Designer

Web Tutorials

Pure CSS Table
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4