Pure.CSS - Tables

Pure.CSS can be used to display different types of tables using various styles over pure-table

Sr.No. Class Name & Description
1

pure-table

Represents a basic table with any a default padding, border and an emphasized header.
2

pure-table-bordered

Draws a table with a border across rows.
3

pure-table-horizontal

Draws a table with horizontal lines.
4

pure-table-striped

Displays a stripped table.
5

pure-table-odd

If applied on every other tr,changes the background of the row and creates a zebra-styled effect.

Example

purecss_tables.htm

Live Demo 
<html>
   <head>
      <title>The PURE.CSS Tables</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
	  
      <table class = "pure-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Bordered Table</h3>
      <table class="pure-table pure-table-bordered">
         <thead>
            <tr><
               th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Table with Horizontal Borders</h3>
      <table class="pure-table pure-table-horizontal">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Stripped Table</h3>
      <table class = "pure-table pure-table-striped">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Result

Verify the result.

Advertisements