Materialize CSS Tables

by Online Tutorials Library July 14, 2022

Materialize CSS Table

In Materialize CSS, you can display different types of tables using various styles. Following is a list of various styles:

Index	Class name	Description
1)	none	It is used to represent a basic table without any border.
2)	stripped	It is used to display a stripped table.
3)	bordered	It is used to draw a table with a border across rows.
4)	highlight	It is used to draw a highlighted table.
5)	centered	It is used to draw a table with all the text center aligned in the table.
6)	responsive-table	It is used to draw a responsive table to show a horizontal scrollbar, if the screen is too small to display the content.

Example

Let’s take an example to demonstrate different types of tables in Materialize CSS. This example contains simple table, stripped table, centered table and responsive table.

 <!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>ID</th>                <th>Name</th>                <th>Address</th>             </tr>          </thead>                 <tbody>             <tr>                <td>1</td>                <td>Ajeet</td>                <td>Allahabad</td>             </tr>              <tr>                <td>2</td>                <td>Rahul</td>                <td>Bombay</td>             </tr>                       <tr>                <td>3</td>                <td>Mohan</td>                <td>Mathura</td>             </tr>          </tbody>       </table>              <h3>Stripped Table with borders</h3>       <table class = “striped bordered”>          <thead>             <tr>                <th>ID</th>                <th>Name</th>                <th>Address</th>             </tr>          </thead>                    <tbody>             <tr>               <td>1</td>                <td>Ajeet</td>                <td>Allahabad</td>             </tr>              <tr>                <td>2</td>                <td>Rahul</td>                <td>Bombay</td>             </tr>                       <tr>                <td>3</td>                <td>Mohan</td>                <td>Mathura</td>             </tr>          </tbody>       </table>              <hr/>       <h3>Centered Table</h3>       <table class = “centered”>          <thead>             <tr><th>ID</th>                <th>Name</th>                <th>Address</th>             </tr>          </thead>                    <tbody>             <tr>                <td>1</td>                <td>Ajeet</td>                <td>Allahabad</td>             </tr>              <tr>                <td>2</td>                <td>Rahul</td>                <td>Bombay</td>             </tr>                       <tr>                <td>3</td>                <td>Mohan</td>                <td>Mathura</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>Ajeet</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</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</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> 

Test it Now

Next TopicMaterialize CSS Typography

Materialize CSS Tables

Materialize CSS Table

Sticky Notes for Ubuntu

Azure Portal Overview

You may also like