Materializar CSS | Mesas

    html

    <!DOCTYPE html>
    <html>
     
    <head>
     
        <!--Import Google Icon Font-->
        <link href=
    "https://fonts.googleapis.com/icon?family=Material+Icons"
            rel="stylesheet">
     
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href=
    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
     
        <!--Let browser know website is
            optimized for mobile-->
        <meta name="viewport" content=
            "width=device-width, initial-scale=1.0" />
    </head>
     
    <body>
        <table class="striped">
            <thead>
                <tr>
                    <th>Student</th>
                    <th>Study Time(days)</th>
                    <th>Marks</th>
                </tr>
            </thead>
     
            <tbody>
                <tr>
                    <td>Atul</td>
                    <td>2</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td>Aman</td>
                    <td>4</td>
                    <td>71</td>
                </tr>
                <tr>
                    <td>Ansh</td>
                    <td>2</td>
                    <td>98</td>
                </tr>
                <tr>
                    <td>John</td>
                    <td>5</td>
                    <td>96</td>
                </tr>
            </tbody>
        </table>
     
        <!-- Compiled and minified JavaScript -->
        <script src=
    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
        </script>
    </body>
     
    </html>
    

    Producción:

      html

      <!DOCTYPE html>
      <html>
       
      <head>
          <!--Import Google Icon Font-->
          <link href=
      "https://fonts.googleapis.com/icon?family=Material+Icons"
              rel="stylesheet">
       
          <!-- Compiled and minified CSS -->
          <link rel="stylesheet" href=
      "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
       
          <!--Let browser know website is
              optimized for mobile-->
          <meta name="viewport" content=
              "width=device-width, initial-scale=1.0" />
      </head>
       
      <body>
          <table class="bordered">
              <thead>
                  <tr>
                      <th>Student</th>
                      <th>Study Time(days)</th>
                      <th>Marks</th>
                  </tr>
              </thead>
       
              <tbody>
                  <tr>
                      <td>Atul</td>
                      <td>2</td>
                      <td>80</td>
                  </tr>
                  <tr>
                      <td>Aman</td>
                      <td>4</td>
                      <td>71</td>
                  </tr>
                  <tr>
                      <td>Ansh</td>
                      <td>2</td>
                      <td>98</td>
                  </tr>
                  <tr>
                      <td>John</td>
                      <td>5</td>
                      <td>96</td>
                  </tr>
              </tbody>
          </table>
       
          <!-- Compiled and minified JavaScript -->
          <script src=
      "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
          </script>
      </body>
       
      </html>
      

      Producción:

      •  

      html

      <!DOCTYPE html>
      <html>
       
      <head>
          <!--Import Google Icon Font-->
          <link href=
      "https://fonts.googleapis.com/icon?family=Material+Icons"
              rel="stylesheet">
       
          <!-- Compiled and minified CSS -->
          <link rel="stylesheet" href=
      "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
       
          <!--Let browser know website is
              optimized for mobile-->
          <meta name="viewport" content=
              "width=device-width, initial-scale=1.0" />
      </head>
       
      <body>
          <table class="highlight">
              <thead>
                  <tr>
                      <th>Student</th>
                      <th>Study Time(days)</th>
                      <th>Marks</th>
                  </tr>
              </thead>
       
              <tbody>
                  <tr>
                      <td>Atul</td>
                      <td>2</td>
                      <td>80</td>
                  </tr>
                  <tr>
                      <td>Aman</td>
                      <td>4</td>
                      <td>71</td>
                  </tr>
                  <tr>
                      <td>Ansh</td>
                      <td>2</td>
                      <td>98</td>
                  </tr>
                  <tr>
                      <td>John</td>
                      <td>5</td>
                      <td>96</td>
                  </tr>
              </tbody>
          </table>
       
          <!-- Compiled and minified JavaScript -->
          <script src=
      "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
          </script>
      </body>
       
      </html>
      

      Producción:

      •  

      html

      <!DOCTYPE html>
      <html>
       
      <head>
          <!--Import Google Icon Font-->
          <link href=
      "https://fonts.googleapis.com/icon?family=Material+Icons"
              rel="stylesheet">
       
          <!-- Compiled and minified CSS -->
          <link rel="stylesheet" href=
      "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
       
          <!--Let browser know website is
              optimized for mobile-->
          <meta name="viewport" content=
              "width=device-width, initial-scale=1.0" />
      </head>
       
      <body>
          <table class="centered">
              <thead>
                  <tr>
                      <th>Student</th>
                      <th>Study Time(days)</th>
                      <th>Marks</th>
                  </tr>
              </thead>
       
              <tbody>
                  <tr>
                      <td>Atul</td>
                      <td>2</td>
                      <td>80</td>
                  </tr>
                  <tr>
                      <td>Aman</td>
                      <td>4</td>
                      <td>71</td>
                  </tr>
                  <tr>
                      <td>Ansh</td>
                      <td>2</td>
                      <td>98</td>
                  </tr>
                  <tr>
                      <td>John</td>
                      <td>5</td>
                      <td>96</td>
                  </tr>
              </tbody>
          </table>
       
          <!-- Compiled and minified JavaScript -->
          <script src=
      "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
          </script>
      </body>
       
      </html>
      

      Producción:

        html

        <!DOCTYPE html>
        <html>
         
        <head>
            <!--Import Google Icon Font-->
            <link href=
        "https://fonts.googleapis.com/icon?family=Material+Icons"
                rel="stylesheet">
         
            <!-- Compiled and minified CSS -->
            <link rel="stylesheet" href=
        "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
         
            <!--Let browser know website is
                optimized for mobile-->
            <meta name="viewport" content=
                "width=device-width, initial-scale=1.0" />
        </head>
         
        <body>
            <table class="responsive-table">
                <thead>
                    <tr>
                        <th>Student</th>
                        <th>Study Time(days)</th>
                        <th>Marks</th>
                    </tr>
                </thead>
         
                <tbody>
                    <tr>
                        <td>Atul</td>
                        <td>2</td>
                        <td>80</td>
                    </tr>
                    <tr>
                        <td>Aman</td>
                        <td>4</td>
                        <td>71</td>
                    </tr>
                    <tr>
                        <td>Ansh</td>
                        <td>2</td>
                        <td>98</td>
                    </tr>
                    <tr>
                        <td>John</td>
                        <td>5</td>
                        <td>96</td>
                    </tr>
                </tbody>
            </table>
         
            <!-- Compiled and minified JavaScript -->
            <script src=
        "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
            </script>
        </body>
         
        </html>
        

        Producción:

        Publicación traducida automáticamente

        Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

        Deja una respuesta

        Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *