component

Table

A simple HTML table.

Simple format with the class table. Tables are optionaly composed by:

thead
tbody
tfoot

Base table:

  <table class="table">
    <thead>
      <tr>
        <th></th>
        <th>Book Name</th>
        <th>Author Name</th>
        <th>Genre</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Left column 1</td>
        <td>The Book Thief</td>
        <td>Markus Zusak</td>
        <td>Drama</td>
      </tr>
      <tr>
        <td>Left column 2</td>
        <td>The Book Thief</td>
        <td>Markus Zusak</td>
        <td>Historical Fiction</td>
      </tr>
      <tr>
        <td>Left column 3</td>
        <td>Holly Black</td>
        <td>Markus Zusak</td>
        <td>Fantasy</td>
      </tr>
      <tr>
        <td>Left column 4</td>
        <td>Holly Black</td>
        <td> Alex Michaelides</td>
        <td>Psychological Fiction</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Total books:</th>
        <th></th>
        <th></th>
        <th>4</th>
      </tr>
    </tfoot>
  </table>

	Book Name	Author Name	Genre
Left column 1	The Book Thief	Markus Zusak	Drama
Left column 2	The Book Thief	Markus Zusak	Historical Fiction
Left column 3	Holly Black	Markus Zusak	Fantasy
Left column 4	Holly Black	Alex Michaelides	Psychological Fiction
Total books:			4

You can add hover effect by adding is-hoverable modifier:

  <table class="table is-hoverable">
    <thead>
      <tr>
        <th></th>
        <th>Book Name</th>
        <th>Author Name</th>
        <th>Genre</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Left column 1</td>
        <td>The Book Thief</td>
        <td>Markus Zusak</td>
        <td>Drama</td>
      </tr>
      <tr>
        <td>Left column 2</td>
        <td>The Book Thief</td>
        <td>Markus Zusak</td>
        <td>Historical Fiction</td>
      </tr>
      <tr>
        <td>Left column 3</td>
        <td>Holly Black</td>
        <td>Markus Zusak</td>
        <td>Fantasy</td>
      </tr>
      <tr>
        <td>Left column 4</td>
        <td>Holly Black</td>
        <td> Alex Michaelides</td>
        <td>Psychological Fiction</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Total books:</th>
        <th></th>
        <th></th>
        <th>4</th>
      </tr>
    </tfoot>
  </table>

	Book Name	Author Name	Genre
Left column 1	The Book Thief	Markus Zusak	Drama
Left column 2	The Book Thief	Markus Zusak	Historical Fiction
Left column 3	Holly Black	Markus Zusak	Fantasy
Left column 4	Holly Black	Alex Michaelides	Psychological Fiction
Total books:			4

You can format headings and rows by adding the modifier is-alternate which will alternate its colors. This helper class act by chanching the table colors variables and adding row colors:

  <table class="table is-alternate">
    <thead>
      <tr>
        <th></th>
        <th>Book Name</th>
        <th>Author Name</th>
        <th>Genre</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Left column 1</td>
        <td>The Book Thief</td>
        <td>Markus Zusak</td>
        <td>Drama</td>
      </tr>
      <tr>
        <td>Left column 2</td>
        <td>The Book Thief</td>
        <td>Markus Zusak</td>
        <td>Historical Fiction</td>
      </tr>
      <tr>
        <td>Left column 3</td>
        <td>Holly Black</td>
        <td>Markus Zusak</td>
        <td>Fantasy</td>
      </tr>
      <tr>
        <td>Left column 4</td>
        <td>Holly Black</td>
        <td> Alex Michaelides</td>
        <td>Psychological Fiction</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Total books:</th>
        <th></th>
        <th></th>
        <th>4</th>
      </tr>
    </tfoot>
  </table>

	Book Name	Author Name	Genre
Left column 1	The Book Thief	Markus Zusak	Drama
Left column 2	The Book Thief	Markus Zusak	Historical Fiction
Left column 3	Holly Black	Markus Zusak	Fantasy
Left column 4	Holly Black	Alex Michaelides	Psychological Fiction
Total books:			4

Variables

Base table

  :root {
    --table-font-size        : .875rem; // 14px
    --table-lh               : 1.5rem;  // 24px
    --table-border-color     : #f1f5f9;
    --table-cell-spacing-y   : 1rem;    // 16px
    --table-cell-spacing-x   : 2rem;    // 32px
    --table-header-text-color: var(--color-contrast-dark);
    --table-background       : #fff;
    --table-hover-background : var(--color-contrast-background-light);
    --table-header-background: #fff;
    --table-body-text-color  : var(--color-contrast);
    --table-body-background  : #fff;
    --table-footer-text-color: var(--color-contrast-dark);
    --table-footer-background: #fff;
  }

Alternate table

  .table.is-alternate {
    --table-header-text-color  : var(--color-white);
    --table-header-background  : var(--color-contrast-light-lower);
    --table-body-text-color    :  var(--color-contrast);
    --table-footer-text-color  : var(--color-white);
    --table-footer-background  : var(--color-contrast-light-lower);
    --table-row-odd-background : #fff;
    --table-row-even-background: var(--color-contrast-background-light);
  }