Google Choice: Materialize

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.
💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.
🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.
🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.
✔ Latest world News

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

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
1	None Represents a basic table without any border.
2	stripped Displays a stripped table.
3	bordered Draws a table with a border across rows.
4	highlight Draws a highlighted table.
5	centered Draws a table with all the text center aligned in the table.
6	responsive-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

Student	Class	Grade
Mahesh Parashar	VI	A
Rahul Sharma	VI	B
Mohan Sood	VI	A

Stripped Table with borders

Student	Class	Grade
Mahesh Parashar	VI	A
Rahul Sharma	VI	B
Mohan Sood	VI	A

Centered Table

Student	Class	Grade
Mahesh Parashar	VI	A
Rahul Sharma	VI	B
Mohan Sood	VI	A

Responsive table

Student	Class	Data #1	Data #2	Data #3	Data #4	Data #5	Data #6	Data #7	Data #8	Data #9	Data #10
Mahesh Parashar	VI	10	11	12	13	14	15	16	17	19	20
Rahul Sharma	VI	10	11	12	13	14	15	16	17	19	20
Mohan Sood	VI	10	11	12	13	14	15	16	17	19	20

পৃষ্ঠাসমূহ

Labels

Search Your Article

CS