Materializar - Mesas

Materialise se puede usar para mostrar diferentes tipos de tablas usando varios estilos sobre la tabla.

No Señor. Nombre y descripción de la clase
1

None

Representa una tabla básica sin ningún borde.

2

stripped

Muestra una tabla despojada.

3

bordered

Dibuja una tabla con un borde entre filas.

4

highlight

Dibuja una tabla resaltada.

5

centered

Dibuja una tabla con todo el centro del texto alineado en la tabla.

6

responsive-table

Dibuja una tabla receptiva para mostrar una barra de desplazamiento horizontal, si la pantalla es demasiado pequeña para mostrar el contenido.

Ejemplo

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>

Resultado

Verifica el resultado.