In this tutorial, I’m going to show you how-to create a data table using Material Design Lite.This is what we are trying to create:

See the Pen Material Design Lite: Table by Brandon Himpfen (@brandonhimpfen) on CodePen.

HTML



    <!-- Material Design Lite CSS -->
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
    <!-- Material Design Lite Font Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
      <thead>
        <tr>
          <th class="mdl-data-table__cell--non-numeric">Material</th>
          <th>Quantity</th>
          <th>Unit price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
          <td>25</td>
          <td>$2.90</td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
          <td>50</td>
          <td>$1.25</td>
        </tr>
        <tr>
          <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
          <td>10</td>
          <td>$2.35</td>
        </tr>
      </tbody>
      <tfoot>
        <td class="mdl-data-table__cell--non-numeric" colspan="3">
          This is a footer. Add notes here.
        </td>
      </tfoot>
    </table>

    <!-- Material Design Lite JavaScript -->
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>

CSS

body {
  background: #eee;
}
table {
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}