Pure CSS Table

Pure CSS table is used to represent data in tabular form. Pure CSS provides a different predefined class for the table that will be very helpful for creating an attractive table layout.

Followings are the predefined table classes that are used to create different table styles.These classes are:

  • .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 create a striped table. 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

To create Pure CSS, default table add .pure-table class to the <table> element base class.

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

To create bordered table in Pure CSS, simply add .pure-table-bordered class to the <table> element base class.

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

If you want to create a table with horizontal lines only, 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 to the <tr> element base class alternately.

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