materialize-css/jade/page-contents/table_content.html

Builds Materialize distribution packages

<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

      <!--  Tables Section-->
      <div id="tables" class="section scrollspy">
        <p class="caption">Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible. In addition, to improve mobile experience, all tables on mobile-screen widths are centered automatically.</p>
        <h2 class="header">Borderless Table</h2>
        <div class="row">
          <div class="col s12">
            <p>Tables are borderless by default.</p>
            <table>
              <thead>
                <tr>
                    <th data-field="id">Name</th>
                    <th data-field="name">Item Name</th>
                    <th data-field="price">Item Price</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <td>Alvin</td>
                  <td>Eclair</td>
                  <td>$0.87</td>
                </tr>
                <tr>
                  <td>Alan</td>
                  <td>Jellybean</td>
                  <td>$3.76</td>
                </tr>
                <tr>
                  <td>Jonathan</td>
                  <td>Lollipop</td>
                  <td>$7.00</td>
                </tr>
                <tr>
                  <td>Shannon</td>
                  <td>KitKat</td>
                  <td>$9.99</td>
                </tr>
              </tbody>

            </table>
          </div>
          <div class="col s12">
            <pre><code class="language-markup">
      &lt;table>
        &lt;thead>
          &lt;tr>
              &lt;th data-field="id">Name&lt;/th>
              &lt;th data-field="name">Item Name&lt;/th>
              &lt;th data-field="price">Item Price&lt;/th>
          &lt;/tr>
        &lt;/thead>

        &lt;tbody>
          &lt;tr>
            &lt;td>Alvin&lt;/td>
            &lt;td>Eclair&lt;/td>
            &lt;td>$0.87&lt;/td>
          &lt;/tr>
          &lt;tr>
            &lt;td>Alan&lt;/td>
            &lt;td>Jellybean&lt;/td>
            &lt;td>$3.76&lt;/td>
          &lt;/tr>
          &lt;tr>
            &lt;td>Jonathan&lt;/td>
            &lt;td>Lollipop&lt;/td>
            &lt;td>$7.00&lt;/td>
          &lt;/tr>
        &lt;/tbody>
      &lt;/table>
            </code></pre>
          </div>
        </div>
      </div>

      <div id="bordered" class="section scrollspy">
        <h2 class="header">Bordered Table</h2>
        <div class="row">
          <div class="col s12">
            <p>Add <code class="language-markup">class="bordered"</code> to the table tag for a bordered table</p>
            <table class="bordered">
              <thead>
                <tr>
                    <th data-field="id">Name</th>
                    <th data-field="name">Item Name</th>
                    <th data-field="price">Item Price</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Alvin</td>
                  <td>Eclair</td>
                  <td>$0.87</td>
                </tr>
                <tr>
                  <td>Alan</td>
                  <td>Jellybean</td>
                  <td>$3.76</td>
                </tr>
                <tr>
                  <td>Jonathan</td>
                  <td>Lollipop</td>
                  <td>$7.00</td>
                </tr>
                <tr>
                  <td>Shannon</td>
                  <td>KitKat</td>
                  <td>$9.99</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div id="striped" class="section scrollspy">
        <h2 class="header">Striped Table</h2>
        <div class="row">
          <div class="col s12">
            <p>Add <code class="language-markup">class="striped"</code> to the table tag for a striped table</p>
            <table class="striped">
              <thead>
                <tr>
                    <th data-field="id">Name</th>
                    <th data-field="name">Item Name</th>
                    <th data-field="price">Item Price</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Alvin</td>
                  <td>Eclair</td>
                  <td>$0.87</td>
                </tr>
                <tr>
                  <td>Alan</td>
                  <td>Jellybean</td>
                  <td>$3.76</td>
                </tr>
                <tr>
                  <td>Jonathan</td>
                  <td>Lollipop</td>
                  <td>$7.00</td>
                </tr>
                <tr>
                  <td>Shannon</td>
                  <td>KitKat</td>
                  <td>$9.99</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div id="highlight" class="section scrollspy">
        <h2 class="header">Highlight Table</h2>
        <div class="row">
          <div class="col s12">
            <p>Add <code class="language-markup">class="highlight"</code> to the table tag for a highlight table</p>
            <table class="highlight">
              <thead>
                <tr>
                    <th data-field="id">Name</th>
                    <th data-field="name">Item Name</th>
                    <th data-field="price">Item Price</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Alvin</td>
                  <td>Eclair</td>
                  <td>$0.87</td>
                </tr>
                <tr>
                  <td>Alan</td>
                  <td>Jellybean</td>
                  <td>$3.76</td>
                </tr>
                <tr>
                  <td>Jonathan</td>
                  <td>Lollipop</td>
                  <td>$7.00</td>
                </tr>
                <tr>
                  <td>Shannon</td>
                  <td>KitKat</td>
                  <td>$9.99</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div id="centered" class="section scrollspy">
        <h2 class="header">Centered Table</h2>
        <div class="row">
          <div class="col s12">
            <p>Add <code class="language-markup">class="centered"</code> to the table tag to center align all the text in the table</p>
            <table class="centered">
              <thead>
                <tr>
                    <th data-field="id">Name</th>
                    <th data-field="name">Item Name</th>
                    <th data-field="price">Item Price</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Alvin</td>
                  <td>Eclair</td>
                  <td>$0.87</td>
                </tr>
                <tr>
                  <td>Alan</td>
                  <td>Jellybean</td>
                  <td>$3.76</td>
                </tr>
                <tr>
                  <td>Jonathan</td>
                  <td>Lollipop</td>
                  <td>$7.00</td>
                </tr>
                <tr>
                  <td>Shannon</td>
                  <td>KitKat</td>
                  <td>$9.99</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>

      <div id="responsive" class="section scrollspy">
        <h2 class="header">Responsive Table</h2>
        <div class="row">
          <div class="col s12">
            <p>Add <code class="language-markup">class="responsive-table"</code> to the table tag to make the table horizontally scrollable on smaller screen widths.</p>
            <table class="responsive-table">
              <thead>
                <tr>
                    <th data-field="id">Name</th>
                    <th data-field="name">Item Name</th>
                    <th data-field="price">Item Price</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Alvin</td>
                  <td>Eclair</td>
                  <td>$0.87</td>
                </tr>
                <tr>
                  <td>Alan</td>
                  <td>Jellybean</td>
                  <td>$3.76</td>
                </tr>
                <tr>
                  <td>Jonathan</td>
                  <td>Lollipop</td>
                  <td>$7.00</td>
                </tr>
                <tr>
                  <td>Shannon</td>
                  <td>KitKat</td>
                  <td>$9.99</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>


    </div><!--  End Tables Section  -->

    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#tables">Borderless</a></li>
            <li><a href="#bordered">Bordered</a></li>
            <li><a href="#striped">Striped</a></li>
            <li><a href="#highlight">Highlight</a></li>
            <li><a href="#centered">Centered</a></li>
            <li><a href="#responsive">Responsive</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>