পৃষ্ঠাসমূহ

.

Search Your Article

Total Pageviews

Tuesday, March 7, 2017

Materialize - Tables

Materialize can be used to display different types of tables using various styles over table.
S.N.Class Name & Description
1None
Represents a basic table without any border.
2stripped
Displays a stripped table.
3bordered
Draws a table with a border across rows.
4highlight
Draws a highlighted table.
5centered
Draws a table with all the text center aligned in the table.
6responsive-table
Draws a responsive table to show a horizontal scrollbar, if the screen is too small to display the content.

Example

materialize_tables.htm
<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">      
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>             
      <style>
         div {
            width : 200px; 
            height : 200px;    
         } 
      </style>
   </head>
   <body class="container"> 
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
      <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>Stripped Table with borders</h3>
      <table class="striped 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>
      <hr/>
      <h3>Centered Table</h3>
      <table class="centered">
      <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>Responsive table</h3>
      <table class="responsive-table">
      <thead>
         <tr>
         <th>Student</th><th>Class</th><th>Data #1</th>
         <th>Data #2</th><th>Data #3</th><th>Data #4</th>
         <th>Data #5</th><th>Data #6</th><th>Data #7</th>
         <th>Data #8</th><th>Data #9</th><th>Data #10</th>
         </tr>
      </thead>
      <tbody>
         <tr>
         <td>Mahesh Parashar</td><td>VI</td><td>10</td>
         <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
         <td>16</td><td>17</td><td>19</td><td>20</td>
         </tr>
         <tr>
         <td>Rahul Sharma</td><td>VI</td><td>10</td>
         <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
         <td>16</td><td>17</td><td>19</td><td>20</td>
         </tr>
         <tr><td>Mohan Sood</td><td>VI</td><td>10</td>
         <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
         <td>16</td><td>17</td><td>19</td><td>20</td>
         </tr>
       </tbody>
       </table>
   </body>
</html>

Result

Verify the result.

Tables Demo


Simple Table

StudentClassGrade
Mahesh ParasharVIA
Rahul SharmaVIB
Mohan SoodVIA

Stripped Table with borders

StudentClassGrade
Mahesh ParasharVIA
Rahul SharmaVIB
Mohan SoodVIA

Centered Table

StudentClassGrade
Mahesh ParasharVIA
Rahul SharmaVIB
Mohan SoodVIA

Responsive table

StudentClassData #1 Data #2Data #3Data #4 Data #5Data #6Data #7 Data #8Data #9Data #10
Mahesh ParasharVI10 1112131415 16171920
Rahul SharmaVI10 1112131415 16171920
Mohan SoodVI10 1112131415 16171920

No comments:

Post a Comment