bulma/docs/documentation/elements/table.html

---
layout: documentation
doc-tab: elements
doc-subtab: table
---

{% include subnav-elements.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Tables</h1>
    <h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>

    <hr>

    <div class="example">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Open source projects</th>
            <th>Year started</th>
            <th colspan="3">Links</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th></th>
            <th>Open source projects</th>
            <th>Year started</th>
            <th colspan="3">Links</th>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td class="is-icon">
              <i class="fa fa-android"></i>
            </td>
            <td>
              <a href="#">Android</a>
            </td>
            <td>
              2003
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-github"></i>
              </a>
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-twitter"></i>
              </a>
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-globe"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="is-icon">
              <i class="fa fa-firefox"></i>
            </td>
            <td>
              <a href="#">Firefox</a>
            </td>
            <td>
              2003
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-github"></i>
              </a>
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-twitter"></i>
              </a>
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-globe"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="is-icon">
              <i class="fa fa-linux"></i>
            </td>
            <td>
              <a href="#">Linux</a>
            </td>
            <td>
              2003
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-github"></i>
              </a>
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-twitter"></i>
              </a>
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-globe"></i>
              </a>
            </td>
          </tr>
          <tr>
            <td class="is-icon">
              <i class="fa fa-wordpress"></i>
            </td>
            <td>
              <a href="#">WordPress</a>
            </td>
            <td>
              2003
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-github"></i>
              </a>
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-twitter"></i>
              </a>
            </td>
            <td class="is-icon">
              <a href="#">
                <i class="fa fa-globe"></i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

{% highlight html %}
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Instrument</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Instrument</th>
      <th></th>
      <th></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Misty Abbott</td>
      <td>Bass Guitar</td>
      <td class="is-icon">
        <a href="#">
          <i class="fa fa-twitter"></i>
        </a>
      </td>
      <td class="is-icon">
        <a href="#">
          <i class="fa fa-instagram"></i>
        </a>
      </td>
    </tr>
    <tr>
      <td>John Smith</td>
      <td>Rhythm Guitar</td>
      <td class="is-icon">
        <a href="#">
          <i class="fa fa-twitter"></i>
        </a>
      </td>
      <td class="is-icon">
        <a href="#">
          <i class="fa fa-instagram"></i>
        </a>
      </td>
    </tr>
    <tr>
      <td>Robert Mikels</td>
      <td>Lead Guitar</td>
      <td class="is-icon">
        <a href="#">
          <i class="fa fa-twitter"></i>
        </a>
      </td>
      <td class="is-icon">
        <a href="#">
          <i class="fa fa-instagram"></i>
        </a>
      </td>
    </tr>
    <tr>
      <td>Karyn Holmberg</td>
      <td>Drums</td>
      <td class="is-icon">
        <a href="#">
          <i class="fa fa-twitter"></i>
        </a>
      </td>
      <td class="is-icon">
        <a href="#">
          <i class="fa fa-instagram"></i>
        </a>
      </td>
    </tr>
  </tbody>
</table>
{% endhighlight %}

    <hr>

    <h3 class="title">Modifiers</h3>

    <div class="columns">
      <div class="column">
        <p>Add <strong>borders</strong> to all the cells.</p>
      </div>
      <div class="column">
        <code>table is-bordered</code>
      </div>
      <div class="column is-half">
        <table class="table is-bordered">
          <thead>
            <tr>
              <th>One</th>
              <th>Two</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Three</td>
              <td>Four</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="columns">
      <div class="column">
        <p>Add <strong>stripes</strong> to the table.</p>
      </div>
      <div class="column">
        <code>table is-striped</code>
      </div>
      <div class="column is-half">
        <table class="table is-striped">
          <thead>
            <tr>
              <th>One</th>
              <th>Two</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Three</td>
              <td>Four</td>
            </tr>
            <tr>
              <td>Five</td>
              <td>Six</td>
            </tr>
            <tr>
              <td>Seven</td>
              <td>Eight</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="columns">
      <div class="column">
        <p>Make the cells <strong>narrower</strong>.</p>
      </div>
      <div class="column">
        <code>table is-narrow</code>
      </div>
      <div class="column is-half">
        <table class="table is-narrow">
          <thead>
            <tr>
              <th>One</th>
              <th>Two</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Three</td>
              <td>Four</td>
            </tr>
            <tr>
              <td>Five</td>
              <td>Six</td>
            </tr>
            <tr>
              <td>Seven</td>
              <td>Eight</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="columns">
      <div class="column">
        <p>You can <strong>combine</strong> all three modifiers.</p>
      </div>
      <div class="column">
        <code>table is-bordered is-striped is-narrow</code>
      </div>
      <div class="column is-half">
        <table class="table is-bordered is-striped is-narrow">
          <thead>
            <tr>
              <th>One</th>
              <th>Two</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Three</td>
              <td>Four</td>
            </tr>
            <tr>
              <td>Five</td>
              <td>Six</td>
            </tr>
            <tr>
              <td>Seven</td>
              <td>Eight</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>